el-date-picker 時間日期格式，選擇范圍限制

　　背景：el-date-picker 使用時，有時候想要限制用戶選擇的訪問，但是用的是datetimerange類型的選擇器，不想單獨寫兩個起始的選擇器。我發現網上的方案大部分都是單獨寫兩個，個別使用datetimerange的選擇器說的也不是很清楚，也有一些bug，這里貼出我的解決辦法供大家參考；

　　使用picker-options屬性的disabledDate去控制范圍。返回true代表禁止，就無法點擊選擇器的確認按鈕。

 

<el-date-picker
     :picker-options="pickerOptions"
      size="medium"
      v-model="searchTime"
      value-format="yyyy-MM-dd HH:mm:ss"
      type="datetimerange"
      range-separator="至"
      start-placeholder="開始日期"
      end-placeholder="結束日期"
></el-date-picker>

data() {
    return {
      maxDate: null,
      minDate: null,
      pickerOptions: {
　　　　　// 當我們選擇日期時的回調方法。返回兩個日期的最大值和最小值，第一次返回一個值，第二次返回兩個值
        onPick: ({ maxDate, minDate }) => {
　　　　　　//當我們選擇兩個值的時候，就認為用戶已經選擇完畢
          if (maxDate != null && minDate != null) {
            this.maxDate = maxDate;
            this.minDate = minDate;
          }
        },
        disabledDate: time => {
          let maxDate = this.maxDate;
          let minDate = this.minDate;
          if (maxDate != null && minDate != null) {
            let days = maxDate.getTime() - minDate.getTime();
　　　　　　　//計算完之后必須清除，否則選擇器一直處於禁止選擇的狀態
            this.maxDate = null;
            this.minDate = null;
            return parseInt(days / (1000 * 60 * 60 * 24)) > 30;
          } else {
            //設置當前時間后的時間不可選
            return time.getTime() > Date.now();
          }
        }
      }
    };
  },

當我們選擇的范圍超過30天時，確認按鈕無法點擊

 

 當小於或等於30天時，可以確認