리액트 훅 형태로 리액트 날짜 피커를 사용할 수 있습니까?

리액트 훅 형태로 리액트 날짜 피커를 사용할 수 있습니까?

리액트 훅 형태로 리액트 날짜 피커를 사용할 수 있습니까?다음 샘플을 시험해 보았습니다.

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

컨트롤러 문서(https://react-hook-form.com/api/ #Controller)를 참조하십시오.

대부분의 외부 컴포넌트 UI libs 구현을 호스트하기 위한 코드 앤 박스 예를 유지하고 있습니다.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}
                    />
                )}
            />

리액트 훅 형식의 v7 사용

Import 의존관계:

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

useForm() 후크에 컨트롤을 추가합니다.

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

컨트롤러와 DatePicker 컴포넌트를 추가합니다.

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

언급URL : https://stackoverflow.com/questions/60864610/is-it-possible-to-use-react-datepicker-with-react-hooks-forms