el-date-picker 时间控件校验选择时间必须遭早于当前时间(带时分秒),然后监控时间控件,当时间改变的时候,如果不是当天,那时间可以选择全天也就是00-24时,如果是当天,就是当前时间之前
html部分
<el-form-item label="注销时间" prop="logoutTime">
<el-date-picker
v-model="formData.logoutTime"
:placeholder="'请选择注销时间'"
type="datetime"
:picker-options="pickerOptions"
style="width: 200px">
</el-date-picker>
</el-form-item>
//js部分
data(){
pickerOptions: {
disabledDate(time) {
const date = new Date();
return time.getTime() > new Date().getTime();
// return time.getTime() > new Date().getTime() - 86400000;//这个不包含当天
},
selectableRange: (() => {
let data = new Date();
let hour = data.getHours();
let minute = data.getMinutes();
let second = data.getSeconds();
return [`00:00:01 - ${hour}:${minute}:${second}`]
})(),
},
}
//监听时间控件的改变值
watch: {
'formData.logoutTime':{
handler(newVal, oldVal) {
//这里判断是不是今天
let newValDate= new Date(newVal)//转换成中国标准时间
if (
newValDate &&newValDate.getFullYear() == new Date().getFullYear() &&
newValDate.getMonth() == new Date().getMonth() &&
newValDate.getDate() == new Date().getDate()
) {
//如果为今天,则限制当前时间后的时间不能选择。
let data = new Date();
let hour = data.getHours();
let minute = data.getMinutes();
let second = data.getSeconds();
this.pickerOptions.selectableRange = [`00:00:01 - ${hour}:${minute}:${second}`]
}else{
//如果不是今天,则不用限制
this.pickerOptions.selectableRange = "00:00:00 - 23:59:00";
}
}
}
},