项目里遇到个需求,使用DateTimePicker选择时间不止要限制当前日期之前不能选,还得限制当前时分秒之前不能选(不包括秒),首先使用DateTimePicker的picker-options来限制当前日期。
当然,日期是很好限制的
disabledDate: time => {
return time.getTime() < new Date().getTime() - 24 * 60 * 60 * 1000;
}
使用disabledDate就可以进行限制。
时分秒方面主要是今日和别的日期的区别,只有今日才会限制,如何才能知道选中的今日,看文档Element并没有提供点击日期的事件,所宜采用监听数据的方式,DateTimePicker绑定的数据在切换日期的时候就会变,所以使用动态改变selectableRange属性。
所以,最终写法如下:
<el-date-picker v-model="form.startTime"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd HH:mm:ss"
type="datetime"
placeholder="选择日期时间"
ref="datapicker"
:picker-options="{
disabledDate: time => {
return time.getTime() < new Date().getTime() - 24 * 60 * 60 * 1000;
},
selectableRange: startTimeRange
}"
></el-date-picker>
watch: {
"form.startTime": {
handler(newValue, oldValue) {
if (newValue) {
let nowDate = parseTime(Date.now());
let dt = nowDate.split(" ");
let st = "";
if (newValue.split(" ")[0] == dt[0]) {
st = dt[1];
} else {
st = "00:00:00";
}
this.startTimeRange = st + " - 23:59:59";
}
},
},
},
判断是今天就限制当前时间到23:59:59否则就限制00:00:00 到 23:59:59