Skip to content
+

Date Time Range Picker

The Date Time Range Picker lets the user select a range of dates with an explicit starting and ending time.

Basic usage

MM/DD/YYYY hh:mm aa – MM/DD/YYYY hh:mm aa
Press Enter to start editing

Component composition

The component is built using the SingleInputDateTimeRangeField 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 SingleInputDateTimeRangeField props are not available on the Picker component, you can use slotProps.field to pass them to the field.

Uncontrolled vs. controlled value

The value of the component can be uncontrolled or controlled.

Uncontrolled picker

04/17/2022 03:30 PM – 04/21/2022 06:30 PM

Controlled picker

04/17/2022 03:30 PM – 04/21/2022 06:30 PM
Press Enter to start editing

Available components

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 a field for keyboard editing.

  • The MobileDateTimeRangePicker component which works best for touch devices and small screens. It renders the view inside a modal and does not let users edit values with the keyboard in the field.

  • The DateTimeRangePicker component which renders DesktopDateTimeRangePicker or MobileDateTimeRangePicker depending on the device it runs on.

Desktop variant

04/17/2022 03:30 PM – 04/21/2022 06:30 PM

Mobile variant

04/17/2022 03:30 PM – 04/21/2022 06:30 PM

Responsive variant

04/17/2022 03:30 PM – 04/21/2022 06:30 PM
Press Enter to start editing

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.

Form props

The component supports the disabled, readOnly and name form props:

MM/DD/YYYY hh:mm aa – MM/DD/YYYY hh:mm aa
MM/DD/YYYY hh:mm aa – MM/DD/YYYY hh:mm aa
MM/DD/YYYY hh:mm aa – MM/DD/YYYY hh:mm aa
Press Enter to start editing

Customization

Render 1 to 3 months

You can render up to 3 months at the same time using the calendars prop.

1 calendar

MM/DD/YYYY hh:mm aa – MM/DD/YYYY hh:mm aa

2 calendars

MM/DD/YYYY hh:mm aa – MM/DD/YYYY hh:mm aa

3 calendars

MM/DD/YYYY hh:mm aa – MM/DD/YYYY hh:mm aa
Press Enter to start editing

Use a multi input field

You can pass the MultiInputDateTimeRangeField component to the Date Time Range Picker to use it for keyboard editing:

MM/DD/YYYY hh:mm aa

–

MM/DD/YYYY hh:mm aa
Press Enter to start editing

Customize the field

You can find the documentation in the Custom field page.

Change view renderer

You can pass a different view renderer to the Date Time Range Picker to customize the views.

With digital clock

MM/DD/YYYY hh aa – MM/DD/YYYY hh aa

With analog clock

MM/DD/YYYY hh:mm aa – MM/DD/YYYY hh:mm aa
Press Enter to start editing

Localization

See the Date format and localization and Translated components documentation pages for more details.

Validation

See the Validation documentation page for more details.

API

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