productId | title | components | githubLabel | packageName | materialDesign |
---|---|---|---|---|---|
x-date-pickers |
React Date Time Range Picker component |
DateTimeRangePicker, DesktopDateTimeRangePicker, MobileDateTimeRangePicker, DateRangeCalendar, DateRangePickerDay, DigitalClock, MultiSectionDigitalClock, DateTimeRangePickerTabs, DateTimeRangePickerToolbar |
component: DateTimeRangePicker |
@mui/x-date-pickers-pro |
The Date Time Range Picker lets the user select a range of dates with an explicit starting and ending time.
{{"demo": "BasicDateTimeRangePicker.js"}}
The component is built using the MultiInputDateTimeRangeField
for the keyboard editing, the DateRangeCalendar
for the date view editing and DigitalClock
for the time 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 MultiInputDateTimeRangeField 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": "DateTimeRangePickerValue.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 three variants:
-
The
DesktopDateTimeRangePicker
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
MobileDateTimeRangePicker
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
DateTimeRangePicker
component which rendersDesktopDateTimeRangePicker
orMobileDateTimeRangePicker
depending on the device it runs on.
{{"demo": "ResponsiveDateTimeRangePickers.js"}}
By default, the DateTimeRangePicker
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": "FormPropsDateTimeRangePickers.js"}}
You can render up to 3 months at the same time using the calendars
prop.
:::info This prop will be ignored on the mobile picker. :::
{{"demo": "DateTimeRangePickerCalendarProp.js"}}
You can pass the SingleInputDateTimeRangeField
component to the Date Time Range Picker to use it for keyboard editing:
{{"demo": "SingleInputDateTimeRangePicker.js"}}
:::info You can find more information in a dedicated documentation page section. :::
You can find the documentation in the Custom field page.
You can pass a different view renderer to the Date Time Range Picker to customize the views.
{{"demo": "DateTimeRangePickerViewRenderer.js"}}
See the Date format and localization and Translated components documentation pages for more details.
See the Validation documentation page for more details.