Vue3中Element Plus DateTimePicker如何禁用今日之前的过去时间？

Element Plus的DateTimePicker确实没有直接的属性来禁用过去时间，但可以通过disabled-date（配合disabled-time实现精确到时分秒的控制）来实现需求，以下是两种常见场景的实现方式：

场景1：禁用今日0点之前的所有日期（不限制今日内的时间） #

直接使用disabled-date属性，传入一个判断函数：

<template>
  <el-date-picker
    v-model="selectedDateTime"
    type="datetime"
    placeholder="选择日期时间"
    :disabled-date="disablePastDates"
  />
</template>

<script setup>
import { ref } from 'vue'

const selectedDateTime = ref(null)

// 禁用今日之前的日期
const disablePastDates = (time) => {
  // 获取今日0点的时间戳
  const todayStart = new Date(new Date().toDateString()).getTime()
  // 返回true表示禁用该日期
  return time.getTime() < todayStart
}
</script>

场景2：禁用当前时间之前的所有时间（包括今日已过去的时分秒） #

如果需要更精确的控制，配合disabled-time和is-show-time属性，实现今日内仅能选择当前时间及之后的时段：

<template>
  <el-date-picker
    v-model="selectedDateTime"
    type="datetime"
    placeholder="选择日期时间"
    :disabled-date="disablePastDates"
    :disabled-time="disablePastTimes"
    is-show-time
  />
</template>

<script setup>
import { ref } from 'vue'

const selectedDateTime = ref(null)

const disablePastDates = (time) => {
  const todayStart = new Date(new Date().toDateString()).getTime()
  return time.getTime() < todayStart
}

// 禁用当前时间之前的时分秒（仅当日选中今日时生效）
const disablePastTimes = (date) => {
  const now = new Date()
  // 仅对今日的时间做限制
  if (date.toDateString() === now.toDateString()) {
    const currentHour = now.getHours()
    const currentMinute = now.getMinutes()
    const currentSecond = now.getSeconds()

    return {
      disabledHours: () => Array.from({ length: currentHour }, (_, i) => i),
      disabledMinutes: (hour) => hour === currentHour 
        ? Array.from({ length: currentMinute }, (_, i) => i) 
        : [],
      disabledSeconds: (hour, minute) => hour === currentHour && minute === currentMinute
        ? Array.from({ length: currentSecond }, (_, i) => i)
        : []
    }
  }
  // 非今日的日期不限制时间
  return {}
}
</script>

关键说明： #

• disabled-date函数接收一个Date对象，返回true时该日期会被禁用
• disabled-time函数接收当前选中的Date对象，返回的对象中，disabledHours/disabledMinutes/disabledSeconds是返回禁用值数组的函数，仅当选中日期为今日时才生效
• 如果不需要精确到时分秒，仅使用disabled-date即可满足需求

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