elementui日期组件自定义日期选项picker-options

本文介绍: elementui 日期组件自定义日期选项 picker–options

1、背景：日期组件根据当前选中的日期值，要求只能选择当前日期前后三个月的日期，并且支持快捷选项。html 代码如下：

&lt;el-date-picker
      v-model="value2"
      type="daterange"
      value-format="yyyyMMdd"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions"&gt;
    &lt;/el-date-picker&gt;

2、方案：在p ic k eroptions中根据当前的日期配置 disabledDa t a 属性：

选择一个日期后作为结束日期或者起始日期记录下来，点击事件触发 options中的onp ic k 函数，在回调函数中有两个参数，一个偏大日期值一个偏小日期值；记录下之后根据业务要求区间定义 p ic k erRang e，这里设置三个月，只能选择该日期前后三个月；

pickerMinDate:null,
pickerRange:3600*1000*24*90,
pickerOptions: {
   onPick:({maxDate,minDate})=&gt;{
      if(minDate &amp;&amp; _this.pickerMinDate){
         _this.pickerMinDate = null;
      }else if(minDate){
         _this.pickerMinDate = minDate.getTime();
      }
   },
   disabledDate:(time) =&gt;{
     if(_this.pickerMinDate){
       return (time.getTime() > (_this.pickerMinDate + _this.pickerRange));
     }
     return false;
   },
    shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
},