Блог

Я хочу создать компонент диапазона дат, который будет умещать как начальную, так и конечную даты в один ввод. Я попытался использовать пример здесь https://reactdatepicker.com/#example-date-range-for-one-datepicker но, похоже, он не отображает конечную дату. Я настроил пользовательский ввод для отображения обоих значений, но я не знаю, как обновить их оба с помощью одного параметра onChange в моем DatePicker. Я считаю, что это привело к сбою компонента с ошибкой 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 />}
          />
}
 

Если вы перейдете на веб-сайт, на который вы ссылались, вы увидите, что при изменении ввода он изменяет как начальную, так и конечную дату. Таким образом, вы можете обновлять их оба. Итак, это будет выглядеть так:

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