html:
<el-date-picker v-model="form.times" type="datetime" placeholder="选择日期时间" :picker-options="pickerOptions">
</el-date-picker>
js:
export default {
data() {
return {
pickerOptions: {
disabledDate(time) {
// 禁用当前日期之后的日期
return time.getTime() > moment();
},
// 设置时间选择范围
selectableRange: "00:00:00 - 23:59:59",
},
}
},
watch: {
"form.times"(selectTime) {
// 当选择的日期就是当天的时候,这个时候就要限制时间应当小于此时此刻的时分秒
if (moment(selectTime).format("l") === moment(new Date()).format("l")) {
const data = new Date();
const hour = data.getHours();
const minute = data.getMinutes();
const second = data.getSeconds();
this.$set(
this.pickerOptions,
"selectableRange",
`00:00:00 - ${hour}:${minute}:${second}`
);
} else {
// 当选择的日期小于当天的时候,这时需要把时分秒的限制放开,否则不能选择
this.$set(this.pickerOptions, "selectableRange", "00:00:00 - 23:59:59");
}
},
},
}