productId | title | components | githubLabel | packageName | materialDesign |
---|---|---|---|---|---|
x-date-pickers |
React Date Picker component |
DatePicker, DesktopDatePicker, MobileDatePicker, StaticDatePicker, DateCalendar |
component: DatePicker |
@mui/x-date-pickers |
The Date Picker component lets users select a date.
{{"demo": "BasicDatePicker.js"}}
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.
The value of the component can be uncontrolled or controlled.
{{"demo": "DatePickerValue.js"}}
:::info
- The value is controlled when its parent manages it by providing a
value
prop. - The value is uncontrolled when it is managed by the component's own internal state. This state can be initialized using the
defaultValue
prop.
Learn more about the Controlled and uncontrolled pattern in the React documentation. :::
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 allows editing values directly inside the field. -
The
MobileDatePicker
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
DatePicker
component which rendersDesktopDatePicker
orMobileDatePicker
depending on the device it runs on. -
The
StaticDatePicker
component which renders without the popover/modal and field.
{{"demo": "ResponsiveDatePickers.js"}}
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.
:::warning Responsive components can suffer some inconsistencies between testing environments if media query is not supported. Please refer to this section for solutions. :::
The component can be disabled or read-only.
{{"demo": "FormPropsDatePickers.js"}}
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:
{{"demo": "DatePickerViews.js"}}
By default, the component renders the day
view on mount.
Use the openTo
prop to change this behavior:
{{"demo": "DatePickerOpenTo.js"}}
:::success
The views will appear in the order defined by the views
array.
If the view defined in openTo
is not the first view, then the views before will not be included in the default flow
(for example view the default behaviors, the year
is only accessible when clicking on the toolbar).
:::
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:
{{"demo": "StaticDatePickerLandscape.js", "bg": true}}
:::info You can find more information about the layout customization in the custom layout page. :::
You can show a helper text with the date format accepted:
{{"demo": "HelperText.js"}}
You can enable the clearable behavior:
{{"demo": "ClearableProp.js"}}
See the Date format and localization and Translated components documentation pages for more details.
See the Validation documentation page for more details.
You can check out multiple examples of how to customize the date pickers and their subcomponents.
{{"demo": "CustomizationExamplesNoSnap.js", "hideToolbar": true, "bg": "inline"}}