Props

Shared by DateTime and DateTimeInput unless noted. Vanilla options use the same names. Web Components use kebab-case attributes (for example as-string, disable-past-dates, week-starts-on).

Return values

Mode	asString	onChange receives
`date`	omitted / false	`Date` at start of day, or `null`
`datetime`	omitted / false	`Date`, or `null`
`time`	omitted / false	`TimeValue`, or `null`
any single mode	`true`	formatted `string \| null`
range	omitted / false	`{ start: Date \| null; end: Date \| null }`
range	`true`	`{ start: string \| null; end: string \| null }`

TimeValue

Returned in time mode when asString is omitted or false.

{
  hour: 2,           // 1-12
  hour24: 14,        // 0-23
  minute: 30,
  second: 0,
  ampm: "PM",
  formatted: "14:30:00" // or "02:30:00 PM" when use12Hours
}

Shared props (DateTime / DateTimeInput)

Prop	Required	Type	Default	Effect
`value`	no	`Date \| string \| Dayjs \| null`	none	Controlled value
`defaultValue`	no	same	none	Uncontrolled initial value
`onChange`	no	`(value) => void`	none	Fires on commit (see Components)
`asString`	no	`boolean`	objects (`false` behavior)	`true` returns formatted strings instead of `Date` / `TimeValue`
`mode`	no	`"datetime" \| "date" \| "time"`	`"datetime"`	Which panels and commit rules apply
`layout`	no	`"combined" \| "tabs"`	`"combined"`	Datetime only: both panels or Date/Time tabs
`showSeconds`	no	`boolean`	`true`	Seconds column and default format include seconds
`format`	no	`string`	derived from mode / clock	dayjs format for display and for `asString` output
`minDate`	no	date-like	none	Inclusive lower bound; clamps navigation
`maxDate`	no	date-like	none	Inclusive upper bound; clamps navigation
`disablePastDates`	no	`boolean`	`false`	Blocks days before today
`disableFutureDates`	no	`boolean`	`false`	Blocks days after today
`weekStartsOn`	no	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6`	`0`	First weekday (0 = Sunday)
`use12Hours`	no	`boolean`	`false`	12-hour clock with AM/PM
`locale`	no	`string`	`"en"`	dayjs locale id. Import `dayjs/locale/...` first
`labels`	no	`DateTimeLabels`	English chrome	Override OK, Clear, Close, panel titles, a11y strings
`theme`	no	`"light" \| "dark"`	inherit from CSS / ancestors	Force theme on the picker (important for portaled popovers)
`inline`	no	`boolean`	`false`	Render without overlay chrome
`className`	no	`string`	none	Root class
`style`	no	CSS properties / string (vanilla)	none	Inline styles on the root

Open-state and placement props

Apply to DateTime. DateTimeInput supports open-state props but always uses popover placement against its own input.

Prop	Required	Type	Default	Effect
`open`	no	`boolean`	none	Controlled open state
`defaultOpen`	no	`boolean`	`true` for non-inline `DateTime`; `false` for `DateTimeInput`	Uncontrolled initial open. Non-inline DateTime opens on mount unless you set this to false
`onOpenChange`	no	`(open: boolean) => void`	none	Fires when the overlay opens or closes
`popover`	no	`boolean`	`false` (DateTime)	Anchor near `anchorEl` instead of a centered modal. DateTimeInput always behaves as popover
`anchorEl`	when popover	`HTMLElement \| null`	none	Anchor element for popover placement. Required for DateTime popover mode

DateTimeInput extras

Prop	Type	Default	Effect
`placeholder`	`string`	none	Input placeholder
`id`	`string`	none	Input id
`name`	`string`	none	Input name
`disabled`	`boolean`	`false`	Disables interaction
`readOnly`	`boolean`	`false`	Prevents typing; open via control still follows props
`aria-label`	`string`	none	Accessible name
`aria-labelledby`	`string`	none	Accessible name from another element
`inputClassName`	`string`	none	Class on the input element
`icon`	`ReactNode`	calendar icon	Trailing icon. Pass `null` to hide
`customInput`	`ReactElement`	none	Replace the built-in input. Ref, value, and click handlers are injected
`noStyle`	`boolean`	`false`	Omit default wrapper/input classes; style via `className` / `inputClassName`

DateTimeRange differences

Range supports value/defaultValue/onChange, asString, format, bounds, disable past/future, weekStartsOn, locale, labels, open/defaultOpen / onOpenChange, inline, className, and style.

Not available on range:

popover, anchorEl
theme
mode, layout, use12Hours, showSeconds

Non-inline range also defaults defaultOpen to true. See Date range.

Calendar behavior notes

Day grid always shows 6 weeks so height stays stable.
Month/year navigation stays inside min/max and past/future bounds.
When today is outside bounds, the picker opens on the first or last selectable day.
Closing an overlay resets month/year drill-down to the committed value month.

Components · Overlay · Theming · Locales · Troubleshooting