如何将react-hook-form与react-datepicker选择范围一起使用？

发布于 2025-01-14 19:05:16 字数 672 浏览 5 评论 0原文

我想用 react-datepicker 选择一个时间范围，并且还使用 react-hook-form 在没有 input 的情况下验证 onBlur ，这是我的代码：

<Controller
    control={control}
    name='time'
    rules={{ required: true }}
    render={({
        field: { value, onChange, onBlur }
    }) => (
        <Datepicker
            dateFormat='yyyy/MM/dd h:mm aa'
            onChange={onChange}
            onBlur={onBlur}
            selected={value}
            showTimeSelect
        />
    )}
/>

我可以在一个选择器中选择一个日期和时间并立即进行验证，它有效，但如果我想在一个选择器中选择两个日期和时间，我该怎么办？如何让 react-hook-form 识别选择器中的开始或结束时间？是否可以？

原文

I want to select a time range with react-datepicker,
and also use react-hook-form to validate when onBlur without input,
here is my code:

<Controller
    control={control}
    name='time'
    rules={{ required: true }}
    render={({
        field: { value, onChange, onBlur }
    }) => (
        <Datepicker
            dateFormat='yyyy/MM/dd h:mm aa'
            onChange={onChange}
            onBlur={onBlur}
            selected={value}
            showTimeSelect
        />
    )}
/>

I can choose one date and time in one picker and do validation right now,
it works, but if I want to choose two date and time in one picker, what should I do?
How do I make react-hook-form identify the start or end time in picker?
is it possible?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

雨落星ぅ辰 2025-01-21 19:05:16

上周我遇到了完全相同的问题，这是解决方案...

您只需将（至少）值传递给“控制器函数”，您仅使用字段对象即可实现这一点。

无论如何，当 DatePicker 组件 用于日期范围时，它将需要一个两位向量数据类型，其中开始日期和结束日期存储为字符串。但是，如果您尝试通过来自 reack-hook-form 的 onChange 函数 来操纵和控制这个组件，它就会搞砸整个事情，因为它是为一对一的数据流而设计的。然后，这些过程是单独完成的，但矢量仍然发送到控制器。这是代码！

              const [dateRange, setDateRange] = useState([null, null]);
              const [startDate, endDate] = dateRange;
              <Controller
                //is a prop that we get back from the useForm Hook and pass into the input.
                control={control}
                //is how React Hook Form tracks the value of an input internally.
                name={name}
                //render is the most important prop; we pass a render function here.
                render={({
                  //The function has three keys: field , fieldState, and formState.
                  field, // The field object exports two things (among others): value and onChange
                }) => (
                  <>
                    <DatePicker
                      selectsRange={true}
                      startDate={startDate}
                      endDate={endDate}
                      onChange={(e) => {
                        setDateRange(e);
                        field.onChange(e);
                      }}
                      isClearable={true}
                      className="form-control"
                    />
                  </>
                )}
                rules={{
                  required: `The  ${label} field is required`,
                }}
              />

I've got the exact same issue last week, here is the solution...

You just need to pass (at least) the value to the "Controller function", you achieve that using only the field object.

In any case, When the DatePicker component is used for a date range, it will require a two-position vector data type, where the start and end dates are stored as a string. But if you try to manipulate and control this component via the onChange function that comes from the reack-hook-form it's gonna screw up the entire thing, because is made for a one-to-one data flux. Then the processes are done separately but the vector is still sent to the controller. Here is the code!

              const [dateRange, setDateRange] = useState([null, null]);
              const [startDate, endDate] = dateRange;
              <Controller
                //is a prop that we get back from the useForm Hook and pass into the input.
                control={control}
                //is how React Hook Form tracks the value of an input internally.
                name={name}
                //render is the most important prop; we pass a render function here.
                render={({
                  //The function has three keys: field , fieldState, and formState.
                  field, // The field object exports two things (among others): value and onChange
                }) => (
                  <>
                    <DatePicker
                      selectsRange={true}
                      startDate={startDate}
                      endDate={endDate}
                      onChange={(e) => {
                        setDateRange(e);
                        field.onChange(e);
                      }}
                      isClearable={true}
                      className="form-control"
                    />
                  </>
                )}
                rules={{
                  required: `The  ${label} field is required`,
                }}
              />

回复收藏 0 原文

~没有更多了~