Skip to content
🚀 Material UI and MUI X v9 are out! Check out the announcement blogpost.
+

Time Range Picker

The Time Range Picker lets users select a range of time values.

Basic usage

hh:mm aa – hh:mm aa
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { LocalizationProvider } from '@mui/x-date-pickers-pro/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
import { TimeRangePicker } from '@mui/x-date-pickers-pro/TimeRangePicker';

export default function BasicTimeRangePicker() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['TimeRangePicker']}>
        <TimeRangePicker />
      </DemoContainer>
    </LocalizationProvider>
  );
}

Component composition

The component is built using the SingleInputTimeRangeField for the keyboard editing and the DigitalClock for the view editing.

Check out their documentation page for more information:

Uncontrolled vs. controlled value

The value of the component can be uncontrolled or controlled.

Uncontrolled picker

12:00 AM – 12:00 AM

Controlled picker

03:30 PM – 06:30 PM

Available components

The component is available in three variants:

  • The DesktopTimeRangePicker component which works best for mouse devices and large screens. It renders the views inside a popover and a field for keyboard editing.

  • The MobileTimeRangePicker component which works best for touch devices and small screens. It renders the views inside a modal and a field for keyboard editing.

  • The TimeRangePicker component which renders DesktopTimeRangePicker or MobileTimeRangePicker depending on the device it runs on.

Desktop variant

03:30 PM – 06:30 PM

Mobile variant

03:30 PM – 06:30 PM

Responsive variant

03:30 PM – 06:30 PM

By default, the TimeRangePicker 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 props:

hh:mm aa – hh:mm aa
hh:mm aa – hh:mm aa
hh:mm aa – hh:mm aa
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { TimeRangePicker } from '@mui/x-date-pickers-pro/TimeRangePicker';

export default function FormPropsTimeRangePickers() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['TimeRangePicker', 'TimeRangePicker']}>
        <TimeRangePicker label="disabled" disabled />
        <TimeRangePicker label="readOnly" readOnly />
        <TimeRangePicker label="name" name="startTimeRange" />
      </DemoContainer>
    </LocalizationProvider>
  );
}

Customization

Use a multi input field

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

hh:mm aa

–

hh:mm aa
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { TimeRangePicker } from '@mui/x-date-pickers-pro/TimeRangePicker';
import { MultiInputTimeRangeField } from '@mui/x-date-pickers-pro/MultiInputTimeRangeField';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';

export default function MultiInputTimeRangePicker() {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['MultiInputTimeRangeField']}>
        <TimeRangePicker slots={{ field: MultiInputTimeRangeField }} />
      </DemoContainer>
    </LocalizationProvider>
  );
}

Change end time label

The below demo shows how to add a custom label on the end time view showing the selected time range duration.

It replaces the default digitalClockItem slot component with a different one calculating the duration of the range when selecting the end time.

hh:mm – hh:mm

Customize the field

You can find the documentation in the Custom field page.

Validation

You can find the documentation in the Validation page.

API

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