Register Calendar Component with React Form Hook

Question

Hello I trying to register "Calendar" component from "Prime React" library with "React Form Hook". The problem is that I can't set default value to the input.

This is where I set the default value.

    const { register, handleSubmit, reset, formState: { errors }, control } = useForm({ mode: 'onSubmit', defaultValues: {
        title: "test",
        start: new Date(),
        end: new Date()
        
      } });

This is my component.

import React from 'react'
import { Calendar } from 'primereact/calendar';
import { useFormState } from 'react-hook-form';
import { CDatePickerStyled } from './CDatePicker.styled';

export default function CDatePicker({ required, disabled, register, control, placeHolder }) {
  const { errors } = useFormState({ control });
  return (
    <CDatePickerStyled>
      <Calendar className={errors[register.name] ? 'p-invalid' : ''} {...register} placeholder={placeHolder} disabled={disabled}></Calendar>
      {required ? <span className={errors[register.name] ? 'error' : ''}>Required*</span> : null}
    </CDatePickerStyled>
  )
}

Answer 1

Isn't that why there is a Calendar React Hook form example right on the documentation site: https://primereact.org/calendar/#hookform

import React, { useRef } from 'react';
import { Controller, useForm } from 'react-hook-form';
import { Button } from 'primereact/button';
import { classNames } from 'primereact/utils';
import { Calendar } from "primereact/calendar";
import { Toast } from "primereact/toast";

export default function HookFormDoc() {
    const toast = useRef(null);
    const defaultValues = { date: null };
    const form = useForm({ defaultValues });
    const errors = form.formState.errors;

const show = () => {
    const date = new Date(form.getValues('date')).toLocaleDateString();
    
    toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: date });
};

    const onSubmit = (data) => {
        data.date && show();
        form.reset();
    };

    const getFormErrorMessage = (name) => {
        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
    };

    return (
        <div className="card flex justify-content-center">
            <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-column gap-2">
                <Toast ref={toast} />
                <Controller
                    name="date"
                    control={form.control}
                    rules={{ required: 'Date is required.' }}
                    render={({ field, fieldState }) => (
                        <>
                            <label htmlFor={field.name}>Date</label>
                            <Calendar inputId={field.name} value={field.value} onChange={field.onChange} dateFormat="dd/mm/yy" className={classNames({ 'p-invalid': fieldState.error })} />
                            {getFormErrorMessage(field.name)}
                        </>
                    )}
                />
                <Button label="Submit" type="submit" icon="pi pi-check" />
            </form>
        </div>
    )
}