Date Field

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

Basic Usage

Basic Date Picker

With Default Value

With Default Date

Field Schema

A date field is authored as DateFieldMetadata (@object-ui/types), which is the source of truth for the key set: it extends BaseFieldMetadata with a display format and the two range bounds.

import type { DateFieldMetadata } from '@object-ui/types';

const closeDate: DateFieldMetadata = {
  type: 'date',
  name: 'close_date',
  label: 'Close Date',
  placeholder: 'Pick a date',
  required: true,
  format: 'yyyy-MM-dd',
  min_date: '2024-01-01',
  max_date: '2030-12-31',
  dueLike: true,
};

The range bounds are min_date and max_date — the same spelling the datetime field uses. datetime is its own type with its own metadata (DateTimeFieldMetadata); see DateTime Field.

The value being edited, and the className / disabled a host supplies, are not metadata keys — they are runtime widget props. See Field Widget Props.

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