[component]

Dev Mode
Date & Time field
Description
This form field allows the user to select a date and a time. Used in conjunction with the date & time modal in this pattern.
Date and Time Field
Supporting helper text
Type
Disabled
Usage Guidelines
Do
Use the descriptive text when there’s an error.
Whenever possible, tell a user why a field is disabled.
Don't
Do not remove the descriptive text when there’s an error.
Accessibility
Users should be able to use the tab key to navigate between fields.
Users should be able to use the enter/space keys to open up the date/time modal.
Props
Name
Type
Required
Description
onChange
Required
type
Required
blurOnSubmit
boolean
dateFormat
string
disabled
boolean
errorText
string
helperText
string
iconName
IconName
id
string
onBlur
OnChangeCallback
onEnter
onFocus
onIconClick
onSubmitEditing
onTimezoneChange
Status
Documentation:
Figma:
Web:
iOS:
Android:
Related
Date / time modal
Examples
DateTimeField
DateTimeField with timezone handling
type datetime
Current value: No date selected, TZ: America/Los_Angeles
Formatted: No date selected
DateTimeField without timezone handling
datetime without timezone handling
Current value: No date selected
Formatted: No date selected
Date Time Types
type datetime
type date
/
/
type time
12:00 PM UTC
Datetime:
Date: 2026-09-22T00:00:00.000Z
Time: