Skip to content
+

Date Picker

The Date Picker component lets users select a date.

Basic usage

MM/DD/YYYY
Press Enter to start editing

Component composition

The component is built using the DateField for the keyboard editing and the DateCalendar for the view editing.

Check out their documentation page for more information:

You can check the available props of the combined component on the dedicated API page. Some DateField props are not available on the Picker component, you can use slotProps.field to pass them to the field.

Uncontrolled vs. controlled value

The value of the component can be uncontrolled or controlled.

04/17/2022
04/17/2022
Press Enter to start editing

Available components

The component is available in four variants:

  • The DesktopDatePicker component which works best for mouse devices and large screens. It renders the views inside a popover and a field for keyboard editing.

  • The MobileDatePicker component which works best for touch devices and small screens. It renders the view inside a modal and a field for keyboard editing.

  • The DatePicker component which renders DesktopDatePicker or MobileDatePicker depending on the device it runs on.

  • The StaticDatePicker component which renders without the popover/modal and field.

Desktop variant

04/17/2022

Mobile variant

04/17/2022

Responsive variant

04/17/2022

Static variant

Select date

Sun, Apr 17

SMTWTFS
Press Enter to start editing

By default, the DatePicker component renders the desktop version if the media query @media (pointer: fine) matches. This can be customized with the desktopModeMediaQuery prop.

Keyboard Date Picker (legacy)

The current implementation of the Date Picker component replaces the experimental Keyboard Date Picker from Material UI. See the migration documentation for more information.

For accessibility, all Picker components accept keyboard inputs. If your use case only calls for keyboard editing, you can use Field components: the Date Picker component can be edited via input or a calendar, whereas the Date Field can only be edited via input. See the Fields documentation for more details.

Form props

The component supports the disabled, readOnly and name form props:

MM/DD/YYYY
MM/DD/YYYY
MM/DD/YYYY
Press Enter to start editing

Views

The component supports three views: day, month, and year.

By default, the day and year views are enabled. Use the views prop to change this behavior:

MM/DD/YYYY
DD
MMMM YYYY
Press Enter to start editing

By default, the component renders the day view on mount. Use the openTo prop to change this behavior:

MM/DD/YYYY
MM/DD/YYYY
Press Enter to start editing

Order of years

By default, years are displayed in ascending order, chronologically from the minimum year to the maximum. Set the yearsOrder prop to desc to show the years in descending order.

MMMM YYYY
Press Enter to start editing

Landscape orientation

By default, the Date Picker component automatically sets the orientation based on the window.orientation value. You can force a specific orientation using the orientation prop:

Select date

––

SMTWTFS
Press Enter to start editing

Helper text

You can show a helper text with the date format accepted:

MM/DD/YYYY

MM/DD/YYYY

Press Enter to start editing

Clearing the value

You can enable the clearable behavior:

DesktopDatePicker

MM/DD/YYYY

Localization

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

Validation

See the Validation documentation page for more details.

Customization

You can check out multiple examples of how to customize the date pickers and their subcomponents.

Select date

––

#SMTWTFS

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.