Javascript - Register Calendar Component with React Form Hook

furybg
February 2, 2024
110 views
0 votes
2 Answers

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

Answers

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

use Controller like this:

//Form.tsx
import { zodResolver } from "@hookform/resolvers/zod";
import React from "react";
import {
  useForm,
  Controller,
  SubmitErrorHandler,
  SubmitHandler,
} from "react-hook-form";
import z from "zod";
import CDatePicker from "./CDatePicker";

export const RangeDateFormSchema = z.object({
  title: z.string(),
  start: z.date().optional(),
  end: z.date().optional(),
});

export type RangeDateFormType = z.infer<typeof RangeDateFormSchema>;

export default function FormCustom() {
  const methods = useForm<RangeDateFormType>({
    resolver: zodResolver(RangeDateFormSchema),
    defaultValues: { start: undefined, end: undefined },
    shouldUnregister: true,
  });
  const {
    handleSubmit,
    control,
    register,
    formState: { errors },
  } = methods;

  // ** Handlers */
  const onSubmit: SubmitHandler<RangeDateFormType> = (data) => {
    console.log(data, "submit data");
  };
  const onError: SubmitErrorHandler<RangeDateFormType> = (data) => {
    console.log(data, "error");
  };
  return (
    <div>
      <form
        onSubmit={handleSubmit(onSubmit, onError)}
        className="flex flex-col gap-4"
      >
        <input {...register("title")} />
        <Controller
          name="start"
          control={control}
          render={({ field: { value, onChange } }) => {
            return <CDatePicker onChange={onChange} value={value} />;
          }}
        />
        <Controller
          name="end"
          control={control}
          render={({ field: { value, onChange } }) => {
            return <CDatePicker onChange={onChange} value={value} />;
          }}
        />
        <button type="submit">save</button>
      </form>
    </div>
  );
}

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

export default function CDatePicker({ value, onChange, ...rest }) {
  const { errors } = useFormState({ control });
  return (
    <CDatePickerStyled>
      <Calendar value={value} onchange={onChange} {...rest}></Calendar>
      //....
    </CDatePickerStyled>
  );
}

Please signup or login to give your own answer.

Click here to cancel reply.

Javascript – Register Calendar Component with React Form Hook

Answers