React-datepicker validation using react-hook-form

Question

I want to validate react-datepicker using react-hook-form and when i try it, its not working for me, also the validation message will not display. It is possible to put ref inside the DatePicker?

This is the version of react-hook-form that I used.

"react-hook-form": "^6.15.8"

This is my code

import React from "react";
import { useForm } from "react-hook-form";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

function Account() {
    const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({ mode: "all" });

const [birthdate, setBirthdate] = useState(null);

    return (
        <div className="flex flex-col mx-5 my-2 space-y-2">
                  <DatePicker
                    className="birthdate border-2 border-pink-300 placeholder-gray-500 rounded-2xl w-full h-12 p-5 outline-none"
                    type="birthdate"
                    name="birthdate"
                    placeholderText="Birthdate"
                    selected={birthdate}
                    dateFormat="yyyy-MM-dd"
                    onChange={(date) => {
                      setBirthdate(date);
                    }}
                    peekNextMonth
                    showMonthDropdown
                    showYearDropdown
                    dropdownMode="select"
                    closeOnScroll={true}
                    disabledKeyboardNavigation
                    ref={register({
                      required: {
                        value: true,
                        message: "*Birthdate is required",
                      },
                    })}
                  />
                  {errors.birthdate && (
                    <p className="text-red-600 text-sm cursor-default">
                      {errors.birthdate.message}
                    </p>
                  )}
                </div>
    )
}

export default Account

For the CSS Im using tailwind CSS Framework.

Answer 1

Did you try using controllers? Here is an example based on how I have done it in the past

import React from "react";
import { useForm } from "react-hook-form";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

function Account() {
  const {
    control,
    handleSubmit,
    formState: { errors },
  } = useForm({ mode: "all" });

  return (
    <div className="flex flex-col mx-5 my-2 space-y-2">
      <Controller
        control={control}
        name="birthdate"
        render={({ field }) => (
          <DatePicker
            className="birthdate border-2 border-pink-300 placeholder-gray-500 rounded-2xl w-full h-12 p-5 outline-none"
            name="birthdate"
            placeholderText="Birthdate"
            selected={field.value}
            dateFormat="yyyy-MM-dd"
            onChange={field.onChange}
            peekNextMonth
            showMonthDropdown
            showYearDropdown
            dropdownMode="select"
            closeOnScroll={true}
            disabledKeyboardNavigation
          />
        )}
      />
        {errors.birthdate && (
            <p className="text-red-600 text-sm cursor-default">
            {errors.birthdate.message}
          </p>
        )}
    </div>
  )
}

export default Account

Here is the official docs link with the usage of Controller. I hope this solves your issue, let me know if you still have some doubts.