The component is built using the
DateField for the keyboard editing and the
DateCalendar for the view editing.
All the documented props of those two components can also be passed to the Date Picker component.
Check-out their documentation page for more information:
The value of the component can be uncontrolled or controlled.
The component is available in four variants:
DesktopDatePickercomponent which works best for mouse devices and large screens. It renders the views inside a popover and allows editing values directly inside the field.
MobileDatePickercomponent which works best for touch devices and small screens. It renders the view inside a modal and does not allow editing values directly inside the field.
DatePickercomponent which renders
MobileDatePickerdepending on the device it runs on.
StaticDatePickercomponent which renders without the popover/modal and field.
Sun, Apr 17
By default, the
DatePicker component renders the desktop version if the media query
@media (pointer: fine) matches.
This can be customized with the
The component can be disabled or read-only.
The component supports three views:
By default, the
year views are enabled.
views prop to change this behavior:
By default, the component renders the
day view on mount.
openTo prop to change this behavior:
By default, the Date Picker component automatically sets the orientation based on the
You can force a specific orientation using the
You can find the documentation in the Validation page.
You can check out multiple examples of how to customize the date pickers and their subcomponents.