带有日期选择器范围的 React Hook Form 不选择日期

Question

我得到了以下日期选择器。
对于开始日期：

<Controller
    as={
        <DatePicker
            selected={travelRoute?.dateStart || new Date()}
            selectsStart
            startDate={travelRoute?.dateStart}
            endDate={travelRoute?.dateEnd}
            inline
        />
    }
    control={control}
    rules={{ required: true }}
    valueName="selected"
    onChange={date => handleStartDateOnChange(date)}
    name="dateStart"
    placeholderText="Select date"
    defaultValue={null}
/>

结束日期：

<Controller
   as={
    <DatePicker
        name="dateEnd"
        selected={travelRoute?.dateEnd || new Date()}
        onChange={date => handleEndDateOnChange(date)}
        selectsEnd
        startDate={travelRoute?.dateStart}
        endDate={travelRoute?.dateEnd}
        minDate={travelRoute?.dateStart}
        inline
    />
   }
   control={control}
   rules={{ required: true }}
   valueName="selected"
   onChange={date => handleEndDateOnChange(date)}
   name="dateEnd"
   placeholderText="Select date"
   defaultValue={null}
/>

我是否需要将日期选择器属性添加到日期选择器组件或控制器组件？
开始日期选择器不 select 日期，结束日期选择器不更改开始日期并且不显示范围。

我正在使用 handleOnChange 函数中发生的 setTravelRoute 将数据保存到 travelRoute 状态。

编辑：
添加了 onChange 处理程序：

const handleStartDateOnChange = date => {
    setTravelRoute(prevState => ({
        ...prevState,
        dateStart: date
    }))
};

const handleEndDateOnChange = date => {
    setTravelRoute(prevState => ({
        ...prevState,
        dateEnd: date
    }))
};

Answer 1

再见，您在 DatePicker 中使用错误的方法自定义 onChange 事件。 Controller 上的 onChange 事件也无法正常工作。因为在这种情况下，您不必使用 as= 语法，而是使用 render= 语法，例如：

<Controller
    render={({ onChange }) => (
      <DatePicker
        ...
        onChange={date => handleStartDateOnChange(date)}
      />
    )}
    ...
  />

因此您的代码变为：

开始日期

<Controller
    render={({ onChange }) => (
      <DatePicker
        selected={travelRoute?.dateStart || new Date()}
        selectsStart
        startDate={travelRoute?.dateStart}
        endDate={travelRoute?.dateEnd}
        inline
        onChange={date => handleStartDateOnChange(date)}
      />
    )}
    control={control}
    rules={{ required: true }}
    valueName="selected"
    name="dateStart"
    placeholderText="Select date"
    defaultValue={null}
  />

结束日期

<Controller
    render={({ onChange }) => (
      <DatePicker
        name="dateEnd"
        selected={travelRoute?.dateEnd || new Date()}
        onChange={date => handleEndDateOnChange(date)}
        selectsEnd
        startDate={travelRoute?.dateStart}
        endDate={travelRoute?.dateEnd}
        minDate={travelRoute?.dateStart}
        inline
      />
    )}
    control={control}
    rules={{ required: true }}
    valueName="selected"
    name="dateEnd"
    placeholderText="Select date"
    defaultValue={null}
  />

Here 一个工作示例。

注：不知道codesandbox里的DatePicker为什么这么难看。可能是 Controller 因为在 this 中其他 codesandbox 看起来不错。

带有日期选择器范围的 React Hook Form 不选择日期

React Hook Form with datepicker Range doesn't pick date

reactjs

react-datepicker

react-hook-form