el-date-picker的type为daterange时仅对开始日期做限制

---

前言绣球

需求是这样的，开始日期需要限制只能选择今天的日期，结束日期只能选择今天之后的日期。结束日期很常见，但是单纯限制开始日期，还是蛮少见的，尤其是daterange模式的开始日期和结束日期用的同一个日期弹窗。本来是用change去做的清除，但只能清除一次，还不知道为啥，我把代码贴上来，要是有知道的可以告诉我一下，我研究明白了也会再来记录一下

---

html代码

<el-date-picker
      v-model="createtime"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions">

一、正确代码

// startTimeFlag = false 这个就正常定义在data中就行啦
pickerOptions: {
            onPick: ({ maxDate, minDate }) => {
              if (!maxDate && !minDate) {
                this.startTimeFlag = false;
              } else if (minDate) {
                this.startTimeFlag = true;
                if (!this.isToday(new Date(minDate))) {
                  // 如果选择的开始时间不是今天,则不允许选择
                  this.startTimeFlag = false;
                  this.$msg({ type: 'warning', message: '开始时间只能选择当天日期！' });
                }
              }
              console.log(maxDate, minDate, this.startTimeFlag);
            },
            disabledDate: (time) => {
              if (!this.startTimeFlag) {
                return !this.isToday(time);
              }
              const yestoday = new Date();
              yestoday.setDate(yestoday.getDate() - 1);
              return time.getTime() < yestoday.getTime();
            },
          },
// 这个就是ai写的判断日期的方法,还蛮好用的。再一次感慨一句，任何工作都是想法最重要，创意最值钱呀
isToday(date) {
      const today = new Date();
      return (
        date.getFullYear() === today.getFullYear() &&
        date.getMonth() === today.getMonth() &&
        date.getDate() === today.getDate()
      );
    },

二、错误代码

dateChange(value, info, form) {
      if (info.CODE === 'createTime' && !this.isToday(new Date(form.startTime))) {
        // 如果选择的开始时间不是今天，则清空时间
        this.$msg({ type: 'warning', message: '开始时间只能选择当天日期！' });
        form.startTime = '';
        form.endTime = '';
        // 这里写为null可以清除数据，写为‘’则不行，也有可能是封装问题导致
        form.createTime = null;
      }
    },