如何关闭AntD RangePicker内置的日期禁用逻辑？

Ant Design的RangePicker组件默认自带联动禁用逻辑——选完开始日期后，早于该日期的结束日期会被锁定，直接设置disabledDate={() => false}确实没法覆盖这个内置规则，因为组件会优先执行内部的联动判断。

要关掉这个默认逻辑，你可以试试以下两种方案：

方案一：拆成独立DatePicker组件（适配Ant Design 4.x+） #

把RangePicker拆成两个单独的DatePicker，手动控制日期选择，彻底绕开组件内部的联动逻辑：

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

const CustomRangePicker = () => {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);

  return (
    <div style={{ display: 'flex', gap: 16 }}>
      <DatePicker
        value={startDate}
        onChange={(date) => setStartDate(date)}
        disabledDate={() => false}
      />
      <DatePicker
        value={endDate}
        onChange={(date) => setEndDate(date)}
        disabledDate={() => false}
      />
    </div>
  );
};

方案二：用onCalendarChange强制重置禁用状态（保留RangePicker外观） #

借助onCalendarChange事件，在用户选完日期后强制清空组件的内置禁用限制，不过这个方法可能受版本兼容性影响：

import { RangePicker } from 'antd';
import { useState } from 'react';

const App = () => {
  const [dates, setDates] = useState([]);

  return (
    <RangePicker
      value={dates}
      onChange={(value) => setDates(value)}
      onCalendarChange={(value) => {
        // 强制取消日期范围限制
        setDates(value);
      }}
      disabledDate={() => false}
    />
  );
};

如果用的是Ant Design 3.x版本，API会有差异，但核心思路都是绕过或覆盖组件内部的联动判断逻辑。

内容的提问来源于stack exchange，提问作者Дмитрий Киселев