之前以为使用 disabledDate 限定日期就够了,后面说需要限制在此刻之前更严谨。这里就需要更改selectableRange的值。
刚开始想使用事件监听的方式,比如 change、focus 事件,但是发现不能,这里的事件是针对输入框的,而不是弹出来的 date-picker里面的输入选择框。所以使用监听他的值。
当我们日期每次变动的时候都需要去验证是否是当前日期,然后才看是否修改selectableRange的值
template 部分
<el-date-picker
placeholder="选择日期时间"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="options"
v-model="ruleForm.time"
style="width:100%"></el-date-picker>
script 部分
{
data() {
return {
ruleForm: {
time: ''
},
options: {
// 时间不能大于当前时间
disabledDate: time => {
return time.getTime() > Date.now()
},
selectableRange: '00:00:00 - 23:59:59'
}
}
},
watch: {
'ruleForm.time'(selectTime) {
const date = new Date(new Date(selectTime).setHours(0, 0, 0, 0)).getTime()
const today = new Date(new Date().setHours(0, 0, 0, 0)).getTime()
const curTime = new Date()
if (date >= today) {
// 当选择的日期就是当天的时候,这个时候就要限制时间应当小于此时此刻的时分秒
this.options.selectableRange = `'00:00:00 - ${String(curTime.getHours()).padStart(2, '0')}:
${String(curTime.getMinutes()).padStart(2, '0')}:${String(curTime.getSeconds()).padStart(2, '0')}`
} else {
// 当选择的日期小于当天的时候,这时需要把时分秒的限制放开,否则不能选择
this.options.selectableRange = '00:00:00 - 23:59:59'
}
}
}
}