Date Field

The Date Field component provides a date picker for selecting dates and optionally times.

Basic Usage

Basic Date Picker

{
  "type": "date",
  "name": "birthdate",
  "label": "Birth Date",
  "placeholder": "Select date..."
}

With Default Value

With Default Date

{
  "type": "date",
  "name": "event_date",
  "label": "Event Date",
  "value": "2026-03-13T03:09:10.430Z"
}

Field Schema

interface DateFieldSchema {
  type: 'date' | 'datetime';
  name: string;                  // Field name/ID
  label?: string;                // Field label
  placeholder?: string;          // Placeholder text
  value?: string | Date;         // Default value (ISO string or Date)
  required?: boolean;            // Is field required
  readonly?: boolean;            // Read-only mode
  disabled?: boolean;            // Disabled state
  className?: string;            // Additional CSS classes
  
  // Validation
  min?: string | Date;           // Minimum date
  max?: string | Date;           // Maximum date
  format?: string;               // Display format
}

Date Formats

The date field supports various display formats:

Short: 12/31/2024
Medium: Dec 31, 2024 (default)
Long: December 31, 2024
Full: Monday, December 31, 2024

Use Cases

Birthdates: User birth dates
Deadlines: Task or project deadlines
Events: Event start/end dates
Appointments: Meeting or appointment scheduling
Releases: Product or content release dates

Cell Renderer

In tables/grids, dates are formatted consistently:

import { DateCellRenderer } from '@object-ui/fields';

// Renders: Dec 31, 2024
// Or: Dec 31, 2024 2:30 PM (for datetime)

DateTime Variant

For collecting both date and time:

{
  type: 'datetime',
  name: 'appointment',
  label: 'Appointment Time'
}