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

Question

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

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

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

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);
}

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

How can I add a date range with a single input to react-datepicker

javascript

reactjs

react-datepicker