vue3+ts+vite+element plus设置日期时间禁止选择小于当前时间精确到时分秒

ts组件

// timeUtils.ts

/**
 * 生成一个数组
 * @param start
 * @param end
 */
export const makeRange = (start: number, end: number): number[] => {
  const result: number[] = [];
  for (let i = start; i <= end; i++) {
    result.push(i);
  }
  return result;
};

/**
 * 限制今天之前的时间不能选择（小时）
 * @param beginTime 开始时间
 */
export const disabledHours = (beginTime: string): number[] | undefined => {
  let newVal = new Date(beginTime);
  if (
    newVal &&
    newVal.getFullYear() === new Date().getFullYear() &&
    newVal.getMonth() === new Date().getMonth() &&
    newVal.getDate() === new Date().getDate()
  ) {
    // 如果为今天，则限制当前时间前的时间不能选择。
    return makeRange(0, new Date().getHours() - 1);
  }
  return undefined;
};

/**
 * 限制今天之前的时间不能选择（分钟）
 * @param beginTime 开始时间
 * @param hour 小时
 */
export const disabledMinutes = (beginTime: string, hour: number): number[] => {
  let newVal = new Date(beginTime);
  if (
    newVal &&
    newVal.getFullYear() === new Date().getFullYear() &&
    newVal.getMonth() === new Date().getMonth() &&
    newVal.getDate() === new Date().getDate() &&
    newVal.getHours() === hour // 确保小时也相同
  ) {
    // 如果为今天且小时相同，则限制当前时间前的分钟不能选择。
    return makeRange(0, new Date().getMinutes() - 1);
  }
  return []; // 其他情况不限制
};

/**
 * 禁用小于当前时间的秒
 * @param beginTime 开始时间
 * @param hour 小时
 * @param minute 分钟
 */
export const disabledSeconds = (beginTime: string, hour: number, minute: number): number[] => {
  let newVal = new Date(beginTime);
  if (
    newVal &&
    newVal.getFullYear() === new Date().getFullYear() &&
    newVal.getMonth() === new Date().getMonth() &&
    newVal.getDate() === new Date().getDate() &&
    newVal.getHours() === hour &&
    newVal.getMinutes() === minute
  ) {
    // 如果为今天且小时、分钟相同，则限制当前时间前的秒不能选择。
    return makeRange(0, new Date().getSeconds() - 1);
  }
  return []; // 其他情况不限制
};

// 新增格式化函数，将日期对象转换为 YYYY-MM-DD HH:mm 格式
export const formatDate = (date: Date): string => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0') // 添加秒的处理
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}` // 返回包含秒的字符串
};

父组件调用 

    <el-date-picker
                      v-model="ruleForm.beginTime"
                      type="datetime"
                      value-format="YYYY-MM-DD HH:mm:ss"
                      v-bind="pickerOptions"
                      placeholder="选择日期时间"
   @focus="handleDatePickerFocus"
                    >

js

  import {
    makeRange,
    disabledHours,
    disabledMinutes,
    disabledSeconds,
    formatDate,
  } from './timeUtils'

  // 编辑表单数据
  const ruleForm = reactive<EditDataType['RuleForm']>({

    beginTime: '',
  })
  // 表单数据检验
  const rules = reactive<FormRules<EditDataType['RuleForm']>>({
  
    beginTime: [
      {
        type: 'date',
        required: true,
        message: '请选择时间',
        trigger: 'change',
      },
    ],
   
  })

 /**
   * 限制今天之前的时间不能选择的配置
   */
  const pickerOptions = computed(() => {
    return {
      // 限制今天之前的日期不能选择
      disabledDate(time: any) {
        return time.getTime() < Date.now() - 8.64e7
      },
      // 限制今天之前的小时不能选择
      disabledHours: () => disabledHours(ruleForm.beginTime),
      // 限制今天之前的分钟不能选择
      disabledMinutes: (hour: number) =>
        disabledMinutes(ruleForm.beginTime, hour),
      // 限制今天之前的秒不能选择
      disabledSeconds: (hour: number, minute: number) =>
        disabledSeconds(ruleForm.beginTime, hour, minute),
    }
  })
  // 处理 el-date-picker 的 focus 事件
  const handleDatePickerFocus = () => {
    // 在这里进行赋值操作，例如将当前时间赋值给 beginTime
    ruleForm.beginTime = formatDate(new Date())
  }