Date Time Picker

A date field and time selects side by side that make one Date, for meetings, deliveries and reminders.

Beta

Web

iOS

Android

@advui/core

Source

Basic

Preview

Code

Starts

In your time zone.

Installation

Package

CLI (copy source)

pnpm

pnpm add @advui/core

npm

npm install @advui/core

Usage

import { DateTimePicker, Field } from '@advui/core'

<Field label="Starts">
  <DateTimePicker value={start} onValueChange={setStart} hourCycle={12} minuteStep={15} />
</Field>

Examples

12-hour, weekdays only

Preview

Code

Pickup

Weekdays only.

Value: none

API reference

DateTimePicker

Also takes Date Picker’s `formatOptions`, `placeholder`, `title`, `isDateDisabled`, `weekStartsOn` and `locale`, and Time Picker’s `hourLabel`, `minuteLabel` and `periodLabel`.

Prop	Type	Default	Description
`value`	`Date \| null`	—	The picked day and time, in local time.
`defaultValue`	`Date \| null`	—	Starting `value` when uncontrolled.
`onValueChange`	`(value: Date \| null) => void`	—	Called once a day and a time are both picked, and on later changes.
`hourCycle`	`12 \| 24`	`24`	12 adds an AM/PM select.
`minuteStep`	`number`	`5`	Minutes between options.
`min`	`Date`	—	Earliest day and time that can be picked: on that day, earlier times are disabled.
`max`	`Date`	—	Latest day and time that can be picked: on that day, later times are disabled.
`id`	`string`	—	Goes on the date field, so a Field’s label targets it.
`dateLabel`	`string`	`'Date'`	Accessible name of the date field.
`timeLabel`	`string`	`'Time'`	Accessible name of the group of time selects (web).
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	As Input.
`invalid`	`boolean`	`false`	Error styling and `aria-invalid` on every part.
`disabled`	`boolean`	`false`	Not focusable or editable.

Accessibility

On web, a group named by its Field’s label (or aria-label), holding a date field named “Date” and a “Time” group of Selects (Hour, Minute, AM or PM).
The date field is a button that opens a calendar dialog (see Date Picker); the picked day and the Field’s help and error text are its description.
On iOS and Android, where group names are not read, each part carries the field’s name, as in “Starts, Date” and “Starts, Hour”, and the help text is its hint.
The date and the time each open their own panel, so no overlay opens inside another.

Keyboard interactions
Key	Action
`Tab`	Moves between the date field and the time selects.
`Enter / Space`	Opens the calendar or a time list.
`Escape`	Closes it without changing the value.

Platform notes

iOS

The calendar and each time list open as bottom sheets.

Android

The calendar and each time list open as bottom sheets; the back button closes them.

Since v0.14.0Last updated Nov 2, 2026Edit this page on GitHub

PreviousDate Range Picker

NextField