需求:禁止选则当前时间之前的时间;
日期禁选 DateTimePicker 日期时间选择器 | Element Plus element-plus 禁用日期函数disabled-date里
时分秒的处理 时分秒的判断用到TimePicker 时间选择器的属性disabled-hours、disabled-minutes、disabled-seconds
实现思路 通过选择时间的变化,动态计算时分秒是否禁用,废话不多说,直接上代码
v-model="dateTime"
value-format="YYYY-MM-DD HH:mm:ss"
@update:modelValue="handleDateChange"
type="datetime"
:disabledDate="disabledDateFn"
:disabled-hours="disabledHours"
:disabled-minutes="disabledMinutes"
:disabled-seconds="disabledSeconds"
:default-time="new Date()"
placeholder="选择时间" />
// 保存日期选择框实时选择数据
const selectTimes = ref(Date.now());
const handleDateChange = (value: any) => {
if (value && value.split(' ') && value.split(' ').length > 0) {
// 使用空格作为分隔符,将日期时间字符串拆分成数组
const parts = value.split(' ');
// 取数组的第一个元素(日期部分)
const datePart = parts[0];
// 将日期部分按照连字符 '-' 拆分成数组
const dateParts = datePart.split('-');
// 去除月份和日期中的前导零
const year = dateParts[0];
const month = parseInt(dateParts[1], 10); // 使用parseInt去除前导零
const day = parseInt(dateParts[2], 10); // 使用parseInt去除前导零
// 取数组的第二个元素(时间部分)
const timePart = parts[1];
// 将时间部分按照冒号 ':' 拆分成数组
const timeParts = timePart.split(':');
// 去除小时、分钟和秒中的前导零
const hour = parseInt(timeParts[0], 10); // 使用parseInt去除前导零
const minute = parseInt(timeParts[1], 10); // 使用parseInt去除前导零
const second = parseInt(timeParts[2], 10); // 使用parseInt去除前导零
// 实时保存选择时间
selectTimes.value = new Date(`${year}-${month}-${day} ${hour}:${minute}:${second}`).getTime();
}
};
// 禁用比当前时间小的日期
const disabledDateFn = (time: any) => {
//比当前时间小的日期禁用(返回false则禁用)
return time.getTime() < Date.now() - 24 * 3600 * 1000;
};
// 限制比当前时间小的小时
const disabledHours = () => {
const a: number[] = [];
if (new Date(selectTimes.value).getTime() > Date.now()) return a;
for (let i = 0; i < 24; i++) {
if (new Date().getHours() <= i) continue;
a.push(i);
}
return a;
};
// 禁用比当前时间小的分钟
const disabledMinutes = () => {
const a: number[] = [];
if (new Date(selectTimes.value).getTime() > Date.now()) return a;
for (let i = 0; i < 60; i++) {
if (new Date().getMinutes() <= i) continue;
a.push(i);
}
return a;
};
// 禁用比当前时间小的秒
const disabledSeconds = () => {
const a: number[] = [];
if (new Date(selectTimes.value).getTime() > Date.now()) return a;
for (let i = 0; i < 60; i++) {
if (new Date().getSeconds() <= i) continue;
a.push(i);
}
return a;
};