element 日期可选范围限制

 <el-date-picker
                v-model="formSearch.dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="yyyy-MM-dd "
                style="padding-top:0;padding-bottom:0"
                clearable
                :picker-options="pickerOptions"
              />

 1.限制开始时间前后可选范围（30天）

      selectDate: "",
      //限制日期选择器范围最多30天 并当前日期之后不可选
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.selectDate = minDate.getTime();
          if (maxDate) {
            this.selectDate = "";
          }
        },
        disabledDate: time => {
          if (this.selectDate !== "") {
            const one = 30 * 24 * 3600 * 1000;
            const minTime = this.selectDate - one;
            const maxTime = this.selectDate + one;
            return time.getTime() < minTime || time.getTime() > maxTime;
          }
        }
      }

 

  2.限制开始时间前可选范围并当前之后日期不可选（30天）

      selectDate: "",
      //限制日期选择器范围最多30天 并当前日期之后不可选
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.selectDate = minDate.getTime();
          if (maxDate) {
            this.selectDate = "";
          }
        },
        disabledDate: time => {
          if (this.selectDate !== "") {
            const one = 30 * 24 * 3600 * 1000;
            const minTime = this.selectDate - one;
            const maxTime = this.selectDate + one;
            return (
              time.getTime() < minTime ||
              time.getTime() > maxTime ||
              time.getTime() > Date.now()
            );
          }
        }
      }

3. 限制只能选择当前年

  pickerOptions: {
        // 只能选择当前年，并当前年之后不可选
        disabledDate(time) {
          let year = new Date().getFullYear();
          return (
            time.getTime() > new Date(year + "-12-31").getTime() ||
            time.getTime() < new Date(year + "-01-01").getTime() - 86400000 
          );
        }
      }

4.不能跨年选

      selectDate: null,
      selectedDateValue: null, //时间区间
      pickerOptions: {
        disabledDate: time => {
          if (this.selectDate == null) {
            return false;
          } else {
            return this.selectDate.getFullYear() != time.getFullYear();
          }
        },
        onPick: date => {
          // 如果只选择一个则保存至selectDate 否则selectDate 为空
          if (date.minDate && !date.maxDate) {
            this.selectDate = date.minDate;
          } else {
            this.selectDate = null;
          }
        }
      },

择