Forms
Date Time Picker
A date-and-time picker that pairs a month calendar with hour and minute steppers to choose a Temporal.PlainDateTime. It works from the keyboard and clamps the result to any min and max bounds.
ReactVueWeb Components
View in Storybook Playground
Examples
<DateTimePicker
defaultValue={Temporal.PlainDateTime.from('2026-05-30T09:30')}
minuteStep={15}
onChange={setWhen}
/>Props
| Name | Type | Default | Description |
|---|---|---|---|
value | Temporal.PlainDateTime | null | — | Selected date+time (controlled). Pass `null` for "no selection". |
defaultValue | Temporal.PlainDateTime | null | — | Initial date+time (uncontrolled). @default null |
onChange | (value: Temporal.PlainDateTime | null) => void | — | Called with the new value (or `null` when cleared). |
min | PlainDateTimeInput | — | Earliest selectable instant (inclusive). ISO datetime strings accepted. |
max | PlainDateTimeInput | — | Latest selectable instant (inclusive). ISO datetime strings accepted. |
locale | Intl.LocalesArgument | — | BCP-47 locale for month / weekday names. Defaults to the host locale. |
weekStartsOn | Weekday | — | Which weekday the grid starts on. @default 1 (Monday) |
minuteStep | number | 5 | Minute increment for the minute stepper. @default 5 |
disabled | boolean | — | Disable the whole control. |
size | Extract<SizeToken, 'sm' | 'md' | 'lg'> | md | Control size. @default 'md' |
status | 'danger' | — | Semantic status (used for the invalid/danger boundary styling). |
alignEnd | boolean | false | Align the calendar popup to the field's end (right) edge. @default false |
toggleLabel | string | Choose date and time | Accessible label for the calendar toggle button. @default 'Choose date and time' |
id | string | — | `id` for the text input (an auto-generated id is used otherwise). |
name | string | — | `name` for the text input, for form submission. |
className | string | — |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.