Vue3+ElementPlus el-date-picker 时间范围设置 固定时间段可选 配置

vue3 template 部分

?

1 2 3 4 5 6 7 8

<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 方法是关键)

​

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<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>

　效果图