1.效果预览
动画.gif
2.使用到的属性和库
- disabled-date：一个用来判断该日期是否被禁用的函数，接受一个Date对象作为参数，应该返回一个 Boolean 值
- disabled-hours：判断该小时是否被禁用的函数，但和disabled-date略有不同，返回的是一个数组，数组里面包含的是被禁选的小时，若无禁选项，返回空数组即可
- disabled-minutes：同上
- moment时间处理库
3.代码实现
<el-date-picker
v-model="selectTime"
type="datetime"
value-format="YYYY-MM-DD HH:mm"
format="YYYY-MM-DD HH:mm"
placeholder="请选择时间"
:disabled-date="disabledDate"
:disabled-hours="disabledHour"
:disabled-minutes="disabledMinute"
/>
/** 选择的日期时间 */
const selectTime = ref();
/** 可选的最后日期，之后的日期、时间、分钟禁选 */
const disabledDateTime = moment("2022-11-23 09:20");
/** 禁选日期 */
const disabledDate = (time: Date) => {
return time.getTime() > moment(disabledDateTime).toDate().getTime();
};
/** 禁选小时：如果当前选择的日期和被禁选的日期为同一天，则进行小时的禁用 */
const disabledHour = () => {
if (
disabledDateTime &&
moment(selectTime.value).format("YYYY-MM-DD") == moment(disabledDateTime).format("YYYY-MM-DD")
) {
return Array.from({ length: 24 - disabledDateTime.hours() }, (v, i) => i + 1 + disabledDateTime.hours());
} else {
return [];
}
};
/** 禁选分钟：如果当前选择的日期和时间，和被禁选的日期和时间为同一天同一小时，则进行分钟的禁用 */
const disabledMinute = () => {
if (
disabledDateTime &&
moment(selectTime.value).format("YYYY-MM-DD HH") == moment(disabledDateTime).format("YYYY-MM-DD HH")
) {
return Array.from({ length: 60 - disabledDateTime.minutes() }, (v, i) => i + 1 + disabledDateTime.minutes());
} else {
return [];
}
};
