Date Field

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

Basic usage

Basic date field

<DateField label="Basic date field" />

<DateField label="Basic date field" />

Press Enter to start editing

Uncontrolled vs. controlled value

The value of the component can be uncontrolled or controlled.

Uncontrolled field

Controlled field

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

<DateField label="Uncontrolled field" defaultValue={dayjs('2022-04-17')} />
<DateField
  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 format

Dash separator

Full letter month

<DateField
  label="Dash separator"
  defaultValue={dayjs('2022-04-17')}
  format="MM-DD-YYYY"
/>
<DateField
  label="Full letter month"
  defaultValue={dayjs('2022-04-17')}
  format="LL"
/>

<DateField
  label="Dash separator"
  defaultValue={dayjs('2022-04-17')}
  format="MM-DD-YYYY"
/>
<DateField
  label="Full letter month"
  defaultValue={dayjs('2022-04-17')}
  format="LL"
/>

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.

<DateField />