I have a form which I am trying to add a react date time picker to, but im trying to also integrate it with react-hook-form so that it goes along with the rest of the form, but it doesnt seem to be working at all.

When the form first renders it doesnt show the current date in the date picker, it just shows ———- and also when i select a date from the popup, it doesnt change in the field.

import { Controller, useForm } from 'react-hook-form'
import DateTimePicker from 'react-datetime-picker'
import 'react-datetime-picker/dist/DateTimePicker.css'
import 'react-calendar/dist/Calendar.css'

const Jobs = () => {
    const { control, register, handleSubmit, watch, formState: { errors } } = useForm();

    const onSubmit = handleSubmit(async ({ firstname, startdate }) => {
        console.log(startdate)
    })

    return (
        <form onSubmit={handleSubmit(onSubmit)}>

            <div>
                <input
                    id="firstname"
                    name="firstname"
                    type="text"
                    { ...register("firstname") }
                />
            </div>

            <div>
                <Controller
                    control={control}
                    name='startdate'
                    render={({ field: { onChange, value } }) => (
                        <DateTimePicker
                            onChange={onChange}
                            selected={value}
                        />
                    )}
                />
            </div>
        </form>
    )
}

>Solution :

It looks like you are on the right track with using react-hook-form and react-datetime-picker. The issue you are facing might be related to the initial value of the date field not being set correctly.

To fix this, you can set the initial value for the date field using the defaultValue prop in the Controller. Additionally, you should ensure that the value passed to the DateTimePicker is a Date object, as react-datetime-picker expects a Date value.

Here’s the updated code:

import { Controller, useForm } from 'react-hook-form';
import DateTimePicker from 'react-datetime-picker';
import 'react-datetime-picker/dist/DateTimePicker.css';
import 'react-calendar/dist/Calendar.css';

const Jobs = () => {
  const {
    control,
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const onSubmit = handleSubmit(async ({ firstname, startdate }) => {
    console.log(startdate);
  });

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <input id="firstname" name="firstname" type="text" {...register('firstname')} />
      </div>

      <div>
        <Controller
          control={control}
          name="startdate"
          defaultValue={new Date()} // Set the initial value to the current date
          render={({ field: { onChange, value } }) => (
            <DateTimePicker onChange={onChange} value={value ? new Date(value) : null} />
          )}
        />
      </div>
    </form>
  );
};

By setting the defaultValue to new Date(), the date picker should now show the current date when the form first renders. Also, ensure that the value passed to DateTimePicker is a Date object using new Date(value).