el-date-picker 限制时间范围 picker-options 传参

需求

el-date-picker 限制时间范围的选取，不能超过某个区间 [startDate, endDate]。

问题在于，disabledDate 函数的参数默认是 time，无法传递自定义参数 [startDate, endDate]。

分析

传递给 picker-options 的值只能是对象。无法传递单个对象，但是可以传递一个返回对象的函数。

解决

template 代码

                  <el-date-picker
                    v-if="item.dataType === 'date'"
                    v-model="form[item.tag]"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                    :picker-options="pickerOptions(item.attributeScope)"
                  />

data 中返回

	// 也可以在 data 中初始化 {}，然后在 created 中重新赋值
      pickerOptions: function (scopeStr) {
        const flag = Boolean(scopeStr);
        return {
          disabledDate(time) {
            if (!flag) {
              return false;
            } else {
              const scope = JSON.parse(scopeStr);
              const startDate = new Date(scope[0]).getTime();
              const endDate = new Date(scope[1]).getTime();
              const selectDate = time.getTime();
              if (selectDate > startDate - 8.64e7 && selectDate < endDate) {
                return false;
              } else {
                // 禁用超出 [startDate, endDate] 部分的日期
                return true;
              }
            }
          },
        };
      },

参考链接

1. elementui 时间日期选择器限制支持传参
2. el-date-picker日期选择器时间选择范围限制
3. ElementUI日期选择器DatePicker限制所选时间范围(例如限制前后时长不超一个月)的实现
4. JS日期时间比较大小