Date Time Range Picker

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

Component composition

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.

Uncontrolled vs. controlled value

The value of the component can be uncontrolled or controlled.

Uncontrolled picker

Start

04/17/2022 03:30 PM

–

End

04/21/2022 06:30 PM

Controlled picker

Start

04/17/2022 03:30 PM

–

End

04/21/2022 06:30 PM

<DemoItem label="Uncontrolled picker" component="DateTimeRangePicker">
  <DateTimeRangePicker
    defaultValue={[dayjs('2022-04-17T15:30'), dayjs('2022-04-21T18:30')]}
  />
</DemoItem>
<DemoItem label="Controlled picker" component="DateTimeRangePicker">
  <DateTimeRangePicker
    value={value}
    onChange={(newValue) => setValue(newValue)}
  />
</DemoItem>

<DemoItem label="Uncontrolled picker" component="DateTimeRangePicker">
  <DateTimeRangePicker
    defaultValue={[dayjs('2022-04-17T15:30'), dayjs('2022-04-21T18:30')]}
  />
</DemoItem>
<DemoItem label="Controlled picker" component="DateTimeRangePicker">
  <DateTimeRangePicker
    value={value}
    onChange={(newValue) => setValue(newValue)}
  />
</DemoItem>

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 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 renders DesktopDateTimeRangePicker or MobileDateTimeRangePicker depending on the device it runs on.

Desktop variant

Start

04/17/2022 03:30 PM

–

End

04/21/2022 06:30 PM

Mobile variant

Start

04/17/2022 03:30 PM

–

End

04/21/2022 06:30 PM

Responsive variant

Start

04/17/2022 03:30 PM

–

End

04/21/2022 06:30 PM

<DemoItem label="Desktop variant" component="DesktopDateTimeRangePicker">
  <DesktopDateTimeRangePicker
    defaultValue={[dayjs('2022-04-17T15:30'), dayjs('2022-04-21T18:30')]}
  />
</DemoItem>
<DemoItem label="Mobile variant" component="MobileDateTimeRangePicker">
  <MobileDateTimeRangePicker
    defaultValue={[dayjs('2022-04-17T15:30'), dayjs('2022-04-21T18:30')]}
  />
</DemoItem>
<DemoItem label="Responsive variant" component="DateTimeRangePicker">
  <DateTimeRangePicker
    defaultValue={[dayjs('2022-04-17T15:30'), dayjs('2022-04-21T18:30')]}
  />
</DemoItem>

<DemoItem label="Desktop variant" component="DesktopDateTimeRangePicker">
  <DesktopDateTimeRangePicker
    defaultValue={[dayjs('2022-04-17T15:30'), dayjs('2022-04-21T18:30')]}
  />
</DemoItem>
<DemoItem label="Mobile variant" component="MobileDateTimeRangePicker">
  <MobileDateTimeRangePicker
    defaultValue={[dayjs('2022-04-17T15:30'), dayjs('2022-04-21T18:30')]}
  />
</DemoItem>
<DemoItem label="Responsive variant" component="DateTimeRangePicker">
  <DateTimeRangePicker
    defaultValue={[dayjs('2022-04-17T15:30'), dayjs('2022-04-21T18:30')]}
  />
</DemoItem>

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 can be disabled or read-only.

disabled

Start

MM/DD/YYYY hh:mm aa

–

End

MM/DD/YYYY hh:mm aa

readOnly

Start

MM/DD/YYYY hh:mm aa

–

End

MM/DD/YYYY hh:mm aa

<DemoItem label="disabled" component="DateTimeRangePicker">
  <DateTimeRangePicker disabled />
</DemoItem>
<DemoItem label="readOnly" component="DateTimeRangePicker">
  <DateTimeRangePicker readOnly />
</DemoItem>

<DemoItem label="disabled" component="DateTimeRangePicker">
  <DateTimeRangePicker disabled />
</DemoItem>
<DemoItem label="readOnly" component="DateTimeRangePicker">
  <DateTimeRangePicker readOnly />
</DemoItem>

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

Start

MM/DD/YYYY hh:mm aa

–

End

MM/DD/YYYY hh:mm aa

2 calendars

Start

MM/DD/YYYY hh:mm aa

–

End

MM/DD/YYYY hh:mm aa

3 calendars

Start

MM/DD/YYYY hh:mm aa

–

End

MM/DD/YYYY hh:mm aa

<DemoItem label="1 calendar" component="DateTimeRangePicker">
  <DateTimeRangePicker calendars={1} />
</DemoItem>
<DemoItem label="2 calendars" component="DateTimeRangePicker">
  <DateTimeRangePicker calendars={2} />
</DemoItem>
<DemoItem label="3 calendars" component="DateTimeRangePicker">
  <DateTimeRangePicker calendars={3} />
</DemoItem>

<DemoItem label="1 calendar" component="DateTimeRangePicker">
  <DateTimeRangePicker calendars={1} />
</DemoItem>
<DemoItem label="2 calendars" component="DateTimeRangePicker">
  <DateTimeRangePicker calendars={2} />
</DemoItem>
<DemoItem label="3 calendars" component="DateTimeRangePicker">
  <DateTimeRangePicker calendars={3} />
</DemoItem>

Press Enter to start editing

Use a single input field

You can pass the SingleInputDateTimeRangeField 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

<DateTimeRangePicker slots={{ field: SingleInputDateTimeRangeField }} />

<DateTimeRangePicker slots={{ field: SingleInputDateTimeRangeField }} />

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

Start

MM/DD/YYYY hh aa

–

End

MM/DD/YYYY hh aa

With analog clock

Start

MM/DD/YYYY hh:mm aa

–

End

MM/DD/YYYY hh:mm aa

<DemoItem label="With digital clock" component="DateTimeRangePicker">
  <DateTimeRangePicker
    views={['day', 'hours']}
    timeSteps={{ minutes: 20 }}
    viewRenderers={{ hours: renderDigitalClockTimeView }}
  />
</DemoItem>
<DemoItem label="With analog clock" component="DateTimeRangePicker">
  <DateTimeRangePicker
    viewRenderers={{
      hours: renderTimeViewClock,
      minutes: renderTimeViewClock,
      seconds: renderTimeViewClock,
    }}
  />
</DemoItem>

<DemoItem label="With digital clock" component="DateTimeRangePicker">
  <DateTimeRangePicker
    views={['day', 'hours']}
    timeSteps={{ minutes: 20 }}
    viewRenderers={{ hours: renderDigitalClockTimeView }}
  />
</DemoItem>
<DemoItem label="With analog clock" component="DateTimeRangePicker">
  <DateTimeRangePicker
    viewRenderers={{
      hours: renderTimeViewClock,
      minutes: renderTimeViewClock,
      seconds: renderTimeViewClock,
    }}
  />
</DemoItem>

Press Enter to start editing

Date Time Range Picker

Basic usage

Component composition

Uncontrolled vs. controlled value

Available components

Form props

Customization

Render 1 to 3 months

Use a single input field

Customize the field

Change view renderer

Localization

Validation

API