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>
)
}
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"> </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>
)
}