需求:禁止选择当前日期前的时间;
日期禁选
DateTimePicker 日期时间选择器 | Element Plus
element-plus 去掉了element-ui的属性picker-options,判断日期是否被禁用 只能写在函数disabled-date里
时分秒的处理
时分秒的判断用到TimePicker 时间选择器的属性disabled-hours、disabled-minutes、disabled-seconds
TimePicker 时间选择器 | Element Plus
// html
<el-date-picker
v-model="Time[1]"
placeholder="结束时间"
type="datetime"
value-format="YYYY-MM-DD HH:mm:ss"
:disabledDate="disabledDateFn"
:disabled-hours="disabledHours"
:disabled-minutes="disabledMinutes"
:disabled-seconds="disabledSeconds"
:default-time="new Date()"
/>
const disabledDateFn = (time: any) => {
// 比当前时间小的时间禁用(返回false则禁用)
return time.getTime() < Date.now() - 24 * 3600 * 1000;
};
// 处理时
const disabledHours = (c: any, g: any, j: any, k: any) => {
const list = [];
if (Time[1]) {
let a: any = new Date(Time[1]).getTime();
let b: any = dayjs(a).format("YYYY-MM-DD");
let c: any = dayjs().format("YYYY-MM-DD");
if (b === c) {
for (let i = 0; i < 24; i++) {
// 限制之前 < 之后 > ,下面同理
if (new Date().getHours() <= i) continue;
list.push(i);
}
}
}
return list;
};
// 处理分
const disabledMinutes = (hour: number, role: string, comparingDate?: any) => {
const list = [];
if (Time[1]) {
let a: any = new Date(Time[1]).getTime();
let b: any = dayjs(a).format("YYYY-MM-DD");
let c: any = dayjs().format("YYYY-MM-DD");
let d: any = dayjs().format("H");
// 限制之前 < 之后 > ,下面同理
if (b === c && hour <= d) {
for (let i = 0; i < 60; i++) {
if (new Date().getMinutes() <= i) continue;
list.push(i);
}
}
}
return list;
};
// 处理秒
const disabledSeconds = (
hour: number,
minute: number,
role: string,
comparingDate?: any,
) => {
const list = [];
if (Time[1]) {
let a: any = new Date(Time[1]).getTime();
let b: any = dayjs(a).format("YYYY-MM-DD");
let c: any = dayjs().format("YYYY-MM-DD");
let d: any = dayjs().format("H");
let m: any = dayjs().format("m");
// 限制之前 < 之后 > ,下面同理
if (b === c && hour <= d && minute <= m) {
for (let i = 0; i < 60; i++) {
if (new Date().getSeconds() <= i) continue;
list.push(i);
}
}
}
return list;
};