The date picker let the user select a date.
Date pickers are displayed with:
- Dialogs on mobile
- Text field dropdowns on desktop
The date picker is rendered as a modal dialog on mobile, and a textbox with a popup on desktop.
It's possible to render any date picker without the modal/popover and text field. This can be helpful when building custom popover/modal containers.
The date picker component is designed and optimized for the device it runs on.
MobileDatePickercomponent works best for touch devices and small screens.
DesktopDatePickercomponent works best for mouse devices and large screens.
By default, the
DatePicker component renders the desktop version if the media query
@media (pointer: fine) matches.
This can be customized with the
There are certain caveats when testing pickers, please refer to this section for more information.
LocalizationProvider to change the date-library locale that is used to render the date picker.
See the documentation page about localization for more details.
Jalali calendar system
date-fns-jalali and use
@date-io/date-fns-jalali adapter to support Jalali calendar.
It's possible to combine
date selection views. Views will appear in the order they're included in the
For ease of use, the date picker will automatically change the layout between portrait and landscape by subscription to the
window.orientation change. You can force a specific layout using the
Thu, Apr 7
Some lower-level sub-components (
YearPicker) are also exported. These are rendered without a wrapper or outer logic (masked input, date values parsing and validation, etc.).
Custom input component
You can customize the rendering of the input with the
renderInput prop. Make sure to spread
inputProps correctly to the custom input component.
Customized day rendering
The displayed days are customizable with the
renderDay function prop.
You can take advantage of the PickersDay component.
Sometimes it may be necessary to display additional info right in the calendar. Here's an example of prefetching and displaying server-side data using the
See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.