How to use react-hook-form with my customized react-date-picker?

Question

I am trying to use react-hook-form with my customized date-picker, but I only see this example (Is it possible to use react-datepicker with react hooks forms?), which is using the default react-date-picker.

However, it just only works on the original react-date-picker. I tried the same way with my customized date-picker, and it doesn't work...

This is my customized date-picker:

import React, { useState } from 'react';
import ReactDatePicker from 'react-datepicker';
import tw from "date-fns/locale/zh-TW";

import "react-datepicker/dist/react-datepicker.css";

const DatePicker = props => {
    const [date, setDate] = useState('');
    return (
        <ReactDatePicker
            className="form-control"
            selected={date}
            onChange={date => setDate(date)}
            locale={tw}
            dateFormat="yyyy/MM/dd"
            dateFormatCalendar="yyyy年 MM月"
            isClearable
        />
    )
};

export default DatePicker;

Here is how I use react-hook-form with my customized date-picker:

import React from 'react';
import { useForm, Controller } from 'react-hook-form';
import DatePicker from '../../components/UI/Form/DatePicker';

const Form = props => {
    const { register, handleSubmit, control} = useForm();

    const onSubmit = (data) => {
        console.log(data);
    }
    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <label>First Name:</label>
            <input type="text" name='firstName' ref={register} />

            <label>Last Name:</label>
            <input type='text' name='lastName' ref={register} />

            <label>birthday:</label>
            <Controller as={DatePicker} control={control} valueName="selected" name="birthday" />

            <input type="submit" value="Submit" />
        </form>
    );
}

export default Form;

After I submit the form, the 'birthday' value is undefined. Do I still need to add any props to my customized date-picker?

{ birthday: undefined, firstName: "Mike", lastName: "Smith" }

Agney Agney · Accepted Answer · 2020-05-05T04:07:42

The customised form control currently does not offer any props to control it from outside the component. For someone actually using the component, it has to have both selected and onChange fields to extract value out of it (The react-date-picker has these props and hence works)

Controller by default has an onChange which reads from an event passed to it, which is why you see it omitted from examples like this:

<Controller as={TextField} name="TextField" control={control} defaultValue="" />

To change your custom component to work with Controlller syntax, you can expose the selected and onChange accordingly:

const DatePicker = ({ selected, onChange }) => {
    return (
        <ReactDatePicker
            className="form-control"
            selected={selected}
            onChange={onChange}
            locale={tw}
            dateFormat="yyyy/MM/dd"
            dateFormatCalendar="yyyy年 MM月"
            isClearable
        />
    )
};

and on the Controller:

<Controller 
  as={DatePicker} 
  control={control} 
  valueName="selected"
  name="birthday"
  onChange={(date) => date};
/>

How to use react-hook-form with my customized react-date-picker?

2 Answers