New! DateTimeInput is in beta, the API is subject to change. Feel free to test it out and let us know what you think!

DateTimeInput

a control to input a time and date value

Props

defaultValue

The initial date-time value in ISO 8601 format.

string

"2026-07-22T18:30:00.000Z"

disabled

Whether the DateTimeInput is disabled.

boolean

true

false

format

Whether to use a 12-hour or 24-hour time format. If not specified, defaults to the browser's locale convention.

string

'12'

'24'

id

The DOM id attribute value to use for the underlying element.

string

"datetime-input-id"

inline

Whether the date-time picker should always be shown or displayed via a drop when interacting with the input.

boolean

true

false

locale

The locale string for date and time formatting. If not specified, defaults to the browser's locale.

string

"en-US"

"de-DE"

"fr-FR"

messages

Custom messages for DateTimeInput. Used for internationalization and customization of default strings and accessibility announcements.

object

{
  activeSection: "string",
  activeSectionValue: "string",
  chooseDateTime: "string",
  inputLabel: "string",
  invalidDateTime: "string",
  openDrop: "string",
  sectionDay: "string",
  sectionHours: "string",
  sectionMeridiem: "string",
  sectionMinutes: "string",
  sectionMonth: "string",
  sectionSeconds: "string",
  sectionYear: "string"
}

minuteStep

The increment, in minutes, used when navigating the minutes section with the up/down arrow keys or the drop options.

number

name

The name of the input. This property is required when used within a FormField.

string

"appointment-time"

onChange

Callback function called when the date-time value changes. Receives an event object containing the new value in ISO 8601 format.

function

(event: { value?: string }) => setValue(event.value)

readOnly

Whether the DateTimeInput is read-only and cannot be edited by the user.

boolean

true

false

showSeconds

Whether to include seconds in the time picker and display.

boolean

true

false

value

The current date-time value in ISO 8601 format. Use this to control the DateTimeInput's value.

string

"2026-07-22T18:30:00.000Z"

Theme

dateTimeInput.button.margin

The margin around the calendar button.

string

"medium"

object

{ right: "small" }

dateTimeInput.container.round

The border radius for the container.

string

"xxsmall"

dateTimeInput.active.background

The background color for active date/time sections.

string

"active-background"

dateTimeInput.active.pad

The padding for active date/time sections.

string

"xxsmall"

dateTimeInput.active.indicator.color

The color of the active section indicator.

string

"black"

object

{ dark: "white", light: "black" }

dateTimeInput.active.indicator.size

The size of the active section indicator.

string

"small"

dateTimeInput.drop.pad

The padding inside the drop container.

string

"small"

object

{ vertical: "small", horizontal: "small" }

dateTimeInput.drop.gap

The gap between elements inside the drop.

string

"small"

dateTimeInput.drop.border.color

The color of the divider between the Calendar and TimeInput inside the DateTimeInput drop.

string

"border"

dateTimeInput.drop.border.size

The border size of the divider between the Calendar and TimeInput inside the DateTimeInput drop.

string

"xsmall"

dateTimeInput.icon.calendar

The icon to display for the calendar button.

element

undefined

dateTimeInput.separator.pad

The padding around date/time separators.

string

"xxsmall"

object

{ vertical: "xxsmall", horizontal: "xxsmall" }