Date Time Picker

The Date Time Picker component allows users to select a date and time with options for min/max and more.

Usage

Default

Select date and time

<DateTimePicker
  value={value}
  onChange={setValue}
  label="Select date and time"
/>

Props

Data table
	Type	Description
aria-describedby	string	Accessible description reference for the input.
aria-errormessage	string	Accessible error message reference for the input.
aria-invalid	boolean	Marks the input as invalid. Useful for external validation control.
aria-label	string	Accessible label for the input when no visible label is present or when an override is needed.
aria-labelledby	string	Accessible label reference for the input.
aria-required	boolean	Marks the input as required for assistive technologies.
autoComplete	React.HTMLInputAutoCompleteAttribute	Optional autocomplete value.
className	string	Additional class name for custom styling.
data-testid	string	Optional test ID for testing frameworks.
descriptionId	string	Custom id for helper/description text.
disabled	boolean	Whether the input is disabled.
errorId	string	Custom id for error text.
id	string	Custom input id.
label	string	Optional visible label displayed above the input.
labelId	string	Custom label id.
max	string	Maximum allowed date/time (ISO 8601 format).
min	string	Minimum allowed date/time (ISO 8601 format).
name	string	Name attribute for form submission.
onChange	((newValue: string) => void)	Callback triggered when the date/time value changes.
outline	boolean	Whether to use outlined styling.
pickerButtonAriaDescribedBy	string	Accessible description reference for the calendar trigger button.
pickerButtonAriaLabel	string	Accessible label for the calendar trigger button.
pickerButtonAriaLabelledBy	string	Accessible label reference for the calendar trigger button.
pickerButtonTitle	string	Optional title/tooltip for the picker trigger button.
placeholder	string	Optional placeholder text.
readOnly	boolean	Whether the input should be read-only.
required	boolean	Whether the input is required for form validation.
rounding	RoundingType	Controls the rounding of the input ('none' \| 'small' \| 'medium' \| 'large' \| 'full').
shadow	ShadowType	Controls the shadow of the input ('none' \| 'light' \| 'medium' \| 'strong' \| 'intense').
size	SizeType	Size of the component ('xs' \| 'small' \| 'medium' \| 'large' \| 'xl').
state	StateType	State of the input ('success' \| 'error' \| 'warning' \| 'disabled' \| '').
theme	ThemeType	Thematic style of the input ('primary' \| 'secondary' \| 'tertiary' \| 'quaternary' \| 'clear').
title	string	Optional title/tooltip for the input.
value	string	Current value in ISO 8601 format (e.g., "2025-04-10T12:00").