Function: DateField()

DateField<TFieldValues>(props): Element

A date input field component that integrates React Hook Form with HeroUI DateInput.

This component provides a type-safe date field with validation support, error handling, and accessibility features. Uses @internationalized/date for date handling.

Type Parameters

TFieldValues

TFieldValues extends FieldValues

The form data type

Parameters

props

DateFieldProps<TFieldValues>

The date field props

Returns

Element

The rendered date field component

Examples


import { ZodForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
import { z } from "zod";
import { CalendarDate } from "@internationalized/date";
 
const schema = z.object({
  birthDate: z.instanceof(CalendarDate).nullable(),
  eventDate: z.instanceof(CalendarDate),
});
 
function MyForm() {
  return (
    <ZodForm
      config={{
        schema,
        fields: [
          FormFieldHelpers.date("birthDate", "Birth Date"),
          FormFieldHelpers.date("eventDate", "Event Date"),
        ],
      }}
      onSubmit={(data) => console.log(data)}
    />
  );
}


// With custom date format and min/max dates
<DateField
  control={form.control}
  name="eventDate"
  label="Event Date"
  dateProps={{
    minValue: new CalendarDate(2024, 1, 1),
    maxValue: new CalendarDate(2024, 12, 31),
  }}
/>