Vue3+Element Plus中el-date-picker时分限制报错求助

问题根源 #

你遇到的comparingDate.getHours is not a function报错，是因为Element Plus v2.x版本中，disabled-hours/disabled-minutes/disabled-seconds这些方法的参数是Dayjs实例，而非原生JavaScript的Date对象，直接调用Date的方法自然会报错。

完整解决方案 #

首先确保项目已安装Dayjs（Element Plus v2.x默认依赖Dayjs，若未安装可执行npm install dayjs），然后按以下步骤修改代码：

1. 模板部分（补充时分秒禁用属性） #

<div>
  <el-date-picker 
    style="width: 100%;" 
    v-model="strategyConfig.expiration" 
    type="datetime"
    :disabled-date="disablePastDates"
    :disabled-hours="disablePastHours"
    :disabled-minutes="disableMinutes"
    :disabled-seconds="disableSeconds"
    placeholder="请选择失效时间" 
  />
</div>

2. 脚本部分（修正禁用逻辑，使用Dayjs API） #

import dayjs from 'dayjs'

// 禁用24小时之前的日期（保留你原有的逻辑）
const disablePastDates = (time) => {
  // 注意：disabled-date的参数是原生Date对象
  return Date.now() - 24 * 60 * 60 * 1000 > time.getTime()
}

// 禁用小时逻辑：仅当天时，禁用大于当前小时的小时数
const disablePastHours = (comparingDate) => {
  const today = dayjs()
  // 判断选中日期是否为今天
  if (comparingDate.isSame(today, 'day')) {
    const currentHour = today.hour()
    // 返回需要禁用的小时数组（大于当前小时的都禁用）
    return Array.from({ length: 24 }, (_, i) => i).filter(hour => hour > currentHour)
  }
  // 非今天的日期，不禁用任何小时
  return []
}

// 禁用分钟逻辑：仅当天且选中小时等于当前小时时，禁用大于当前分钟的分钟数
const disableMinutes = (selectedHour, comparingDate) => {
  const today = dayjs()
  if (comparingDate.isSame(today, 'day')) {
    const currentHour = today.hour()
    if (selectedHour === currentHour) {
      const currentMinute = today.minute()
      return Array.from({ length: 60 }, (_, i) => i).filter(minute => minute > currentMinute)
    }
  }
  return []
}

// 禁用秒数逻辑：仅当天、选中小时和分钟都等于当前时分时，禁用大于当前秒的秒数
const disableSeconds = (selectedHour, selectedMinute, comparingDate) => {
  const today = dayjs()
  if (comparingDate.isSame(today, 'day')) {
    const currentHour = today.hour()
    const currentMinute = today.minute()
    if (selectedHour === currentHour && selectedMinute === currentMinute) {
      const currentSecond = today.second()
      return Array.from({ length: 60 }, (_, i) => i).filter(second => second > currentSecond)
    }
  }
  return []
}

关键逻辑说明 #

• 日期判断：用Dayjs的isSame(date, 'day')方法判断选中的日期是否为当天，只有当天才需要限制时分秒；
• 禁用规则：
  • 小时：当天时，禁用所有大于当前小时的选项；
  • 分钟：当天且选中小时等于当前小时时，禁用大于当前分钟的选项；
  • 秒数：当天、选中小时和分钟都匹配当前时分时，禁用大于当前秒的选项；
• 参数差异：disabled-date的参数是原生Date对象，而时间相关禁用方法的参数是Dayjs实例，调用API时要注意区分。

内容的提问来源于stack exchange，提问作者prawn