如何在react-datepicker中实现单输入框日期范围选择并解决相关报错？

实际开发中遇到的异常现象：

• 参考官方单输入框范围选择示例开发组件时，结束日期无法正常回显
• 已经编写了可同时展示两个日期值的自定义输入框，但不清楚如何通过DatePicker的单个onChange回调同步更新起止两个日期状态
• 状态同步逻辑缺失直接引发RangeError: 无效时间值的运行时报错

可正常运行的修正实现 #

import DatePicker, { formatDate } from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import React from "react";

const CustomDatePicker = (props) => {
  const {
    className,
    startDateId,
    endDateId,
    displayFormat = "yyyy-MM-dd",
    onStartDateChange,
    onEndDateChange,
    locale,
    startDate,
    endDate,
    placeholder,
  } = props;

  // 用useMemo缓存自定义输入框引用，避免重复生成新组件实例
  const CustomInput = React.useMemo(() => {
    return ({ onClick }) => {
      // 处理空值与格式化，避免拼接无效日期
      const formatDateValue = (date) => {
        if (!date) return "";
        return formatDate(date, displayFormat);
      };
      const displayText = `${formatDateValue(startDate)} - ${formatDateValue(endDate)}`.trim();
      
      return (
        <input
          className={`my-input ${className || ""}`}
          type="text"
          onClick={onClick}
          value={displayText}
          placeholder={placeholder}
          readOnly
        />
      );
    };
  }, [startDate, endDate, displayFormat, className, placeholder]);

  return (
    <DatePicker
      id={startDateId}
      selected={startDate}
      selectsRange
      startDate={startDate}
      endDate={endDate}
      placeholderText={placeholder}
      dateFormat={displayFormat}
      onChange={(dateArray) => {
        // 适配范围选择模式下的回调返回值
        const [updatedStart, updatedEnd] = dateArray;
        // 调用原有props的两个回调，同步更新起止日期状态
        onStartDateChange?.(updatedStart);
        onEndDateChange?.(updatedEnd);
      }}
      locale={selectLocale(locale)}
      customInput={<CustomInput />}
    />
  );
};

问题根因与修复说明 #

• 范围选择模式的回调适配：开启selectsRange后，DatePicker的onChange返回值是包含起止两个日期的数组，而非单个日期对象。原代码直接将onChange绑定到单独的开始日期更新方法，会导致结束日期永远无法被赋值，出现展示异常。
• 无效时间报错的触发原因：原代码在自定义输入框中直接拼接原始Date对象，没有对空值、无效日期做格式化处理，当初始状态下startDate/endDate为null/undefined时，拼接出来的字符串会包含“Invalid Date”，最终触发RangeError: 无效时间值错误。
• 未定义变量问题：原代码中使用的placeholder没有从props中解构，会在严格模式下触发未定义变量报错。
• 自定义输入框的引用稳定性：直接在组件内部声明CustomInput组件，每次父组件渲染都会生成新的组件引用，会导致DatePicker内部的点击、聚焦交互异常，用useMemo缓存组件引用可以解决该问题。

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