DateTimeInput

A combined date and time input with calendar popover and time fields.

Examples

Default

Meeting

Meeting date

Choose Meeting date

Meeting time

<DateTimeInput
  label="Meeting"
  value={Temporal.PlainDateTime.from('2026-05-21T09:00')}
/>

Empty

Meeting

Meeting date

Choose Meeting date

Meeting time

<DateTimeInput label="Meeting" />

With Seconds

Meeting

Meeting date

Choose Meeting date

Meeting time

<DateTimeInput
  label="Meeting"
  hasSeconds
  value={Temporal.PlainDateTime.from('2026-05-21T09:30:45')}
/>

Fifteen Minute Step

Meeting

Meeting date

Choose Meeting date

Meeting time

<DateTimeInput
  label="Meeting"
  step={900}
  value={Temporal.PlainDateTime.from('2026-05-21T09:30')}
/>

With Constraints

Meeting

Meeting date

Choose Meeting date

Meeting time

<DateTimeInput
  label="Meeting"
  min={Temporal.PlainDateTime.from('2026-05-01T08:00')}
  max={Temporal.PlainDateTime.from('2026-05-31T18:00')}
  value={Temporal.PlainDateTime.from('2026-05-15T12:00')}
/>

Disabled

Meeting

Meeting date

Choose Meeting date

Meeting time

<DateTimeInput
  label="Meeting"
  isDisabled
  value={Temporal.PlainDateTime.from('2026-05-21T09:00')}
/>

Loading

Meeting

Meeting date

Choose Meeting date

Meeting time

<DateTimeInput
  label="Meeting"
  isLoading
  value={Temporal.PlainDateTime.from('2026-05-21T09:00')}
/>

Error

Meeting

Meeting date

Choose Meeting date

Meeting time

Please select a valid date and time.

<DateTimeInput
  label="Meeting"
  status={{message: 'Please select a valid date and time.', type: 'error'}}
  value={Temporal.PlainDateTime.from('2026-05-21T09:00')}
/>

Small

Meeting

Meeting date

Choose Meeting date

Meeting time

<DateTimeInput
  label="Meeting"
  size="sm"
  value={Temporal.PlainDateTime.from('2026-05-21T09:00')}
/>

Sizes

Small

Small date

Choose Small date

Small time

Medium

Medium date

Choose Medium date

Medium time

Large

Large date

Choose Large date

Large time

function DateTimeStory(args: DateTimeInputProps): React.JSX.Element {
  const [value, setValue] = useState<PlainDateTime | null>(args.value);
  return <DateTimeInput {...args} onChange={setValue} value={value} />;
}

<div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
  <DateTimeStory
    label="Small"
    onChange={() => {}}
    size="sm"
    value={Temporal.PlainDateTime.from('2026-05-21T09:00')}
  />
  <DateTimeStory
    label="Medium"
    onChange={() => {}}
    size="md"
    value={Temporal.PlainDateTime.from('2026-05-21T09:00')}
  />
  <DateTimeStory
    label="Large"
    onChange={() => {}}
    size="lg"
    value={Temporal.PlainDateTime.from('2026-05-21T09:00')}
  />
</div>

Required

Meeting · Required

Meeting date

Choose Meeting date

Meeting time

<DateTimeInput
  label="Meeting"
  isRequired
  value={Temporal.PlainDateTime.from('2026-05-21T09:00')}
/>

Optional

Meeting · Optional

Meeting date

Choose Meeting date

Meeting time

<DateTimeInput
  label="Meeting"
  isOptional
  value={Temporal.PlainDateTime.from('2026-05-21T09:00')}
/>

Hidden Label

Meeting

Meeting date

Choose Meeting date

Meeting time

<DateTimeInput
  label="Meeting"
  isLabelHidden
  value={Temporal.PlainDateTime.from('2026-05-21T09:00')}
/>

With Label Tooltip

Meeting

Select the date and time for the meeting.

Meeting date

Choose Meeting date

Meeting time

<DateTimeInput
  label="Meeting"
  labelTooltip="Select the date and time for the meeting."
  value={Temporal.PlainDateTime.from('2026-05-21T09:00')}
/>

With Description

MeetingChoose a date and time during business hours.

Meeting date

Choose Meeting date

Meeting time

<DateTimeInput
  label="Meeting"
  description="Choose a date and time during business hours."
  value={Temporal.PlainDateTime.from('2026-05-21T09:00')}
/>

Iso Format

Meeting

Meeting date

Choose Meeting date

Meeting time

<DateTimeInput
  label="Meeting"
  format="iso"
  value={Temporal.PlainDateTime.from('2026-01-15T09:00')}
/>

Read Only

Meeting

Meeting date

Choose Meeting date

Meeting time

<DateTimeInput
  label="Meeting"
  isReadOnly
  value={Temporal.PlainDateTime.from('2026-05-21T09:00')}
/>

API

DateTimeInput

A combined date and time input with calendar popover and time fields.

When isOptional: false, isRequired: false

Prop	Type	Default	Description
className	string	—	Additional CSS class names applied to the root element.
data-testid	string	—	Test ID applied to the root element.
getIsDateDisabled	(date: PlainDate) => boolean	—	Returns true for dates that should be disabled.
description	ReactNode	—	Supporting text rendered below the label.
format	DateFormat	'long'	How the committed date is displayed in the date field. Accepts a named preset — 'long' ("January 15, 2026"), 'short' ("Jan 15, 2026"), or 'iso' ("2026-01-15") — or a function receiving the selected date.
hasSeconds	boolean	false	Whether to show the seconds field in the time input.
isDisabled	boolean	false	Whether the input is disabled.
isLabelHidden	boolean	false	Whether to visually hide the label.
isLoading	boolean	false	Whether the input is in a loading state.
isReadOnly	boolean	false	Whether both values are displayed without allowing focus or interaction.
label*	string	—	Field label text.
labelEnd	ReactNode	—	Content shown at the end of the label row, such as a link. It renders outside the label, so it does not focus the control or change its accessible name. It stays visible when isLabelHidden is true.
labelIcon	IconComponent	—	Icon shown before the label.
labelTooltip	ReactNode	—	Tooltip content shown next to the label.
max	PlainDateTime	—	Maximum selectable date-time.
min	PlainDateTime	—	Minimum selectable date-time.
onChange*	(value: PlainDateTime | null) => void	—	Called when the selected date-time changes.
ref	Ref<HTMLInputElement>	—	Ref forwarded to the date input element.
size	"sm" | "md" | "lg"	'md'	Visual size of the inputs.
status	InputStatus	—	Validation status displayed below the input.
step	number	—	Step increment in seconds for the time input and its picker.
style	CSSProperties	—	Inline styles applied to the root element.
value*	PlainDateTime | null	—	Currently selected date-time. Pass null for an empty input.
isOptional	false	—
isRequired	false	—

When isOptional: true, isRequired: false

Prop	Type	Default	Description
className	string	—	Additional CSS class names applied to the root element.
data-testid	string	—	Test ID applied to the root element.
getIsDateDisabled	(date: PlainDate) => boolean	—	Returns true for dates that should be disabled.
description	ReactNode	—	Supporting text rendered below the label.
format	DateFormat	'long'	How the committed date is displayed in the date field. Accepts a named preset — 'long' ("January 15, 2026"), 'short' ("Jan 15, 2026"), or 'iso' ("2026-01-15") — or a function receiving the selected date.
hasSeconds	boolean	false	Whether to show the seconds field in the time input.
isDisabled	boolean	false	Whether the input is disabled.
isLabelHidden	boolean	false	Whether to visually hide the label.
isLoading	boolean	false	Whether the input is in a loading state.
isReadOnly	boolean	false	Whether both values are displayed without allowing focus or interaction.
label*	string	—	Field label text.
labelEnd	ReactNode	—	Content shown at the end of the label row, such as a link. It renders outside the label, so it does not focus the control or change its accessible name. It stays visible when isLabelHidden is true.
labelIcon	IconComponent	—	Icon shown before the label.
labelTooltip	ReactNode	—	Tooltip content shown next to the label.
max	PlainDateTime	—	Maximum selectable date-time.
min	PlainDateTime	—	Minimum selectable date-time.
onChange*	(value: PlainDateTime | null) => void	—	Called when the selected date-time changes.
ref	Ref<HTMLInputElement>	—	Ref forwarded to the date input element.
size	"sm" | "md" | "lg"	'md'	Visual size of the inputs.
status	InputStatus	—	Validation status displayed below the input.
step	number	—	Step increment in seconds for the time input and its picker.
style	CSSProperties	—	Inline styles applied to the root element.
value*	PlainDateTime | null	—	Currently selected date-time. Pass null for an empty input.
isOptional*	true	—
isRequired	false	—

When isOptional: false, isRequired: true

Prop	Type	Default	Description
className	string	—	Additional CSS class names applied to the root element.
data-testid	string	—	Test ID applied to the root element.
getIsDateDisabled	(date: PlainDate) => boolean	—	Returns true for dates that should be disabled.
description	ReactNode	—	Supporting text rendered below the label.
format	DateFormat	'long'	How the committed date is displayed in the date field. Accepts a named preset — 'long' ("January 15, 2026"), 'short' ("Jan 15, 2026"), or 'iso' ("2026-01-15") — or a function receiving the selected date.
hasSeconds	boolean	false	Whether to show the seconds field in the time input.
isDisabled	boolean	false	Whether the input is disabled.
isLabelHidden	boolean	false	Whether to visually hide the label.
isLoading	boolean	false	Whether the input is in a loading state.
isReadOnly	boolean	false	Whether both values are displayed without allowing focus or interaction.
label*	string	—	Field label text.
labelEnd	ReactNode	—	Content shown at the end of the label row, such as a link. It renders outside the label, so it does not focus the control or change its accessible name. It stays visible when isLabelHidden is true.
labelIcon	IconComponent	—	Icon shown before the label.
labelTooltip	ReactNode	—	Tooltip content shown next to the label.
max	PlainDateTime	—	Maximum selectable date-time.
min	PlainDateTime	—	Minimum selectable date-time.
onChange*	(value: PlainDateTime | null) => void	—	Called when the selected date-time changes.
ref	Ref<HTMLInputElement>	—	Ref forwarded to the date input element.
size	"sm" | "md" | "lg"	'md'	Visual size of the inputs.
status	InputStatus	—	Validation status displayed below the input.
step	number	—	Step increment in seconds for the time input and its picker.
style	CSSProperties	—	Inline styles applied to the root element.
value*	PlainDateTime | null	—	Currently selected date-time. Pass null for an empty input.
isOptional	false	—
isRequired*	true	—