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

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>

　效果图