Date Time Picker

Date + time in one field (segments down to minutes) with the calendar popover. Values are ZonedDateTime (the time zone segment is hidden).

Import

import { DateTimePicker, InlineDateTimePicker } from '@marbleui/ui'

Props

<DateTimePicker>

Prop	Type	Default
description	`ReactNode`	`—`
errorMessage	`string \| ((validation: ValidationResult) => string)`	`—`
label	`ReactNode`	`—`
variant	`FieldVariant`	`—`

Also accepts React Aria props (112).

<InlineDateTimePicker>

Inline calendar with a time field below and a formatted summary, for scheduling panels.

Prop	Type	Default
className	`string`	`—`
defaultValue	`ZonedDateTime`	`—`
onChange	`(v: ZonedDateTime) => void`	`—`

Usage notes

DateTimePicker is DatePicker preset with granularity="minute" and hideTimeZone: one field for date and time. InlineDateTimePicker lays out a calendar, a time field and a written summary in a panel, for scheduling screens.

import { now, getLocalTimeZone } from '@internationalized/date'
<DateTimePicker label="Publish at" minValue={now(getLocalTimeZone())} onChange={setPublishAt} />
<InlineDateTimePicker onChange={(when) => schedule(when.toAbsoluteString())} />

Both are typed for ZonedDateTime values; create one with now(getLocalTimeZone()) or parseZonedDateTime.
The popover only picks the day; hour and minute are typed in the segments. On an empty field, picking a day sets the time to midnight unless placeholderValue has a time.
InlineDateTimePicker is uncontrolled (defaultValue + onChange) and starts at the next full hour. Its “Date” and “Time” labels are fixed and it has no min or max.
The inline summary is a polite live region, so screen readers hear the full date and time after each change.

Example source · show

import { getLocalTimeZone, now } from '@internationalized/date'
import { DateTimePicker, InlineDateTimePicker } from './date-time-picker'

export const styles = {
  Field: () => <DateTimePicker className="w-72" label="Publish at" defaultValue={now(getLocalTimeZone()).set({ minute: 30, second: 0, millisecond: 0 })} />,
  Inline: () => <InlineDateTimePicker />,
}

Source: packages/ui/src/date-time-picker/date-time-picker.tsx

Catalog

Category: date-time
Priority: Extra
Primitive: react-aria
React Aria: DatePicker (granularity="minute")