Date Time Picker

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

Usage & Examples

Default

Select date and time

default.tsx

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

Visual variants

Themes

primary

Select date and time

secondary

Select date and time

tertiary

Select date and time

quaternary

Select date and time

States

success

Select date and time

warning

Select date and time

error

Select date and time

info

Select date and time

Sizes

Select date and time

small

Select date and time

medium

Select date and time

large

Select date and time

Variants

solid

Select date and time

outline

Select date and time

glass

Select date and time

Rounding

none

Select date and time

medium

Select date and time

large

Select date and time

Shadows

none

Select date and time

light

Select date and time

strong

Select date and time

visual-variants.tsx

// Themes
<DateTimePicker theme="primary"
    value={value}
    onChange={setValue}
    label="Select date and time"
  />
<DateTimePicker theme="secondary"
    value={value}
    onChange={setValue}
    label="Select date and time"
  />
<DateTimePicker theme="tertiary"
    value={value}
    onChange={setValue}
    label="Select date and time"
  />
<DateTimePicker theme="quaternary"
    value={value}
    onChange={setValue}
    label="Select date and time"
  />

// States
<DateTimePicker state="success"
    value={value}
    onChange={setValue}
    label="Select date and time"
  />
<DateTimePicker state="warning"
    value={value}
    onChange={setValue}
    label="Select date and time"
  />
<DateTimePicker state="error"
    value={value}
    onChange={setValue}
    label="Select date and time"
  />
<DateTimePicker state="info"
    value={value}
    onChange={setValue}
    label="Select date and time"
  />

// Sizes
<DateTimePicker size="xs"
    value={value}
    onChange={setValue}
    label="Select date and time"
  />
<DateTimePicker size="small"
    value={value}
    onChange={setValue}
    label="Select date and time"
  />
<DateTimePicker size="medium"
    value={value}
    onChange={setValue}
    label="Select date and time"
  />
<DateTimePicker size="large"
    value={value}
    onChange={setValue}
    label="Select date and time"
  />

// Variants
<DateTimePicker variant="solid"
    value={value}
    onChange={setValue}
    label="Select date and time"
  />
<DateTimePicker variant="outline"
    value={value}
    onChange={setValue}
    label="Select date and time"
  />
<DateTimePicker variant="glass"
    value={value}
    onChange={setValue}
    label="Select date and time"
  />

// Rounding
<DateTimePicker rounding="none"
    value={value}
    onChange={setValue}
    label="Select date and time"
  />
<DateTimePicker rounding="medium"
    value={value}
    onChange={setValue}
    label="Select date and time"
  />
<DateTimePicker rounding="large"
    value={value}
    onChange={setValue}
    label="Select date and time"
  />

// Shadows
<DateTimePicker shadow="none"
    value={value}
    onChange={setValue}
    label="Select date and time"
  />
<DateTimePicker shadow="light"
    value={value}
    onChange={setValue}
    label="Select date and time"
  />
<DateTimePicker shadow="strong"
    value={value}
    onChange={setValue}
    label="Select date and time"
  />

Interaction states

Disabled

Select date and time

Full width

Select date and time

interaction-states.tsx

// Disabled
<DateTimePicker disabled
    value={value}
    onChange={setValue}
    label="Select date and time"
  />
// Loading
<DateTimePicker loading
    value={value}
    onChange={setValue}
    label="Select date and time"
  />
// Full width
<DateTimePicker fullWidth
    value={value}
    onChange={setValue}
    label="Select date and time"
  />

Props API

Date Time Picker props API
				Default	Description
`aria-describedby`	`string`	No	aria	`—`	Accessible description reference for the input.
`aria-errormessage`	`string`	No	aria	`—`	Accessible error message reference for the input.
`aria-invalid`	`boolean`	No	aria	`—`	Marks the input as invalid. Useful for external validation control.
`aria-label`	`string`	No	aria	`—`	Accessible label for the input when no visible label is present or when an override is needed.
`aria-labelledby`	`string`	No	aria	`—`	Accessible label reference for the input.
`aria-required`	`boolean`	No	aria	`—`	Marks the input as required for assistive technologies.
`autoComplete`	`React.HTMLInputAutoCompleteAttribute`	No	props	`"off"`	Optional autocomplete value.
`buttonClassName`	`string`	No	props	`—`	Additional class name for the picker trigger button.
`className`	`string`	No	styling	`—`	Additional class name for the component root.
`containerClassName`	`string`	No	props	`—`	Additional class name for the outer label/component container.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`defaultValue`	`string`	No	props	`—`	Initial date/time value in YYYY-MM-DDTHH:mm format for uncontrolled usage.