526互联

el-date-picker element Plus 实现限制时间选择范围（7天）

发布时间 2023-08-02 11:20:09作者: 梧桐树211

element Plus 没有picker-options配置项，可以使用 :disabled-date="disabledDate" @calendar-Change="calendarChange" 配合实现该需求

<el-date-picker
          v-model="date"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :disabled-date="disabledDate"
          @calendar-Change="calendarChange"
        />

const choiceDate = ref(null)

const disabledDate = (time:any)=>{
  // 如何选择了一个日期
  if (choiceDate.value) {
      // 7天的时间戳
      const one = 6 * 24 * 3600 * 1000;
      // 当前日期 - one = 7天之前
      const minTime = choiceDate.value - one;
      // 当前日期 + one = 7天之后
      const maxTime = choiceDate.value + one;
      return (
        time.getTime() < minTime ||
        time.getTime() > maxTime
        // 限制不能选择今天及以后
        // || time.getTime() + 1 * 24 * 3600 * 1000 > Date.now()
      );
    } else {
      // 如果没有选择日期，就要限制不能选择今天及以后
      // return time.getTime() + 1 * 24 * 3600 * 1000 > Date.now();
    }
}
const calendarChange = (obj:any)=>{
  const minDate = obj[0]
  const maxDate = obj[1]
  // 把选择的第一个日期赋值给一个变量。
  choiceDate.value = minDate.getTime();
  // 如何你选择了两个日期了，就把那个变量置空
  if (maxDate) choiceDate.value = null;
}