Is it possible to use react-datepicker with react hooks forms?

Question

Is it possible to use react-datepicker with react hooks forms? I tried following sample:

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

But with no luck.

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

score 47 · Accepted Answer · answered Jun 16 '21 at 01:41

47

With react-hooks-form v7

import dependencies:

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

add control to the useForm() hook:

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

Add the Controller and DatePicker component:

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

answered Jun 16 '21 at 01:41

user3785328

674
7
6

1

You could even write `onChange={onChange}` ^^ – Moebius Feb 02 '22 at 15:22
Thanks! That has saved me a lot of time! – Stefan Rows Mar 21 '23 at 18:00
if you have issue showing the calendar you can add: import "react-datepicker/dist/react-datepicker.css"; – Nandoviski Jun 30 '23 at 11:36

score 46 · Answer 2 · edited Nov 25 '20 at 23:38

46

Please take a look at the Controller doc: https://react-hook-form.com/api/#Controller

which we are maintaining a codesandbox example for hosting most the external components UI libs' implementations: 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"
/>

EDIT

with the latest version of react-hook-form this is the Controller implementation using render:

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

edited Nov 25 '20 at 23:38

Jesus Gomez

1,460
13
30

answered Mar 26 '20 at 21:54

Bill

17,872
19
83
131

1

@AstritSpanca: note that this approach won't work for Material UI Pickers. You need to use a [controlled component](https://github.com/react-hook-form/react-hook-form/issues/438#issuecomment-633486291). – Dan Dascalescu May 25 '20 at 09:50
How do we implement date field with multiple form inputs. – Vikas Ukani Jun 25 '21 at 19:20
How can I implement "yup" required validation with the Controller(DatePicker)? I need to display the required field message when no date is selected. – Mehul Mali Dec 10 '21 at 10:40
1

@Bill can we do that using `register` – Zeeshan Ahmad Khalil Oct 04 '22 at 10:55
if you have issue showing the calendar you can add: import "react-datepicker/dist/react-datepicker.css"; – Nandoviski Jun 30 '23 at 11:36

score -1 · Answer 3 · answered May 16 '23 at 12:01

I work with react-hook-form 7.43.9 and @mui/x-date-pickers 6.3.1. I've created custom DateInput component for my forms.

import * as React from "react";

import {
    useController,
    useFormContext
} from "react-hook-form";

import { DatePicker } from "@mui/x-date-pickers";

interface IProps {
    label: string;
    name: string;
}

export const DateInput = ({ label, name }: IProps) => {
    const { control } = useFormContext();
    const { field } = useController({ control, name, defaultValue: null });
            
    return <DatePicker
        label={label}
        maxDate={new Date()}
        value={field.value}
        onChange={field.onChange}
        slotProps={{
            textField: {
                ...{ readOnly: true }
            }
        }}
    />;
};

Is it possible to use react-datepicker with react hooks forms?

3 Answers3

Linked