如何将带有单个输入的日期范围添加到 react-datepicker

Question

我想创建一个日期范围组件，它将开始日期和结束日期都放入单个输入中。我尝试在这里使用示例https://reactdatepicker.com/#example-date-range-for-one-datepicker，但它似乎没有显示结束日期。我已经设置了一个自定义输入来显示这两个值，但我不知道如何在我的 datePicker 中使用单个 onChange 道具更新它们。我相信这会导致组件失败并出现 RangeError: invalid time value。

const CustomDatePicker = (props) => {
  const {
    className,
    startDateId,
    endDateId,
    startLabel,
    endLabel,
    displayFormat,
    onStartDateChange,
    onEndDateChange,
    locale,
    startDate,
    endDate,
  } = props

const CustomInput = ({ value, onClick}) => {
    return 
     
        <input
          className="my-input"
          type="text"
          onClick={onClick}
          value={`${startDate} - ${endDate}`}
        />
      </div>
   
    )

return <DatePicker
            id={startDateId}
            selected={startDate}
            selectsRange
            startDate={startDate}
            endDate={endDate}
            placeholderText={placeholder}
            dateFormat={displayFormat}
            onChange={onStartDateChange}
            locale={selectLocale(locale)}
            customInput={<CustomInput />}
          />
}

Answer 1

如果您关注您链接到的网站，您可以看到，当输入更改时，它会同时更改 startDate 和 endDate。 这样您就可以使它们都保持更新。 所以这看起来像：

JSX：

          <DatePicker
            id={startDateId}
            selected={startDate}
            selectsRange
            startDate={startDate}
            endDate={endDate}
            placeholderText={placeholder}
            dateFormat={displayFormat}
            onChange={onChange}
            locale={selectLocale(locale)}
            customInput={<CustomInput />}
          />
         
         <input value={`${startDate} - ${endDate}`} />

功能：

const onChange = dates => {
    const [start, end] = dates;
    setStartDate(start);
    setEndDate(end);
}