＜el-date-picker＞配置禁用指定日期之前的时间选择（Vue2、Vue3包括时分秒）

        今天突然接受到一个离谱的需求：有一个需要配置定时任务开始执行时间的组件，之前的做法都是用<el-form>的rules定义校验规则，也能实现效果，但是今天产品突发奇想：不能选的时间就置灰（就是我们说的禁用），直接一脸懵！不够最后还是好心的度娘拯救了我，但是网上大多是Vue2+ELement ui的解决方案，不过我们这个项目是Vue3+Element Puls，不过大差不差。下面我将vue2和vue3的实现方法总结如下：

一、实现原理

        Element  Ui和Element Plus官方提供的配置属性是不一样的，下面介绍一下两者提供的配置属性

1、Element Ui

    Element Ui提供了Picker Options属性，里面有如下参数，其中disabledDate可以实现禁用指定日期的需求

2、Element Plus

        在Element Plus则是通过disabled-date来实现判断日期是否禁用的方法

二、Vue2+Element ui 实现

<el-date-picker
   v-model="date"
   type="date"
   size="small"
   value-format="yyyy-MM-dd"
   format="yyyy-MM-dd"
   :placeholder="'选择日期'"
   :picker-options="pickerOptions"
></el-date-picker>

data(){
  return {
    pickerOptions: {
       disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
       }
    }
  }
}

        提示：好像有网友说，vue2中这个指定日期的函数必须写到data中，不过我也没试，大家用的时候如果有问题，可以注意一下

三、Vue3+Element Plus 实现

<el-date-picker
  v-model="createParams.startTime"
  class="!w-240px"
  type="datetime"
  placeholder="请选择任务开始时间"
  value-format="x"
  :show-now="false"
  :disabled-date="disabledDate"
/>

const disabledDate = (time: Date) => {
  return time.getTime() < Date.now() - 8.64e7// - 8.64e7是今天可以选
}

四、Vue3使用进阶版（同时禁用时分秒的选择）

        当我把上面的代码改完提给测试之后，又被测试一顿摩擦：日期选择是被仅用了，时间选择为什么不禁用？？？所以才有了下面的进阶版

<el-date-picker
  v-model="createParams.startTime"
  class="!w-240px"
  type="datetime"
  placeholder="请选择任务开始时间"
  value-format="x"
  :show-now="false"
  :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 (!createParams.startTime) return [];
  const selectedDate = new Date(createParams.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;
};

// 禁用当前分钟之前的分钟
const disabledMinutes = () => {
  const now = new Date();
  if (!createParams.startTime) return [];
  const selectedDate = new Date(createParams.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();
  // 生成当前分钟之前的分钟列表（包含当前分钟）
  const disabled = [];
  for (let i = 0; i < currentMinute; i++) {
    disabled.push(i);
  }
  return disabled;
};

// 禁用当前秒之前的秒
const disabledSeconds = () => {
  const now = new Date();
  if (!createParams.startTime) return [];
  const selectedDate = new Date(createParams.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;
};

五、拓展

1、几个常用日期的禁用写法

禁用今日之后的日期（今天可选）

const disabledDate = (time: Date) => {
  return time.getTime() > this.specifyDate - 8.64e7;  //禁用今天之后的日期（今天可选）
}

禁用指定日期，如禁用大于2025-10-01日期（当前可选）

const disabledDate = (time: Date) => {
  return time.getTime() > new Date("2025-10-01").getTime() - 8.64e7;
}

2、解释一下上面设置时间的方法

（1）Date.now()获取当前时间（表示自 UNIX 纪元开始（1970 年 1 月 1 日 00:00:00 (UTC)）到当前时间的毫秒数）

（2）- 8.64e7 表示可选择当天时间（注：小于当前时间，- 8.64e7 则是禁用日期不包含当前日，若大于当前日期， 8.64e7 则是禁用日期包含当前日）

time.getTime() < Date.now() - 8.64e7  禁用日期不包含当前日

time.getTime() > Date.now() - 8.64e7  禁用日期包含当前日

 （3）time.getTime() < Date.now() - 8.64e7 代表只能选择今天之后的时间【包含今天】(8.64e7：科学计数法，代表8.64×10的7次方)

3、h5禁用指定日期不可选

<input
   type="date"
   placeholder="请选择日期"
   id="finishTime"
   name="finishTime"
>

设置禁止选择小于今天的日期，通过min设置【max禁止选择大于今天的日期】

const date_now = new Date();
const year = date_now.getFullYear();
const month = date_now.getMonth()+1 < 10 ? "0" + (date_now.getMonth() + 1) : (date_now.getMonth() + 1);
const date = date_now.getDate() < 10 ? "0" + date_now.getDate() : date_now.getDate();
$("#finishTime").attr("min", year + "-" + month + "-" + date);