elementui date component custom date options picker-options

 1. Background: Based on the currently selected date value, the date component requires that only dates three months before and after the current date can be selected, and it supports shortcut options. The html code is as follows:

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

2. Solution: Configure the disabledData attribute according to the current date in pickeroptions:

Select a date and record it as the end date or start date. The click event triggers the onpick function in options. There are two parameters in the callback function, one is a larger date value and the other is a smaller date value; after recording, the interval is determined according to the business requirements. Define pickerRange, set three months here, and only three months before and after the date can be selected;

pickerMinDate:null,
pickerRange:3600*1000*24*90,
pickerOptions: {
   onPick:({maxDate,minDate})=>{
      if(minDate && _this.pickerMinDate){
         _this.pickerMinDate = null;
      }else if(minDate){
         _this.pickerMinDate = minDate.getTime();
      }
   },
   disabledDate:(time) =>{
     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);
            }
          }]
},

3. Note: The shortcut keys may conflict with the custom onpick event, causing the date to be unselectable. Here is a detailed analysis based on the specific situation of your own business.