一、基础场景（结合 Moment.js 优化）

在Element UI 官方文档，指出el-date-picker 的下拉面板日期置灰disabled-date 一个用来判断该日期是否被禁用的函数，接受一个 Date 对象作为参数。 应该返回一个 Boolean 值。

  <el-date-picker
        v-model="value1"
        type="datetime"
        placeholder="Select date and time"
        :disabled-date="disabledDate"
      />

1. 禁用当天及之前的日期
   原生写法：

disabledDate(time) {
    
    
  return time.getTime() < Date.now() - 86400000
}

Moment.js 写法：

disabledDate(time) {
    
    
  return moment(time).isBefore(moment().startOf('day'), 'day')
}

2. 禁用未来日期
   原生写法：

disabledDate(time) {
    
    
  return time.getTime() > Date.now()
}

Moment.js 写法：

disabledDate(time) {
    
    
  return moment(time).isAfter(moment(), 'day')
}

二、进阶场景（动态交互逻辑）

1. 动态日期范围限制

// 限制结束时间不能早于开始时间
disabledDateEnd(time) {
    
    
  return this.form.startTime && moment(time).isBefore(moment(this.form.startTime))
}

2. 固定时间段限制（如最近 3 个月）
   Moment.js 写法：

disabledDate(time) {
    
    
  const threeMonthsAgo = moment().subtract(3, 'months')
  return moment(time).isBefore(threeMonthsAgo)
}

三、特殊场景（精细化控制）

1. 精确到时分秒的限制

// 禁用当天0点前的所有日期
disabledDate(time) {
    
    
  return moment(time).isBefore(moment().startOf('day'))
}

2. 节假日禁用（需预设数据）：

disabledDate(time) {
    
    
  const holidays = ['2025-10-01', '2025-01-01']
  return holidays.includes(moment(time).format('YYYY-MM-DD'))
}

四、Moment.js 核心技巧

1. 时区处理：

moment(time).utcOffset(480) // 兼容中国时区（UTC+8）

2. 时间段计算：

moment().subtract(7, 'days') // 获取7天前日期
moment().add(1, 'month')     // 获取下月同日

3. 格式化对比：

moment(time).format('YYYY-WW') // 获取周数格式（如2025-12周）

五、注意事项

1. 时区陷阱：服务器时间与本地时间需统一时区标准（建议全部转为 UTC 时间处理）
2. 性能优化：避免在 disabledDate 中频繁创建 Moment 对象，可提前缓存日期变量
3. 周数计算：使用 moment(time).isoWeek() 获取符合国际标准的周数

参考文献

datetime-picker
momentjs