Skip to content
Edit this page

Date field

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

Basic usage

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

Uncontrolled vs. Controlled

The component can be controlled or uncontrolled

<LocalizationProvider dateAdapter={AdapterDateFns}>
  <Stack spacing={2} direction="row">
    <DateField label="Uncontrolled date field" defaultValue={new Date()} />
    <DateField
      label="Controlled date field"
      value={value}
      onChange={(newValue) => setValue(newValue)}
    />
  </Stack>
</LocalizationProvider>

Customize the input props

Customize the date format

Localization

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: 09/02/2022

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

Headless usage