是否可以将 react-datepicker 与反应钩子形式一起使用？

Posted 2023-02-19

【中文标题】是否可以将 react-datepicker 与反应钩子形式一起使用？

【英文标题】：Is it possible to use react-datepicker with react hooks forms?

【发布时间】：2020-07-06 22:18:39

【问题描述】：

是否可以将 react-datepicker 与 react hooks 表单一起使用？我尝试了以下示例：

https://codesandbox.io/s/awesome-shape-j0747?fontsize=14&hidenavigation=1&theme=dark

但没有运气。

import React,  useState  from "react";
import "./styles.css";
import  useForm  from "react-hook-form";
import  Row, Col, Form, FormGroup, Label, Input, Button  from "reactstrap";
import DatePicker from "react-datepicker";

export default function App() 
  const  register, handleSubmit  = useForm();
  const [startDate, setStartDate] = useState();
  const [result, setResult] = useState();

  const onSearch = event => 
    setResult(event);
  ;

  return (
    <div className="App">
      <Form onSubmit=handleSubmit(onSearch)>
        <Row>
          <Col>
            <FormGroup>
              <Input
                type="number"
                name="account"
                id="account"
                placeholder="AccountId"
                innerRef=register( required: true, maxLength: 20 )
              />
            </FormGroup>
          </Col>
        </Row>

        <Row>
          <Col>
            <DatePicker
              innerRef=register
              name="datetime"
              className="form-control"
              selected=startDate
              onChange=date => setStartDate(date)
              showTimeSelect
              timeFormat="HH:mm"
              timeIntervals=15
              timeCaption="time"
              dateFormat="MM-dd-yyyy h:mm"
            />
          </Col>
        </Row>

        <Button>Submit</Button>
      </Form>
      <div>JSON.stringify(result)</div>
    </div>
  );

【参考方案1】：

请查看控制器文档：https://react-hook-form.com/api/#Controller

我们正在维护一个代码框示例，用于托管大多数外部组件 UI 库的实现：https://codesandbox.io/s/react-hook-form-controller-079xx

<Controller
  as=ReactDatePicker
  control=control
  valueName="selected" // DateSelect value's name is selected
  onChange=([selected]) => selected
  name="ReactDatepicker"
  className="input"
  placeholderText="Select date"
/>

编辑

使用最新版本的 react-hook-form 这是使用渲染的控制器实现：

            <Controller
                name=name
                control=control
                render=( onChange, value ) => (
                    <DatePicker
                        selected=value
                        onChange=onChange
                    />
                )
            />

【讨论】：

@AstritSpanca：请注意，这种方法不适用于 Material UI Pickers。您需要使用controlled component。

我们如何实现具有多个表单输入的日期字段。

如何使用 Controller(DatePicker) 实现“yup”所需的验证？未选择日期时，我需要显示必填字段消息。

【参考方案2】：

使用 react-hooks-form v7

导入依赖：

import  Controller, useForm  from 'react-hook-form'
import DatePicker from 'react-datepicker'

将控件添加到 useForm() 挂钩：

const  control, register, handleSubmit, ...  = useForm()

添加Controller和DatePicker组件：

 <Controller
    control=control
    name='date-input'
    render=( field ) => (
      <DatePicker
        placeholderText='Select date'
        onChange=(date) => field.onChange(date)
        selected=field.value
      />
   )
  />

【参考方案3】：

使用 react Material-UI

首先请注意您已使用 LocalizationProvider 包装了您的 App 组件。就我而言，它是时刻库。 https://mui.com/components/date-picker/

这里是可重用的 DatePickerAsController 组件:)

import React from 'react';
import  Controller  from 'react-hook-form';
import  TextField, TextFieldProps  from '@mui/material';
import clsx from 'clsx';
import  DatePicker  from '@mui/lab';
import  Moment  from 'moment';
    
export interface DatePickerAsControllerProps 
  control: any;
  name: string;
  value: Moment;
  rules?: any;
  classes?: string[];
  label: string;
  onChange: (date: Moment) => void;


export function DatePickerAsController(props: DatePickerAsControllerProps) 
  const  control, name, rules, classes, label, onChange, value  =
    props;

  const handleChange = (date: Moment, field: any) => 
    console.log(date);
    field.onChange(date);
    onChange(date);
  ;

  return (
    <Controller
      control=control
      name=name
      rules=rules
      render=( field ) => (
        <DatePicker
          label=label
          value=value
          onChange=(date: Moment) => handleChange(date, field)
          renderInput=(params: TextFieldProps) => (
            <TextField className=clsx(classes) ...params />
          )
        />
      )
    />
  );