需求
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;
}
}
},
};
},
参考链接
- elementui 时间日期选择器限制支持传参
- el-date-picker日期选择器时间选择范围限制
- ElementUI日期选择器DatePicker限制所选时间范围(例如限制前后时长不超一个月)的实现
- JS日期时间比较大小