element datetimerange 只能选择今天之前（不包括今天）

⭐️ 今天做需求，产品要求日期选择只能选择今天之前（不包括今天），就是比如今天是 2021-8-26那就只能选择之前到25号

上百度查了下方法，发现有点小问题，网上的方法大多是

    pickerOptions: {
      disabledDate: (time) => {
          return time.getTime() > Date.now() - 1 * 24 * 60 * 60 * 1000
      }
    }

这样有一个问题就是当我们 type 设置成 datetimerange ，:default-time="[‘00:00:00’, ‘23:59:59’]" 可能前一天（25 号）也不能选择 因为 Date.now() 获取的是当前时间的时间戳 再减去一整天的时间戳后 就到了25号，当我们第一次选择25号的时候，minDate 是按照 defaultTime[0] 的时间也就是 00:00:00 来计算的时间戳，那么当前的时间肯定会小于 Date.now() - 1 * 24 * 60 * 60 * 1000 是可选的，而我们第二次选择25号的时候，maxDate 是按照 defaultTime[1] 的时间也就是 23:59:59’ 来计算的时间戳，那么就会大于 Date.now() - 1 * 24 * 60 * 60 * 1000

element-ui 源码位置：

packages/date-picker/src/panel/date-range.vue

      handleRangePick(val, close = true) {
        const defaultTime = this.defaultTime || [];
        const minDate = modifyWithTimeString(val.minDate, defaultTime[0]);
        const maxDate = modifyWithTimeString(val.maxDate, defaultTime[1]);

        if (this.maxDate === maxDate && this.minDate === minDate) {
          return;
        }
        this.onPick && this.onPick(val);
        this.maxDate = maxDate;
        this.minDate = minDate;

        // workaround for https://github.com/ElemeFE/element/issues/7539, should remove this block when we don't have to care about Chromium 55 - 57
        setTimeout(() => {
          this.maxDate = maxDate;
          this.minDate = minDate;
        }, 10);
        if (!close || this.showTime) return;
        this.handleConfirm();
      },

element-ui 源码位置：

src/utils/date-util.js

export const modifyWithTimeString = (date, time) => {
  if (date == null || !time) {
    return date;
  }
  time = parseDate(time, 'HH:mm:ss');
  return modifyTime(date, time.getHours(), time.getMinutes(), time.getSeconds());
};

即一个是 false 一个是 ture 这样，isValidValue 方法就会返回 false

element-ui 源码位置：

packages/date-picker/src/panel/date-range.vue

      isValidValue(value) {
        console.log(value[1].getTime() > Date.now() - 1 * 24 * 60 * 60 * 1000)
        return Array.isArray(value) &&
          value && value[0] && value[1] &&
          isDate(value[0]) && isDate(value[1]) &&
          value[0].getTime() <= value[1].getTime() && (
          typeof this.disabledDate === 'function'
            ? !this.disabledDate(value[0]) && !this.disabledDate(value[1])
            : true
        );
      },

这个判断就选不中

element-ui 源码位置：

packages/date-picker/src/panel/date-range.vue

    <el-button
      plain
      size="mini"
      class="el-picker-panel__link-btn"
      :disabled="btnDisabled"
      @click="handleConfirm(false)">
      {{ t('el.datepicker.confirm') }}
    </el-button>

确认按钮就会 disabled

正确答案：

      pickerOptions: {
        disabledDate: (time) => {
          let todayTimestamp = new Date(new Date().toLocaleDateString()).getTime()
          let timeRange = time.getTime() >= todayTimestamp
          return timeRange
        }
      }

这样 25 号选的时间戳都会小于26号 00:00:00 的时间戳，就会可选