使用场景:当我们的开始时间和结束时间被要求分开输入时,我们如何让开始时间一定在结束时间的时间前面呢?刚开始我的想法只是通过JS 判断日期的时间戳大小来决定,我就是那个例子,下面我想做的是在用户端限制用户的选择时间。
element-ui 中,提供 picker-options 对当前时间日期选择器特有的选项配置。这里主要使用 disabledDate,其返回值为 Boolean类型。
这里设定两个时间组件,分别选择开始时间和结束时间。
如何判断开始时间的日期选择器,日期选择器的范围更结束时间有关,(小于结束时间)。当结束时间不为空时,可选时间大于结束时间的,即 disabledData 返回值为 true 的日期都禁止选中。同理判断结束时间选中时间区域。
// data 中设定
pickerOptionsStart: {
disabledDate: time => {
let endDateVal = this.form.timeEnd;
if (endDateVal) {
return time.getTime() > endDateVal;
}
}
},
pickerOptionsEnd: {
disabledDate: time => {
let beginDateVal = this.form.timeBegin;
if (beginDateVal) {
return time.getTime() < beginDateVal;
}
}
}
这里只是个人的见解,更多详情,请详细阅读element-ui 官网,若有不正确的地方,希望大家多多指教。案例