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;
}
}
},
};
},
参考链接
本文来自博客园,作者:shayloyuki,转载请注明原文链接:https://www.cnblogs.com/shayloyuki/p/17899534.html
posted on 2023-12-13 17:29 shayloyuki 阅读(1125) 评论(0) 编辑 收藏 举报