Sunday, May 19, 2024
 Popular · Latest · Hot · Upcoming
135
rated 0 times [  140] [ 5]  / answers: 1 / hits: 11730  / 4 Years ago, tue, may 5, 2020, 12:00:00

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
}


More From » reactjs

 Answers
4

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

[#3919] Saturday, May 2, 2020, 4 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
hailie

Total Points: 25
Total Questions: 112
Total Answers: 111

Location: Belize
Member since Tue, Dec 8, 2020
4 Years ago
hailie questions
;