react-datepicker如何限制结束时间不早于开始时间（精确到秒）

react-datepicker 内置的 minDate 属性仅做日期维度的大小校验，不会限制同一日期下的时、分、秒可选范围，要实现精确到秒的结束时间限制，需要组合动态时间阈值、兜底过滤、值联动三处配置：

• 动态判断结束日期与开始日期是否为同一天：为同一天时，通过minTime属性将最早可选时间设置为开始时间的时分秒值；为不同天时，不限制时间选择范围
• 增加filterTime属性做兜底校验，拦截手动输入、组件边界场景下产生的非法时间值
• 增加开始日期变更联动逻辑：如果新选的开始日期时间晚于当前已设置的结束日期时间，自动将结束日期更新为开始日期，避免留存非法值

完整实现代码 #

() => {
  const [startDate, setStartDate] = useState(new Date());
  const [endDate, setEndDate] = useState(new Date());

  // 日期判同工具方法
  const isSameDay = (d1, d2) => {
    return d1.getFullYear() === d2.getFullYear() &&
      d1.getMonth() === d2.getMonth() &&
      d1.getDate() === d2.getDate();
  };

  // 动态计算结束时间选择器的最小时间阈值
  const getEndMinTime = () => {
    if (startDate && endDate && isSameDay(startDate, endDate)) {
      return new Date(startDate.getTime());
    }
    return undefined;
  };

  return (
    <>
      <DatePicker
        selected={startDate}
        onChange={(date) => {
          setStartDate(date);
          // 联动校验：新开始时间晚于当前结束时间时，自动更新结束时间
          if (date && endDate && date.getTime() > endDate.getTime()) {
            setEndDate(date);
          }
        }}
        showTimeSelect
        timeFormat="HH:mm:ss"
        timeIntervals={1}
        isClearable
        timeCaption="Time"
        dateFormat="dd/MM/yyyy    HH:mm:ss"
        selectsStart
        startDate={startDate}
        endDate={endDate}
      />
      
      <DatePicker
        selected={endDate}
        onChange={(date) => setEndDate(date)}
        showTimeSelect
        isClearable
        timeFormat="HH:mm:ss"
        timeIntervals={1}
        timeCaption="time"
        dateFormat="dd/MM/yyyy    HH:mm:ss"
        selectsEnd
        startDate={startDate}
        endDate={endDate}
        minDate={startDate}
        minTime={getEndMinTime()}
        // 秒级精度兜底过滤
        filterTime={(time) => {
          if (!startDate || !isSameDay(time, startDate)) {
            return true;
          }
          return time.getTime() >= startDate.getTime();
        }}
      />
    </>
  );
};

实现效果 #

配置完成后，以开始时间选择11/06/2022 12:20:20为例：

• 早于11/06/2022的日期会被minDate规则拦截，无法选中为结束日期
• 选择11/06/2022作为结束日期时，时间面板中早于12:20:20的时间点全部置灰不可选，手动输入早于该时间的内容也会被过滤拦截
• 选择晚于11/06/2022的日期作为结束日期时，全天所有时间点均可正常选择

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