DatePicker组件minDate最小日期配置参数不生效问题

minDate在当前场景下失效是两个必然问题：

1. 结束时间选择器配置了showTimeSelectOnly属性，该模式下组件仅渲染时间选择面板，内置校验逻辑默认不会做跨日期的minDate匹配，只会校验当前选中日期下的时间范围，因此用户可以自由选择任意过往日期的时间点。
2. 初始状态下inDate值为null，结束时间选择器首次渲染时拿到的minDate是空值，相当于无最小日期限制；部分版本的DatePicker在props更新后不会自动刷新可选时间的禁用状态，也会导致限制不生效。

不要完全依赖组件内置的minDate校验，按以下逻辑补全兜底：

• 未选择开始时间时，直接禁用结束时间选择器，避免空值导致的限制失效
• 自定义结束时间的filterTime逻辑，同时校验日期和时间维度，拦截早于开始时间的选项
• 选中开始时间后自动清空原有无效的结束时间值，避免残留脏数据
• 同一天场景下补充minTime配置，直接屏蔽早于开始时间的时间点

调整后的代码如下：

状态与处理逻辑 #

const [inDate, setInDate] = useState(null);
const [outDate, setOutDate] = useState(null);   

const handleInDate = (date) => {
    setInDate(date);
    // 切换开始时间后清空原有结束时间，避免保留不符合规则的旧值
    setOutDate(null);
};

const handleOutDate = (date) => {
    setOutDate(date);
};

// 结束时间自定义过滤逻辑
const filterOutTime = (timeOption) => {
    if (!inDate) return true;
    const current = new Date(timeOption);
    const compareInDate = new Date(inDate);
    // 时间对应日期早于开始日期直接禁用
    if (current.setHours(0,0,0,0) < compareInDate.setHours(0,0,0,0)) {
        return false;
    }
    // 同一天的场景，禁用早于开始时间的选项
    return current.getTime() >= inDate.getTime();
};

组件配置 #

<div>
    Start Date & Time<br />
    <DatePicker
        minDate={new Date()}
        placeholderText='Start time'
        showTimeSelect
        selected={inDate}
        timeIntervals={15}
        filterTime={filterPassedTime}
        dateFormat="yyyy-MM-dd hh:mm"
        onChange={handleInDate}
    />
</div>
<div>
    End time<br />
    <DatePicker
        minDate={inDate || new Date()}
        disabled={!inDate}
        placeholderText='End time'
        showTimeSelect
        showTimeSelectOnly
        selected={outDate}
        timeIntervals={15}
        filterTime={filterOutTime}
        minTime={inDate ? new Date(inDate.setSeconds(0, 0)) : undefined}
        dateFormat="yyyy-MM-dd hh:mm"
        onChange={handleOutDate}
    />
</div>

如果传入固定日期对象（比如minDate={new Date(2025, 1, 1)}）仍然失效，先检查本地安装的react-datepicker版本，2.x及更早的老版本在showTimeSelectOnly模式下存在minDate不生效的已知bug，升级到4.x以上稳定版本即可解决内置校验问题，但生产环境仍建议保留自定义filterTime做兜底，覆盖边界场景。

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