(juejin.cn/post/713972… "juejin.cn/post/713972…")

一. 前言

今天使用Element-plus DatePicker实现动态可选区间的功能，查看element plus文档【传送门】时发现picker-options属性不见了。原来新版UI已经把它平铺开了，脑瓜疼。

二. 实现。

先看实现后的效果GIF，下图是实现选择开始时间时，自动计算出结束日期可选范围。（我只允许结束日期在开始日期的前七天或者后七天内选择）

Element2 旧版我们这样实现：

<el-date-picker v-model="value" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions"> </el-date-picker>

data(){ 
   var vue = this; 
   return {
     pickerOptions:{
         disabledDate(time) {
            let timeOptionRange = vue.timeOptionRange;
            let oneWeek = 60*60*24*1000*7;
            if(timeOptionRange){
                return time.getTime() > timeOptionRange.getTime() + oneWeek || time.getTime() < timeOptionRange.getTime() - oneWeek ;
            }
        },
        onPick(time){
            //当第一时间选中才设置禁用
            if(time.minDate && !time.maxDate){
                vue.timeOptionRange = time.minDate;
            }
            if(time.maxDate){
                vue.timeOptionRange = null;
            }
        }
     }
   } 
}

Element plus 新版我们这样实现：

 <el-date-picker
    v-model="date"
    :disabledDate="isDisabled"
    :shortcuts="shortcuts"
    range-separator="至"
    @calendar-change="calendar"
    type="daterange"
    unlink-panels
    popper-class="myDatePicker"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
  />
  <script setup>
    import { ref } from "vue";
    const date = ref('');
    const firstSelectedDayRef = ref(null);
    const onWeek = 1000 * 60 * 60 * 24 * 7;
    
    const isDisabled = (time) => {
      const firstSelectedDay = firstSelectedDayRef.value;
      if (firstSelectedDay) {
        return (
          time.getTime() < firstSelectedDay.getTime() - onWeek ||
          time.getTime() > firstSelectedDay.getTime() + onWeek
        );
      }
      return false;
    };

    const calendar = (date) => {
      const [minDate, maxDate] = date;
      if (minDate && !maxDate) {
        firstSelectedDayRef.value = minDate; //记录选中的首个日期
      } else {
        firstSelectedDayRef.value = null;
      }
    };
  </script>
  
  //日期控件禁用样式
.myDatePicker {
    .el-picker-panel__content {
        .el-date-table {
            td.disabled .el-date-table-cell {
                background-color: #fde2e2;
            }
        }
    }
}

Element-plus DatePicker动态改变日期可选区间

一. 前言

二. 实现。