Date Field

The Date Field component lets users select a date with the keyboard.

Basic usage

Basic date field

MM/DD/YYYY

import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DateField } from '@mui/x-date-pickers/DateField';

export default function BasicDateField() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateField']}>
        <DateField label="Basic date field" />
      </DemoContainer>
    </LocalizationProvider>
  );
}

Uncontrolled vs. controlled value

The value of the component can be uncontrolled or controlled.

Uncontrolled field

04/17/2022

Controlled field

04/17/2022

import * as React from 'react';
import type { Dayjs } from 'dayjs';
import dayjs from 'dayjs';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DateField } from '@mui/x-date-pickers/DateField';

export default function DateFieldValue() {
  const [value, setValue] = React.useState<Dayjs | null>(dayjs('2022-04-17'));

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateField', 'DateField']}>
        <DateField label="Uncontrolled field" defaultValue={dayjs('2022-04-17')} />
        <DateField
          label="Controlled field"
          value={value}
          onChange={(newValue) => setValue(newValue)}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

Localization

See the Date format and localization and Translated components documentation pages for more details.

Customize the date format

Dash separator

04-17-2022

Full letter month

April 17, 2022

import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import dayjs from 'dayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DateField } from '@mui/x-date-pickers/DateField';

export default function CustomDateFormat() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DateField', 'DateField']}>
        <DateField
          label="Dash separator"
          defaultValue={dayjs('2022-04-17')}
          format="MM-DD-YYYY"
        />
        <DateField
          label="Full letter month"
          defaultValue={dayjs('2022-04-17')}
          format="LL"
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

Validation

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