DateTimePicker

Anatomy

+----------------------------------------------------+
| Label                                              |
| +------------------------------------------------+ |
| | MM / DD / YYYY  ·  HH : MM                  📅 | |
| +------------------------------------------------+ |
| Helper text                                        |
+----------------------------------------------------+

Examples

Basic

<DateTimePicker label="Meeting time" />

Controlled

import { parseDate, Time, type DateValue, type TimeValue } from '@internationalized/date';

const [d, setD] = useState<DateValue | null>(parseDate('2026-05-26'));
const [t, setT] = useState<TimeValue | null>(new Time(14, 30));

<DateTimePicker
  label="Send at"
  value={d} onChange={setD}
  time={t} onTimeChange={setT}
/>

When to use

Meeting / event scheduling.
Scheduled-publish forms (CMS, marketing).
Reservation start times.

When to reach for something else

Just a date. Use <DatePicker>.
A range of date-times. Use <DateRangePicker> + two <TimeField>s (a <DateTimeRangePicker> is on the roadmap).
Just a time, no date. Use a bare <TimeField> from react-aria-components; we’ll wrap it as <TimeField> in v0.2.

Install: @helixui/core

import { DateTimePicker } from '@helixui/core'

status: stable · since: 0.1.0

Tags: date, time, picker, calendar, schedule, appointment

Props

Name	Type	Default	Description
`label`	`string`	`undefined`	Field label rendered above the row.
`description`	`string`	`undefined`	Helper text rendered below the row.
`errorMessage`	`string`	`undefined`	Validation message shown when invalid.
`tone`	`'brand' \| 'neutral' \| 'danger'`	`brand`	Tone for focus ring + selected day.
`size`	`'sm' \| 'md' \| 'lg'`	`md`	Touch target size.
`value`	`DateValue \| null`	`undefined`	Controlled date.
`onChange`	`(value: DateValue \| null) => void`	`undefined`	Fires when the date changes.
`time`	`TimeValue`	`undefined`	Controlled time portion.
`onTimeChange`	`(value: TimeValue \| null) => void`	`undefined`	Fires when the time changes.
`defaultTime`	`TimeValue`	`undefined`	Uncontrolled initial time.
`timeStep`	`number`	`5`	Granularity of the minute field, in minutes.

Tokens used

color.bg.surface.default, color.bg.action.brand.default, color.border.subtle, color.border.action.brand, color.text.primary, color.text.muted, color.text.action.brand, radius.sm, radius.md, radius.lg, spacing.1, spacing.2, spacing.3

Accessibility

Role: combobox

Keyboard

Key	Action
`Tab`	Move between date segments, time segments, and the trigger.
`ArrowUp`	Increment focused segment.
`ArrowDown`	Decrement focused segment.
`Enter`	Open the popover from the trigger; select a focused day in the grid.

Notes

Date and time fields are independently focusable.
Time field defaults to 24-hour; pass hourCycle={12} via wrapping for am/pm.
The popover calendar only affects the date; the time persists across day changes.