Search code examples
reactjsdatepickernext.jsreact-datepickerreact-hook-form

Cannot display date with react-datepicker with react-hooks-forms on screen

I am making a form in next.js where I would be storing date along with other fields.

I'm using react-form-hooks and react-datepicker

Problem: when I click submit, I can see the date entry in console.log but cannot see the selected date in date input. pls refer screenshot for detail screenshot

I follow the example given in https://codesandbox.io/s/react-hook-form-controller-079xx where they are also using react-datepicker with react-hooks-forms

desired result: when i select date, date should appear in date input box eg: 09/08/2020

below is the code i have written. pls help , thanks

import Head from "next/head";
import DatePicker from "react-datepicker";
import { useForm, Controller } from "react-hook-form";

const Form = () => {
  const { register, handleSubmit, control } = useForm();
  const onSubmit = (data) => console.log(data);
  const [selectedDate, setselectedDate] = useState(null);
  return (
    <>
      <Head>
        <link
          rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/react-datepicker/2.14.1/react-datepicker.min.css"
        />
      </Head>
      <form onSubmit={handleSubmit(onSubmit)}>
        <section>
          <label>Created Date</label>
          <Controller
            as={DatePicker}
            control={control}
            valueName="selected"
            selected={selectedDate}
            onChange={(date) => setselectedDate(date)}
            dateFormat="dd/MM/yyyy"
            placeholderText="Select Date"
            name="DatePicker"
            defaultValue={null}
          />
          {/* <DatePicker
            selected={selectedDate}
            onChange={(date) => setselectedDate(date)}
            dateFormat="dd/MM/yyyy"
            placeholderText="Select Date"
          /> */}
        </section>
        <input type="submit" />
      </form>
    </>
  );
};

export default Form;
Solution

  • Ciao, your problem is on onChange prop. If the valueName prop is setted as selected, onChange function must returns selected like this:

    onChange={([selected]) => {
   setselectedDate(selected);
   return selected;
}}

    So your DatePicker becomes:

    <Controller
   as={DatePicker}
   control={control}
   valueName="selected"
   selected={selectedDate}
   onChange={([selected]) => {
      setselectedDate(selected);
      return selected;
   }}
   dateFormat="dd/MM/yyyy"
   placeholderText="Select Date"
   name="DatePicker"
   defaultValue={null}
/>

    Not only but, despite you already setted a dateFormat in DatePicker element, to get data in a particular format you need to re-format data comes from form. Since react-hooks-forms DatePicker uses moment for date, I have used moment to format output date.

    So onSubmit function becames:

    import moment from "moment";
...
const onSubmit = (data) => {
   console.log(moment(selectedDate).format("DD/MM/yyyy"));
};

    Here codesandbox modified that shows what I have done.