element el-date-picker daterange 限制选择日期 只能选择30天内 不能选择的置灰

 效果图：

<el-date-picker
      v-model="valuePicker"
      type="daterange"
      value-format="yyyy-MM-dd"
      align="right"
      unlink-panels
      range-separator="至"
      :picker-options="pickerOptions"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      @change='changeDate'
    >
    </el-date-picker>

data() {
    return {
      minDate: "",
      maxDate: "",
      valuePicker: "",
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.minDate = minDate;
          this.maxDate = maxDate;
        },
        disabledDate: (time) => {
          let curDate = new Date().getTime();
          let three = 30 * 24 * 3600 * 1000;
          if (this.minDate) {
            return (
              time.getTime() > Date.now() ||
              time > new Date(this.minDate.getTime() + three) ||
              time < new Date(this.minDate.getTime() - three)
            );
          }
          return time.getTime() > Date.now();
        },
      },
    };

changeDate(e) {
      if (e === null) {
        this.minDate = "";
        this.maxDate = "";
        this.pickerBeginDateBefore = {
          disabledDate: (time) => {
            let curDate = new Date().getTime();
            let three = 30 * 24 * 3600 * 1000;
            if (this.minDate) {
              return (
                time.getTime() > Date.now() ||
                time > new Date(this.minDate.getTime() + three) ||
                time < new Date(this.minDate.getTime() - three)
              );
            }
            return time.getTime() > Date.now();
          },
        };
      }
    },

官网地址：https://element.eleme.cn/#/zh-CN/component/date-picker
核心就是利用onpick取到点击的时间,然后根据disabledDate动态的做一个限制
清空重新选择的时候通过change事件,把限制规则重置.