Skip to main content

DateTimeLocalField

Description​

A date and time picker input field component that integrates with React Hook Form. Provides a native datetime-local picker interface with min/max validation.

Import​

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

Usage​

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

function AppointmentForm() {
  return (
    <Form action="/api/appointments">
      <DateTimeLocalField
        name="appointmentTime"
        label="Appointment Date & Time"
        required
      />
    </Form>
  );
}

Props​

NameTypeDefaultDescription
nameFieldPath<T>-Field name (required)
labelstring-Label text displayed above the input
minstring-Minimum allowed datetime
maxstring-Maximum allowed datetime
stepnumber-Step interval in seconds
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: Meeting Scheduler​

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

function MeetingForm() {
  const now = new Date();
  now.setMinutes(now.getMinutes() - now.getTimezoneOffset());
  const minDateTime = now.toISOString().slice(0, 16);
  
  return (
    <Form action="/api/meetings">
      <DateTimeLocalField
        name="startTime"
        label="Meeting Start Time"
        min={minDateTime}
        step={900} // 15 minute intervals
        required
        helperText="Select date and time for the meeting"
      />
    </Form>
  );
}

Example: Event Scheduling​

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

function EventForm() {
  return (
    <Form action="/api/events">
      <DateTimeLocalField
        name="eventStart"
        label="Event Start"
        required
      />
      
      <DateTimeLocalField
        name="eventEnd"
        label="Event End"
        required
        validation={{
          validate: (value, formValues) => {
            if (!value || !formValues.eventStart) return true;
            return value > formValues.eventStart || 'End time must be after start time';
          }
        }}
      />
    </Form>
  );
}

Features​

  • Native Picker: Uses browser's native datetime-local picker
  • Min/Max Validation: Built-in validation for datetime ranges
  • Step Control: Control time interval precision
  • Auto-cleanup: Automatically unregisters on unmount
  • TypeScript Support: Full type safety with generics

Datetime Format​

Values are in YYYY-MM-DDTHH:mm format (ISO 8601 local datetime string).