el-date-picker 禁用日期和时间

实现效果

代码技术

vue3 eleui

主要思路和注意点

设置对应的参数：

:disabled-date="disabledDate"

:disabled-hours="disabledHours"

:disabled-minutes="disabledMinutes"

:disabled-seconds="disabledSeconds"

整体代码

<el-date-picker
 :disabled-date="disabledDate" :disabled-hours="disabledHours"
          :disabled-minutes="disabledMinutes" :disabled-seconds="disabledSeconds"

 禁用日期时间
 
<el-date-picker :disabled-date="disabledDate" :disabled-hours="disabledHours"
          :disabled-minutes="disabledMinutes" :disabled-seconds="disabledSeconds"
          
// 禁用当前日期之前的时间
const disabledDate = (time: Date) => {
  return time.getTime() < Date.now() - 8.64e7// - 8.64e7是今天可以选
}
// 禁用当前小时之前的小时
const disabledHours = () => {
  const now = new Date();
  if (!data.formData.startTime) return [];
  const selectedDate = new Date(data.formData.startTime);

  // 标准化日期，只比较年月日
  const normalizeDate = (date: Date) => {
    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
  };

  // 非今天日期不限制小时
  if (normalizeDate(selectedDate).getTime() !== normalizeDate(now).getTime()) return [];

  const currentHour = now.getHours();
  // 生成当前小时之前的小时列表（包含当前小时）
  const disabled = [];
  for (let i = 0; i < currentHour; i++) {
    disabled.push(i);
  }
  return disabled;
};
// 禁用当前分钟+2之前的分钟
const disabledMinutes = () => {
  const now = new Date();
  if (!data.formData.startTime) return [];
  const selectedDate = new Date(data.formData.startTime);

  // 标准化日期，只比较年月日
  const normalizeDate = (date: Date) => {
    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
  };

  // 非今天日期不限制分钟
  if (normalizeDate(selectedDate).getTime() !== normalizeDate(now).getTime()) return [];

  // 如果选择的小时不是当前小时，不限制分钟
  if (selectedDate.getHours() !== now.getHours()) return [];

  const currentMinute = now.getMinutes();
  // 生成当前分钟+2之前的分钟列表（包含当前分钟）
  const disabled = [];
 //如果你要禁用当前分钟之前用这个即可
  // for (let i = 0; i < currentMinute; i++) {
  for (let i = 0; i <= currentMinute + 2 && i <= 59; i++) {

    disabled.push(i);
  }
  return disabled;
};
// 禁用当前秒之前的秒
const disabledSeconds = () => {
  const now = new Date();
  if (!data.formData.startTime) return [];
  const selectedDate = new Date(data.formData.startTime);

  // 标准化日期，只比较年月日
  const normalizeDate = (date: Date) => {
    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
  };

  // 非今天日期不限制秒
  if (normalizeDate(selectedDate).getTime() !== normalizeDate(now).getTime()) return [];

  // 如果选择的小时不是当前小时，不限制秒
  if (selectedDate.getHours() !== now.getHours()) return [];

  // 如果选择的分钟不是当前分钟，不限制秒
  if (selectedDate.getMinutes() !== now.getMinutes()) return [];

  const currentSecond = now.getSeconds();
  // 生成当前秒之前的秒列表（包含当前秒）
  // 秒数全部禁用

  const disabled = [];
  for (let i = 0; i < currentSecond; i++) {
    disabled.push(i);
  }
  return disabled;
};