DateTime Field

The DateTime Field component provides a combined date and time input for collecting both date and time information in a single field.

Basic Usage

With Default Value

Required Field

Read-Only

Field Schema

A datetime field is authored as DateTimeFieldMetadata (@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 { DateTimeFieldMetadata } from '@object-ui/types';

const startsAt: DateTimeFieldMetadata = {
  type: 'datetime',
  name: 'starts_at',
  label: 'Starts At',
  placeholder: 'Pick a date and time',
  required: true,
  format: 'yyyy-MM-dd HH:mm',
  min_date: '2024-01-01T00:00:00Z',
  max_date: '2030-12-31T23:59:59Z',
};

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 Format

The datetime field stores values in ISO 8601 format: YYYY-MM-DDTHH:mm

Example: 2024-03-15T14:30 represents March 15, 2024 at 2:30 PM

Cell Renderer

When used in data tables or grids:

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

// Renders: Mar 15, 2024, 02:30 PM

Use Cases

• Event Scheduling: Meeting times, appointments
• Timestamps: Order placed, task deadline
• Booking Systems: Reservation date and time
• Notifications: Scheduled notification time