Components

Three UI building blocks cover single values, form-style inputs, and ranges. React exports them from the main package entry. Matching custom elements ship from ./wc, CDN, and framework helpers.

Quick map

React export	Custom element	Role
`DateTime`	`<datetime-picker>`	Date, time, or datetime picker. Inline, overlay, or popover.
`DateTimeInput`	`<datetime-picker-input>`	Text field plus icon that opens a popover picker. Always popover + anchor.
`DateTimeRange`	`<datetime-picker-range>`	Start and end dates on one calendar. Inline or centered overlay only.

DateTime

Use when you control the trigger yourself, or when the calendar should stay visible (inline). Modes:

date: day grid only
time: hour / minute / second columns
datetime: date + time. Layout combined (default) shows both panels; tabs splits Date / Time tabs.

Presentation when not inline: centered overlay by default, or popover with anchorEl. Non-inline defaultOpen is true, so pass defaultOpen={false} or control open for button-driven UIs. See Overlay and triggers.

DateTimeInput

Use for forms and readouts that look like a text field. The component owns the input, trailing icon, and popover placement. You do not pass popover or anchorEl. It starts closed (defaultOpen false) until the field or icon is activated.

Extra props include placeholder, id, name, disabled, readOnly, customInput, and icon. Full list: Props.

DateTimeRange

Use when the user picks a start and an end date. Value shape is { start, end }. There is no time mode on the range picker. It does not support popover, anchorEl, theme, mode, layout, use12Hours, or showSeconds. Details: Date range.

When to use which

Situation	Choose
Form field that opens a calendar	`DateTimeInput`
Custom button or always-visible calendar	`DateTime`
Check-in / check-out or report date span	`DateTimeRange`
Time of day only	`DateTime` or Input with `mode="time"`

Commit rules

"Commit" means onChange fires with the value the user settled on.

Date overlay. Clicking a day commits and closes. No OK button.
Datetime or time overlay. Changing the day or clock updates the draft. Commit on OK. Clear commits null.
Inline DateTime. Changes commit as the user interacts (no separate OK gate for day selection).
DateTimeRange. Commits when the range is complete. No OK button.

With asString omitted or false, single pickers return Date or TimeValue. With asString={true}, they return a formatted string. Range returns { start, end } with Date or string members accordingly.

Vanilla and WC names

Vanilla: createDateTimePicker, createDateTimeRangePicker
WC tags: datetime-picker, datetime-picker-input, datetime-picker-range
WC events: change, openchange

Next: Props · Overlay · Examples · Troubleshooting