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;

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;