Element Plus 日期时间选择器DateTimePicker禁用当前时间之前的时间(包含时分秒)完美解决

991 阅读2分钟

需求:禁止选则当前时间之前的时间;

593a50732e5b479586c0d083b4ec6188.png

日期禁选 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;
};