Element UI 2.15.7 Datetime Picker如何禁用当前时间之前的时分？

Element UI的disabledDate确实只能控制整日期的禁用，但可以通过picker-options里的disabledHours、disabledMinutes、disabledSeconds三个函数实现当日已过时、分、秒的禁用逻辑，以下是完整实现方案：

完整代码示例 #

<template>
  <el-date-picker
    v-model="selectedTime"
    type="datetime"
    placeholder="选择日期时间"
    :picker-options="pickerOptions"
    value-format="yyyy-MM-dd HH:mm:ss"
  ></el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      selectedTime: '',
      pickerOptions: {
        // 禁用昨天及更早的日期
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        },
        // 动态禁用已过小时
        disabledHours() {
          const now = new Date();
          const selectedDate = this.selectedTime ? new Date(this.selectedTime) : null;
          
          if (selectedDate && this.isSameDay(selectedDate, now)) {
            const disabledHours = [];
            for (let i = 0; i < now.getHours(); i++) {
              disabledHours.push(i);
            }
            return disabledHours;
          }
          return [];
        },
        // 动态禁用已过分钟
        disabledMinutes(hour) {
          const now = new Date();
          const selectedDate = this.selectedTime ? new Date(this.selectedTime) : null;
          
          if (selectedDate && this.isSameDay(selectedDate, now) && hour === now.getHours()) {
            const disabledMinutes = [];
            for (let i = 0; i < now.getMinutes(); i++) {
              disabledMinutes.push(i);
            }
            return disabledMinutes;
          }
          return [];
        },
        // 可选：禁用已过秒数
        disabledSeconds(hour, minute) {
          const now = new Date();
          const selectedDate = this.selectedTime ? new Date(this.selectedTime) : null;
          
          if (selectedDate && this.isSameDay(selectedDate, now) && hour === now.getHours() && minute === now.getMinutes()) {
            const disabledSeconds = [];
            for (let i = 0; i < now.getSeconds(); i++) {
              disabledSeconds.push(i);
            }
            return disabledSeconds;
          }
          return [];
        }
      }
    };
  },
  methods: {
    // 判断两个日期是否为同一天
    isSameDay(date1, date2) {
      return date1.getFullYear() === date2.getFullYear() &&
             date1.getMonth() === date2.getMonth() &&
             date1.getDate() === date2.getDate();
    }
  }
};
</script>

逻辑说明 #

• disabledDate：仅禁用昨天及更早的日期，保留当天的选择权限，因为我们要在当天内控制时分秒。
• disabledHours：当用户选中的是今天时，返回当前小时之前的所有小时数组，这些小时会被组件禁用。
• disabledMinutes：接收当前选中的hour参数，只有当选中今天且选中小时等于当前系统小时时，才返回当前分钟之前的分钟数组。
• disabledSeconds：可选逻辑，和分钟逻辑一致，用于控制秒数的禁用，根据业务需求决定是否开启。
• isSameDay工具方法：用来精准判断选中日期是否为当天，避免跨天场景下的误禁用。

注意事项 #

• 依赖selectedTime的双向绑定，用户选择日期后，该值会更新，禁用逻辑会自动重新计算。
• 确保客户端系统时间与业务时间一致，避免时区或时间偏差导致的禁用逻辑错误。
• 该方案仅适用于type="datetime"或type="datetimerange"的日期选择器。

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