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>

　效果圖