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

MM/DD/YYYY hh:mm aa

<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

04/17/2022 03:30 PM

Controlled field

04/17/2022 03:30 PM

<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

04/17/2022 03:30 pm

Format without meridiem

04/17/2022 15:30

Localized format with full letter month

April 17, 2022 03:30 PM

<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 />