如何配置react-datetime-picker：禁选过去日期且结束时间不早于开始时间

1. 禁止选择过去的日期 #

给开始时间选择器添加minDate属性，将其值设置为当前时间（时区处理和默认值保持一致），就能阻止用户选择当前时间之前的日期。

2. 结束时间不能早于已选的开始时间 #

通过React Hook Form的watch方法监听start_time的实时值，把这个值作为结束时间选择器的minDate，确保结束时间始终晚于或等于开始时间。

修改后的完整代码 #

import { watch } from 'react-hook-form';

// ... 其他业务代码

// 监听start_time的实时选中值
const startTimeValue = watch('start_time');

<Controller
    control={control}
    name='start_time'
    defaultValue={new Date(now.toLocaleString('en-US', { timeZone: timezone }))}
    render={({ field: { onChange, value } }) => (
        <DateTimePicker
            onChange={onChange}
            value={value ? new Date(value) : null}
            format="dd-MM-y h:mm a"
            // 限制最小可选时间为当前时间，禁止选过去的日期
            minDate={new Date(now.toLocaleString('en-US', { timeZone: timezone }))}
        />
    )}
/>

<Controller
    control={control}
    name='end_time'
    defaultValue={new Date(now.toLocaleString('en-US', { timeZone: timezone }))}
    render={({ field: { onChange, value } }) => (
        <DateTimePicker
            onChange={onChange}
            value={value ? new Date(value) : null}
            format="dd-MM-y h:mm a"
            // 限制最小可选时间为已选的开始时间，禁止选早于开始时间的结束时间
            minDate={startTimeValue ? new Date(startTimeValue) : new Date(now.toLocaleString('en-US', { timeZone: timezone }))}
        />
    )}
/>

关键说明 #

• minDate是多数DateTimePicker组件（如MUI X、react-datetime-picker等）支持的属性，用于限制可选时间的最小值。
• watch方法能实时获取start_time的选中值，让结束时间的限制条件随开始时间动态更新。
• 时区处理和默认值保持一致，避免出现时间偏移问题。

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