Date field

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

Basic usage

Basic date field

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

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

Press Enter to start editing

Uncontrolled vs. Controlled

The component can be controlled or uncontrolled

Uncontrolled field

Controlled field

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

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

Press Enter to start editing

Customize the input props

Custom variant

Disabled

Read only

Clearable

Customize the date format

Dash separator

Dash and white space separator

Full letter month

Date and time format

Time format

Localization

French locale (default format)

French locale (full letter month)

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

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

Press Enter to start editing

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

props.minDate = today

props.maxDate = today

props.disablePast = true

props.disableFuture = true

shouldDisableDate = isWeekend

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>

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

Press Enter to start editing

Headless usage

Using unstyled inputUsing browser input

Date field

Basic usage

Uncontrolled vs. Controlled

Customize the input props

Customize the date format

Localization

Date validation

When is onChange called

Headless usage

When is `onChange` called