如何解决Antd Datepicker禁用过去日期时间时的交互异常问题

问题根因 #

你遇到的交互不一致问题，核心是getDisabledTimes方法在入参date为null时（也就是用户未先选日期、优先选择时间的场景）直接返回了空对象，没有对默认关联的今日时段做禁用限制，才会出现先选时间可以选中已过去时段的问题。同时原disabledDate的判断逻辑也存在边界误差，会把当天整体判定为不可选。

修复方案 #

1. 修正disabledDate逻辑 #

调整日期禁用规则，仅禁用今日之前的日期，保留今日的可选权限：

const getDisabledDate = (date: Moment): boolean => {
  // 仅禁用今日零点之前的所有日期
  return date.isBefore(moment().startOf('day'));
};

2. 优化getDisabledTimes逻辑 #

补充日期未选择（date为null）场景的时间禁用规则，和已选今日的逻辑对齐，避免优先选时间时绕过限制：

const getDisabledTimes = (date: null | Moment): DisabledTimes => {
  const current = moment();
  const currentHour = current.hours();
  const currentMinute = current.minutes();
  let isToday = true;

  // 如果已经选了日期，判断选中的日期是不是今天
  if (date !== null) {
    const selectedDateStart = moment(date.format(dateFormat.dateWithoutTime));
    isToday = selectedDateStart.isSame(current.startOf('day'));
  }

  const hoursToDisable: number[] = [];
  if (isToday) {
    for (let i = 0; i < currentHour; i += 1) {
      hoursToDisable.push(i);
    }
  }

  return {
    disabledHours: () => hoursToDisable,
    disabledMinutes: (hour: number) => {
      return isToday ? getDisabledMinutes(hour, currentHour, currentMinute) : []
    },
  };
};

3. 保留原有getDisabledMinutes逻辑即可，无需调整 #

const getDisabledMinutes = (hour: number, currentHour: number, currentMinute: number) => {
  const result: number[] = [];
  if (hour === currentHour) {
    for (let i = 0; i < currentMinute + NEW_TOURNAMENT_START_DELAY_MINUTES; i += 1) {
      result.push(i);
    }
  }
  return result;
};

修改后无论用户先选日期还是先选时间，都会遵循同一套禁用规则，不会出现交互不一致的问题。

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