Vue3+ElementPlus el-date-picker 时间范围设置 固定时间段可选 配置
vue3 template 部分<el-date-pickerv-model="value1"type="daterange"range-separator="To":disabledDate="disabledDateFun"start-placeholder="Start date"end-placeholder="End date"/>vue3 逻
·
这是Vue3版本的,vue2+element旧版地址elementUI el-date-picker 时间范围设置 固定时间段可选 配置_天渺工作室的博客-CSDN博客
vue3 template 部分
<el-date-picker
v-model="value1"
type="daterange"
range-separator="To"
:disabledDate="disabledDateFun"
start-placeholder="Start date"
end-placeholder="End date"
/>
vue3 逻辑部分 采用script-setup语法糖 (和vue2一样的 disabledDate 方法是关键)
<script lang="ts" setup>
import { ref } from "vue";
const value1 = ref<string>("");
const disabledDateFun = (time: Record<string, any>): boolean => {
console.log(time); // time 为new Date()类型
if (time.getTime() > new Date().getTime()) {
return time.getTime() >= new Date().getTime(); //时间范围必须是时间戳
} else {
return time.getTime() < Date.now() - 2 * 8.64e7; //8.64e7就是一天的时间戳 24*60*60*1000 两天之内 根据自己需求来定
}
};
</script>
效果图
更多推荐
已为社区贡献10条内容
所有评论(0)