Date Picker

The Date Picker component let the user select a date.

Basic usage

Component composition

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:

• Date Field
• Date Calendar

Uncontrolled vs. Controlled

The component can be uncontrolled or controlled

Available components

The component is available in four variants:

• The DesktopNextDatePicker component which works best for mouse devices and large screens. It renders the views inside a popover and allows editing values directly inside the field.

• The MobileNextDatePicker component 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.

• The NextDatePicker component which renders DesktopNextDatePicker or MobileNextDatePicker depending on the device it runs on.

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

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

Form props

The component can be disabled or read-only.

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:

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

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:

Helper text

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

Custom input component

You can customize the rendering of the input with the TextField component slot. Make sure to spread inputProps correctly to the custom input component.

Validation

You can find the documentation in the Validation page.

Localization

You can find the documentation about localization in the Date localization and Component localization.

API

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

• <DesktopNextDatePicker />
• <MobileNextDatePicker />
• <NextDatePicker />
• <StaticNextDatePicker />