elementui中el-date-picker年月日时分禁用时分
环境是elementui加vue2
elementplus的话有对应的禁用参数,无需这么麻烦。
下处代码逻辑为禁用小于当前日期跟时分
template中
<template>
<el-date-picker
v-model="date"
type="datetime"
format="yyyy-MM-dd HH:mm"
value-format="yyyy-MM-dd HH:mm"
:style="{ width: '100%' }"
:picker-options="pickerOptions"
>
</el-date-picker>
</template>
date中
data(){
return {
date: undefined,
pickerOptions: {
selectableRange: "00:00:00 - 23:59:59",
disabledDate: time =>
time < new Date().setDate(new Date().getDate() - 1)
}
}
}
watch中
watch: {
"date"(val) {
const date = new Date(val);
const currentDate = new Date();
if (date.getDate() == currentDate.getDate()) {
let hours = currentDate.getHours();
hours = hours < 10 ? "0" + hours : hours;
const minutes = currentDate.getMinutes();
this.pickerOptions.selectableRange = `${hours}:${minutes}:00 - 23:59:59`;
} else {
this.pickerOptions.selectableRange = "00:00:00 - 23:59:59";
const year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
month = month < 10 ? "0" + month : month;
day = day < 10 ? "0" + day : day;
this.date = `${year}-${month}-${day} 00:00`;
}
}
},

浙公网安备 33010602011771号