Date Time Field

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

Basic usage

Basic date time field

<DateTimeField label="Basic date time field" />

<DateTimeField label="Basic date time field" />

Press Enter to start editing

Uncontrolled vs. controlled value

The value of the component can be uncontrolled or controlled.

Uncontrolled field

Controlled field

<DateTimeField
  label="Uncontrolled field"
  defaultValue={dayjs('2022-04-17T15:30')}
/>
<DateTimeField
  label="Controlled field"
  value={value}
  onChange={(newValue) => setValue(newValue)}
/>

<DateTimeField
  label="Uncontrolled field"
  defaultValue={dayjs('2022-04-17T15:30')}
/>
<DateTimeField
  label="Controlled field"
  value={value}
  onChange={(newValue) => setValue(newValue)}
/>

Press Enter to start editing

Localization

See the Date format and localization and Translated components documentation pages for more details.

Customize the date time format

Format with meridiem

Format without meridiem

Localized format with full letter month

<DateTimeField
  label="Format with meridiem"
  defaultValue={dayjs('2022-04-17T15:30')}
  format="L hh:mm a"
/>
<DateTimeField
  label="Format without meridiem"
  defaultValue={dayjs('2022-04-17T15:30')}
  format="L HH:mm"
/>
<DateTimeField
  label="Localized format with full letter month"
  defaultValue={dayjs('2022-04-17T15:30')}
  format="LLL"
/>

<DateTimeField
  label="Format with meridiem"
  defaultValue={dayjs('2022-04-17T15:30')}
  format="L hh:mm a"
/>
<DateTimeField
  label="Format without meridiem"
  defaultValue={dayjs('2022-04-17T15:30')}
  format="L HH:mm"
/>
<DateTimeField
  label="Localized format with full letter month"
  defaultValue={dayjs('2022-04-17T15:30')}
  format="LLL"
/>

Press Enter to start editing

Validation

See the Validation documentation page for more details.

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

<DateTimeField />