Skip to main content

DateField

Description​

A date picker input field component that integrates with React Hook Form. Supports min/max date validation and provides a native date picker interface.

Import​

import { DateField } from '@components/common/form/DateField';

Usage​

import { Form } from '@components/common/form/Form';
import { DateField } from '@components/common/form/DateField';

function EventForm() {
  return (
    <Form action="/api/events">
      <DateField
        name="eventDate"
        label="Event Date"
        required
      />
    </Form>
  );
}

Props​

NameTypeDefaultDescription
nameFieldPath<T>-Field name (required)
labelstring-Label text displayed above the input
minstring-Minimum allowed date (YYYY-MM-DD format)
maxstring-Maximum allowed date (YYYY-MM-DD format)
requiredbooleanfalseMakes the field required
errorstring-Custom error message
helperTextstring-Helper text shown in a tooltip
validationRegisterOptions<T>-React Hook Form validation rules
wrapperClassNamestring-CSS class for the wrapper div
...propsInputHTMLAttributes-All standard HTML input attributes

Example: With Min/Max Dates​

import { Form } from '@components/common/form/Form';
import { DateField } from '@components/common/form/DateField';

function BookingForm() {
  const today = new Date().toISOString().split('T')[0];
  const maxDate = new Date();
  maxDate.setFullYear(maxDate.getFullYear() + 1);
  
  return (
    <Form action="/api/bookings">
      <DateField
        name="checkIn"
        label="Check-in Date"
        min={today}
        max={maxDate.toISOString().split('T')[0]}
        required
        helperText="Select a date within the next year"
      />
    </Form>
  );
}

Example: Birthday Field​

import { Form } from '@components/common/form/Form';
import { DateField } from '@components/common/form/DateField';

function ProfileForm() {
  const today = new Date().toISOString().split('T')[0];
  const minDate = '1900-01-01';
  
  return (
    <Form action="/api/profile">
      <DateField
        name="birthdate"
        label="Date of Birth"
        min={minDate}
        max={today}
        required
      />
    </Form>
  );
}

Features​

  • Native Date Picker: Uses browser's native date picker interface
  • Min/Max Validation: Built-in validation for date ranges
  • Auto-cleanup: Automatically unregisters on unmount
  • TypeScript Support: Full type safety with generics

Date Format​

Values are in YYYY-MM-DD format (ISO 8601 date string).