Date Time Field

The Date Time Field lets the user select a date and a time with the keyboard.

Basic usage

Basic date time field

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <DateTimeField label="Basic date time field" sx={{ width: 300 }} />
</LocalizationProvider>

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <DateTimeField label="Basic date time field" sx={{ width: 300 }} />
</LocalizationProvider>

Press Enter to start editing

The component can be uncontrolled or controlled

Uncontrolled field

Controlled field

Format with meridiem

Format without meridiem

Localized format with full letter month

Use the LocalizationProvider to change the date-library locale used in the date time field.

See the documentation page validation documentation page for more details.