Date Time Picker

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

Usage

Select date and time

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

Sortable data table
Prop	Type	Default	Description
value	string \| Date	-	The current value of the picker (ISO string, Date object, or formatted).
onChange	(value: string \| Date) => void	-	Callback fired when the value changes.
theme	"primary" \| "secondary" \| "tertiary" \| "quaternary" \| "clear"	Configured Default	Theme variant for the picker.
state	"" \| "success" \| "error" \| "warning"	-	Visual state for the picker (success, error, warning).
rounding	"none" \| "small" \| "medium" \| "large"	Configured Default	Corner rounding style.
shadow	"none" \| "light" \| "medium" \| "strong" \| "intense"	Configured Default	Box shadow style.
size	"xs" \| "small" \| "medium" \| "large" \| "xl"	Configured Default	Size of the input and popover (xs-xl).
outline	boolean	false	Display with outline style.
required	boolean	false	Whether selection is required.
disabled	boolean	false	Disable the input.
label	string	-	Label displayed above or beside the input.
min	string \| Date	-	Minimum selectable date/time (ISO string or Date).
max	string \| Date	-	Maximum selectable date/time (ISO string or Date).
className	string	-	Custom CSS class for the picker.
data-testid	string	"datetime-picker"	Test ID for the component container.