DateTimePicker

Extends DatePicker with a scrollable drum-roll time selector. Supports three precision levels: hour, hour+minute, or hour+minute+second. Selection is confirmed with an OK button.

Playground

label

placeholder

timeMode

size

clearable

showIcon

disabled

rounded

<DateTimePicker
  placeholder="Select date & time"
/>

Time modes

Use timeMode to control which time units are shown. "HH" shows only hours, "HH:mm" adds minutes (default), "HH:mm:ss" adds seconds.

HH:mm

HH:mm:ss

Basic

Uncontrolled usage. Select a date from the calendar, adjust the time using the drum-roll columns, then click OK to confirm.

Clearable

Adds a clear button when a value is selected.

Controlled

Drive the value from external state. The onChange callback fires only when OK is clicked.

No value selected

With label and hint

Meeting timeSelect the date and time for your meeting

Error state

Scheduled atPlease select a date and time

Custom format

Use format tokens: YYYY, MM, DD, HH, mm, ss.

Min / Max date

Restrict selection to ±30 days from today.

Within 30 days

Disable weekends

Pass a disabledDate function to block specific dates.

Weekdays only

Sizes

Disabled

Locale: Tiếng Việt

Pass locale="vi" to switch all panel labels to Vietnamese.

Locale: Custom object

Pass a full DateTimePickerLocale object for any language not built-in.

Custom icon

Pass any ReactNode via the icon prop to replace the default icon.

API

Property	Type	Default	Description
`value`	`Date \| null`		Controlled value
`defaultValue`	`Date \| null`		Initial value for uncontrolled usage
`onChange`	`(date: Date \| null) => void`		Called when OK is confirmed. Receives null when cleared
`timeMode`	`"HH" \| "HH:mm" \| "HH:mm:ss"`	"HH:mm"	Which time units to show: hour only, hour+minute, or hour+minute+second
`placeholder`	`string`	"Select date & time"	Placeholder shown when no value is selected
`format`	`string`	derived from timeMode	Display format. Tokens: YYYY MM DD HH mm ss. Defaults to "MM/DD/YYYY HH:mm" (or HH / HH:mm:ss based on timeMode)
`disabled`	`boolean`	false	Disable the picker
`clearable`	`boolean`	false	Show a clear button when a value is selected
`size`	`"sm" \| "md" \| "lg"`	"md"	Size preset
`minDate`	`Date`		Earliest selectable date
`maxDate`	`Date`		Latest selectable date
`disabledDate`	`(date: Date) => boolean`		Custom function to disable specific dates
`label`	`string`		Label rendered above the trigger
`required`	`boolean`	false	Mark label as required
`error`	`string`		Error message shown below the picker
`hint`	`string`		Hint text shown below the picker
`showIcon`	`boolean`	true	Show or hide the calendar+clock icon
`icon`	`ReactNode`		Replace the default icon with a custom element
`locale`	`string \| DateTimePickerLocale`	auto	Language for panel labels. Pass a BCP-47 tag ("vi", "en") or a custom locale object. Auto-detects from <html lang="…"> when omitted.
`rounded`	`"none" \| "sm" \| "md" \| "lg" \| "full"`		Border-radius preset
`className`	`string`		Additional class on the root element