el-date-picker 时间日期格式，选择范围限制

　　背景：ElementUI的 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天时，可以确认