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 uncontrolled or controlled

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

Dash separator

Full letter month

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <Stack spacing={{ xs: 4, lg: 2 }} direction={{ xs: 'column', lg: 'row' }}>
    <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"
    />
  </Stack>
</LocalizationProvider>

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <Stack spacing={{ xs: 4, lg: 2 }} direction={{ xs: 'column', lg: 'row' }}>
    <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"
    />
  </Stack>
</LocalizationProvider>

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.