如何禁止antd中RangePicker组件选择相同的起止日期？

不需要等官方提供专门API，直接利用组件自带的日期禁用能力就能实现，全组件库通用逻辑如下：

• 核心规则：用户选中开始日期后，结束日期面板中所有早于「开始日期+1天」的日期全部置灰禁用；如果用户先选结束日期，开始日期面板中所有晚于「结束日期-1天」的日期全部置灰禁用，从交互上直接卡死同一天的选择可能。
• 实现关键：不要直接绑定最终选中的range值做判断，要绑定日历面板实时选择的临时值，否则用户在面板上点选第一个日期时不会触发最终值更新，禁用规则会不生效。

以Ant Design生态的RangePicker为例，可直接复用以下代码：

import { DatePicker } from 'antd';
import dayjs from 'dayjs';
import { useState } from 'react';

const { RangePicker } = DatePicker;

export default function CustomRangePicker() {
  const [tempSelected, setTempSelected] = useState([]);

  const disabledDate = (current, { type }) => {
    // 选中开始日期后，结束日期必须是开始日期的次日及以后
    if (type === 'end' && tempSelected[0]) {
      return current.isBefore(dayjs(tempSelected[0]).add(1, 'day'), 'day');
    }
    // 先选结束日期的反向场景，开始日期必须是结束日期的前一日及以前
    if (type === 'start' && tempSelected[1]) {
      return current.isAfter(dayjs(tempSelected[1]).subtract(1, 'day'), 'day');
    }
    return false;
  };

  return (
    <RangePicker
      format="DD/MM/YYYY"
      onCalendarChange={(val) => setTempSelected(val)}
      disabledDate={disabledDate}
      onChange={() => setTempSelected([])}
    />
  );
}

注意事项 #

• 按上述逻辑配置后，选中30/06/2022作为开始日期时，30/06/2022及更早的日期会全部禁用，仅01/07/2022及之后的日期可选，完全匹配你要的交互效果。
• 选值完成、面板关闭时必须清空临时存储的选中值，避免下次打开面板时沿用上一次的选择规则导致禁用逻辑异常。
• 如果使用Element、Naive UI等其他组件库，逻辑完全一致，只需要替换对应组件的disabledDate（部分Vue生态库写为disabled-date）、日历变化事件回调名即可，无需修改组件源码。

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