Skip to content
Edit this page

Date field

The date field let the user select a date with the keyboard.

Basic usage

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <DateField label="Basic date field" />
</LocalizationProvider>

Uncontrolled vs. Controlled

The component can be controlled or uncontrolled

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <Stack spacing={2} direction="row">
    <DateField label="Uncontrolled field" defaultValue={dayjs('2022-04-07')} />
    <DateField
      label="Controlled field"
      value={value}
      onChange={(newValue) => setValue(newValue)}
    />
  </Stack>
</LocalizationProvider>

Customize the input props

Customize the date format

Localization

<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="fr">
  <Stack spacing={2} sx={(theme) => ({ width: theme.spacing(48) })}>
    <DateField
      label="French locale (default format)"
      value={value}
      onChange={(newValue) => setValue(newValue)}
    />
    <DateField
      label="French locale (full letter month)"
      value={value}
      onChange={(newValue) => setValue(newValue)}
      format="DD MMMM YYYY"
    />
  </Stack>
</LocalizationProvider>

Date validation

The DateField component supports all the date validation props described in the validation page

TODO: Add link to the future standalone validation doc page

TODO: Add time validation examples when supported

When is onChange called

The DateField component has an internal state to update the visible date. It will only call the onChange callback when the modified date is valid.

In the demo below, you can see that the component reacts to an external date update (when pressing "Set to today"). And that when debouncing the state (for instance if you have a server side persistence) do not affect the rendering of the field.

Value outside the field: 04/07/2022

<Typography>
  Value outside the field: {value == null ? 'null' : value.format('L')}
</Typography>
<LocalizationProvider dateAdapter={AdapterDayjs}>
  <DateField
    value={value}
    onChange={(newValue) => debounceSetValue(newValue)}
  />
</LocalizationProvider>
<Button
  onClick={() => setValue(today)}
  disabled={!!value && value.isSame(today)}
>
  Set to today
</Button>

Advanced

Control the selected sections

Use the selectedSections and onSelectedSectionsChange props to control which sections are currently being selected.

This prop accept four formats:

  1. If a number is provided, the section at this index will be selected.
  2. If an object with a startIndex and endIndex properties are provided, the sections between those two indexes will be selected.
  3. If a string of type MuiDateSectionName is provided, the first section with that name will be selected.
  4. If null is provided, no section will be selected

Headless usage