为什么禁用日期这么难？ - Ant Design

在 antd 中，DatePicker 的 issue 非常多。一来是由于日期选择需求的常见性，另一来是针对业务的需求会有各种各样的禁用选择组合。今天，我们就来聊聊 disabledDate 这个 API。

disabledDate 不能控制时间

如其名，disabledDate 用于对日期进行禁用。所以当使用 DateTimePicker 时，时间部分并不会被 disabledDate 进行控制。而是需要通过 disabledTime 方法进行控制。这似乎有点反直觉，为什么需要用两个 API 管理呢？

如何确定日期能选？

从直觉上看，一个日期是否禁用我们只需要将当前日期执行一次 disabledDate 即可知道。但是，如果当我们把面板切换成月份面板的时候，我们怎么知道当前月份是否可选呢？我们必须要对该月下的每个日期进行一次 disabledDate 才能确定该月下有可选日期，因此该月才能选择。

从目前看，这个逻辑似乎没问题。一个月 30 来天，月份面板 12 个月，最坏情况下，我们也只需要遍历 365 次就能知道 12 个月份是不可选的。但是以此类推，当面板切换为年、十年时。我们需要遍历的次数就会呈指数级增长，导致严重的性能问题（#39991）。

所以在 DatePicker 重构后，disabledDate 提供了额外的参数 info.type，告知提供的 date 对象来自于哪个 Panel。这样开发者就可以根据 Panel 来提供 disabled 信息，从而避免恐怖的调用循环。

但是作为兜底，DatePicker 会对当前 Panel 单元的第一天和最后一天进行 disabledDate 的调用。这样可以确保在常见的范围禁用场景下，仍能满足需求。

disabledTime

回到时间禁用，这是相同的问题。如果我们通过 disabledDate 进行时间维度的禁用，那么在 DateTimePicker 下该天是否可选，我们就需要对该天的每一秒进行 disabledDate 校验。在最坏情况下，一天是否可选就需要校验 86400 次。Date Panel 就需要执行 ~200 万次。显然这是不可接受的。

所以对于时间维度，我们提供了 disabledTime 方法。这个方法相比 disabledDate 会要求提供更细细粒度的时间禁用信息：

type DisabledTime = (now: Dayjs) => {
  disabledHours?: () => number[];
  disabledMinutes?: (selectedHour: number) => number[];
  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
  disabledMilliseconds?: (
    selectedHour: number,
    selectedMinute: number,
    selectedSecond: number,
  ) => number[];
};

（时间选择面板的每个单位都相当于日期面板的 Panel，后者通过前者单位的信息来推出当前禁用单位）

一些例子

在了解了上下文后，我们会发现 disabledDate 和 disabledTime 虽然设计是合理的，但是却有些偏底层。在业务中进行使用会比较麻烦，我们来看几个例子（当然，在业务中你需要考虑通过 HOC 来进行封装）：

工作时间

暂时不考虑节假日的情况，我们选择工作日的 9:00 ~ 17:00 为可选时间：

const disabledDate = (date, info) => {
  if (info.type === 'date') {
    return date.day() === 0 || date.day() === 6;
  }
  return false;
};

const disabledTime = () => ({
  disabledHours: () => {
    return Array.from({ length: 24 }, (_, i) => i).filter((hour) => hour < 9 || hour > 17);
  },
});

时间日期范围

在 DatePicker 中有 minDate 和 maxDate 用于限制日期的选择范围，但是如果它们仅限于日期的限制。现在，假设我们有种场景需要带有时间的日期范围选择，比如 2024-01-01 09:00:00 ~ 2024-01-02 17:00:00，那么我们可以这样做：

const disabledDate = (date, info) => {
  if (info.type === 'date') {
    return date.isBefore('2024-01-01', 'day') || date.isAfter('2024-01-02', 'day');
  }
  return !date.isSame('2024-01-01', info.type);
};

const disabledTime = (date) => {
  if (date.isSame('2024-01-01', 'day')) {
    return {
      disabledHours: () => Array.from({ length: 24 }, (_, i) => i).filter((hour) => hour < 9),
    };
  }

  if (date.isSame('2024-01-02', 'day')) {
    return {
      disabledHours: () => Array.from({ length: 24 }, (_, i) => i).filter((hour) => hour > 17),
    };
  }

  // 只需要考虑开始和结束时间，范围外的本身已经被 `disabledDate` 禁用了
  return {};
};

总结

通过 disabledDate 和 disabledTime，我们可以对日期和时间进行更细粒度的控制，以实现不同的业务需求。通过以上示例，相信你已经对这两个 API 有了更深入的了解。在实际业务中，你可以根据具体需求，结合这两个 API 来实现更多的功能。