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

【问题标题】：Is it possible to use react-datepicker with react hooks forms?是否可以将 react-datepicker 与反应钩子形式一起使用？
【发布时间】：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>
  );
}

【问题讨论】：

标签： reactjs react-datepicker react-hook-form

【解决方案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} />
          )}
        />
      )}
    />
  );
}

【讨论】：