Javascript 使用Reaction窗体挂钩注册日历组件

这不就是为什么在文档站点上有一个日历react 钩子表单示例的原因吗: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>
    )
}