el-date-picker限制只能选择本月

el-date-picker限制只能选择本月

遇到一个需求：选择开始时间后 结束时间要不能跨越开始日期的月份，而且结束时间要大于开始时间，可选择当天。
直接上代码：

   <div class="date-div">
            <div>
              <el-date-picker
                v-model="form.startDate"
                style="width: 180px"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                @change="changeTime"
              >
              </el-date-picker>
            </div>
            <span>至</span>
            <div>
              <el-date-picker
                v-model="form.endDate"
                :disabled="!form.startDate"
                style="width: 180px"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </div>
          </div>

我们都知道可以使用picker-options来限制选择日期的范围，我们这里也是采用这个方式，下面是我的部分data数据：

 data() {
    return {
      form: {
        deptCode: '',
        keyword: '',
        startDate: '',
        endDate: '',
      },
      pickerOptions: this.disabledDate(),
      month: null,
      year: null,
      day: null,
      },
       }

这里注意一下disabledDate的参数是当前时间，显然我们需要传参(开始时间)进去限制结束时间，那么我们在methods里定义一个函数来实现：

disabledDate() {
      let that = this;
      //disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
      return {
        disabledDate(date) {
          if (that.form.startDate) {
            return (
              date.getTime() <
                new Date(new Date(that.form.startDate) - 24 * 60 * 60 * 1000).getTime() ||
              date.getTime() >
                new Date(
                  that.year,
                  that.month - 1,
                  new Date(that.year, that.month, 0).getDate(),
                ).getTime()
            );
          }
        },
      };
    },

大家可能对我的参数 year，month有疑问，其实就是开始时间：例如2021-10-21对应 year:2021，month:10，在开始时间change函数里去拿到。

change函数

changeTime(val) {
      console.log(val);
      if (val) {
        this.month = val.split('-')[1];
        this.year = val.split('-')[0];
        // this.day = val.split('-')[2];
      } else {
        this.disabledDate();
        this.form.endDate = null;
      }
    },

结果：

我这个方法只是针对我的需求，其他需求修改disabledDate即可，我觉得还有更优的方法，请大佬指出！