DateTimePicker

DateTimePicker picks a date and a time in one popover: the calendar on top, the time field below.

The calendar is the DatePicker Calendar and the time field is a TimePicker (type "9", "930", "9:30 PM" freely or pick from a list timeIncrement minutes apart). Picking a date keeps the selected time (00:00 by default); a time picked before any date is used when a date is picked. The Done button closes the popover; the value updates as soon as you pick. Shows a numeric date and a time in the locale (12- or 24-hour from the locale or hourCycle). minDate / maxDate limit the date part.

Meeting starts

Not scheduled

Import

Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.

TSX

// npm install yugen-uiimport { DateTimePicker } from "yugen-ui";

Variants

Each tile is a standalone example: hover to copy, or press Code to see the source.

Departure (24-hour)

Check-in (12-hour)

24- / 12-hour

hourCycle overrides the cycle from the locale.

Usage

Use it when the exact moment matters (appointments, deadlines with a time).
Name the time zone in the hint when people are in different places.

Don't

Don't use DateTimePicker when only the date matters. Use DatePicker.
Don't set a tiny time step (1 minute); the list gets too long, and other times can still be typed.

Props

Prop · Type	Default	Description
value / defaultValueDate \| null	Default: —	Selected date and time.
onValueChange(date: Date \| null) => void	Default: —	Called when the date or time changes, or the value is cleared.
timeIncrementnumber	Default: 30	Step between times in the list (minutes).
hourCycle"h23" \| "h12"	Default: from locale	24-hour or 12-hour.
minDate / maxDateDate	Default: —	Earliest / latest date (date part only).
formatDate(date: Date) => string	Default: —	Display format; defaults to a numeric date + time in the locale.
placeholderstring	Default: "Select date and time…"	Text when nothing is selected.
clearableboolean	Default: false	Shows a clear button when there is a value.
size"small" \| "medium" \| "large"	Default: "medium"	Height 24 / 32 / 40px.
disabled / required / id / aria-*—	Default: —	Passed by Field when wrapped in <Field>.

Messages

Text built into the component: labels, aria-labels, screen reader announcements.

English by default. Change it with the messages prop of YugenProvider, by the namespace below; messagesVi has the Vietnamese set. See Interface language.

messages.dateTimePicker

Key · Type	Default (English)	messagesVi
placeholderstring Placeholder khi chưa chọn.	Default (English)`"Select date and time…"`	messagesVi`"Chọn ngày giờ…"`
clearstring aria-label nút xoá giá trị (`clearable`).	Default (English)`"Clear"`	messagesVi`"Xoá giá trị"`
timestring Nhãn ô giờ trong popover.	Default (English)`"Time"`	messagesVi`"Giờ"`
donestring Nút đóng popover.	Default (English)`"Done"`	messagesVi`"Xong"`