我明白你遇到的问题了：选未来日期的7/8点后再切回今日，组件居然显示今日+过去的7/8点，但你明明已经禁用了今日的过去时间，这确实很闹心。让我来帮你梳理问题根源并给出解决方案。

问题根源分析 #

你的代码里有两个核心问题：

1. 时间禁用逻辑依赖旧的state值：showTime里的disabledHours/disabledMinutes判断用的是this.state.date，但当你切换到今日时，state还没来得及更新，导致禁用逻辑没触发，允许选择过去的7/8点。
2. 未处理选中今日过去时间的场景：当用户直接选择今日的过去时间时，组件没有自动修正为当前时间，导致显示了禁用的时间。

解决方案代码修改 #

下面是调整后的完整代码，我会标注关键修改点：

import React, { Component } from 'react';
import { DatePicker } from 'antd';
import moment from 'moment';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'React',
      date: new Date()
    };
  }

  // 禁用今日之前的日期
  disabledDate(current) {
    return current && current < moment().startOf("day");
  }

  // 处理日期时间选择逻辑：自动修正过去时间
  setDate(d) {
    const now = moment();
    // 判断选中的时间是否在当前时间之前
    const isPastTime = d.isBefore(now);
    // 如果是过去时间（仅限今日），则替换为当前时间；否则保留选中值
    const finalSelectedDate = isPastTime ? now.toDate() : d.toDate();
    this.setState({ date: finalSelectedDate });
  }

  render() {
    return (
      <div>
        <DatePicker
          name="Date"
          disabledDate={this.disabledDate}
          onChange={(d) => this.setDate(d)}
          style={{ width: "100%" }}
          showTime={{
            // 实时判断是否为今日，动态禁用过去小时
            disabledHours: () => {
              const isToday = moment(this.state.date).isSame(moment(), 'day');
              if (!isToday) return [];
              
              const disabledHoursList = [];
              for (let i = 0; i < moment().hour(); i++) {
                disabledHoursList.push(i);
              }
              return disabledHoursList;
            },
            // 实时判断是否为今日+当前小时，动态禁用过去分钟
            disabledMinutes: (selectedHour) => {
              const isToday = moment(this.state.date).isSame(moment(), 'day');
              if (!isToday || selectedHour !== moment().hour()) return [];
              
              const disabledMinutesList = [];
              for (let i = 0; i < moment().minute(); i++) {
                disabledMinutesList.push(i);
              }
              return disabledMinutesList;
            }
          }}
          placeholder="Select Date & Time"
          value={moment(this.state.date)} // 绑定value确保组件显示与state一致
        />
      </div>
    );
  }
}

export default App;

关键修改说明 #

1. 绑定组件value：给DatePicker添加value={moment(this.state.date)}，确保组件显示的时间和state完全同步，避免出现显示与逻辑不一致的情况。
2. 重构时间禁用逻辑：把disabledHours和disabledMinutes改成内联函数，直接基于当前state的date判断是否为今日，实时生成禁用的小时/分钟数组，确保切换日期时禁用逻辑立即生效。
3. 完善setDate函数：新增对选中时间是否为过去的判断，如果是今日的过去时间，自动替换为当前时间，从根源上避免显示禁用时间的情况。
4. 移除冗余代码：删掉了原来没用的getDisabledHours和getDisabledMinutes函数，把逻辑整合到showTime配置里，更直观。

效果验证 #

现在你再测试流程：

• 选未来日期+7点：组件正常显示，时间无禁用。
• 切回今日：组件会自动把时间修正为当前时间（比如现在9点，就显示今日9点），同时时间选择器里的7/8点会被禁用，无法选择。

这样就彻底解决了时间冲突的问题！

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