Date Field

The Date Field component lets the user 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

Customize the date format

Dash separator

Full letter month

<DateField
  label="Dash separator"
  value={value}
  onChange={(newValue) => setValue(newValue)}
  format="MM-DD-YYYY"
/>
<DateField
  label="Full letter month"
  value={value}
  onChange={(newValue) => setValue(newValue)}
  format="LL"
/>

<DateField
  label="Dash separator"
  value={value}
  onChange={(newValue) => setValue(newValue)}
  format="MM-DD-YYYY"
/>
<DateField
  label="Full letter month"
  value={value}
  onChange={(newValue) => setValue(newValue)}
  format="LL"
/>

Press Enter to start editing

Localization

Use the LocalizationProvider to change the date-library locale used in the time field. See the localization documentation page for more details.

Validation

See the documentation page 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 />