问题描述：
用户只能选择当前时刻以后的时间，如果选择是当天的时间，时分秒需做限制，只能选择当前时间时分秒之后的时间，如果选择的是今天以后时间，就不需要判断时分秒
解决方法
使用el-date-picker属性 disabledDate 用来限制日期
使用el-date-picker属性 selectableRange 用来限制时分秒
话不多说，直接上代码
<template>
<el-form-item v-if="formData.pushType == '1'" label="推送时间：" prop="pushTime">
<el-date-picker
:picker-options="pickerOptions"
v-model="formData.pushTime"
type="datetime"
placeholder="请选择日期时间"
>
</el-date-picker>
</el-form-item>
</template>
<script>
import dayjs from 'dayjs'; //这里引用了dayjs
export default {
data() {
return {
pickerOptions: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7; //- 8.64e7是为了可以选今天日期
},
selectableRange: '',
},
}
},
watch: {
'formData.pushTime': {
handler(newValue, oldValue) {
if (newValue) {
let nowDate = dayjs().format('YYYY-MM-DD HH:mm:ss');
let dt = nowDate.split(' ');
let st = '';
if (dayjs(newValue).format('YYYY-MM-DD HH:mm:ss').split(' ')[0] == dt[0]) {
// 如果是当天,选择的时间开始为此刻的时分秒
st = dt[1];
// 如果是当天（只有当日期改变时）,默认选中时间为当前时间
if (dayjs(newValue).format('YYYY-MM-DD HH:mm:ss').split(' ')[0] != dayjs(oldValue).format('YYYY-MM-DD HH:mm:ss').split(' ')[0]) {
this.formData.pushTime = nowDate;
}
} else {
// 明天以及后面的时间从0时开始
st = '00:00:00';
}
this.pickerOptions.selectableRange = [st + ' - 23:59:59'];
}
}
}
},
}
</script>
