Date Time Range Field

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

Basic usage

You can render your Date Time Range Field with either one input using SingleInputDateTimeRangeField or two inputs using MultiInputDateTimeRangeField as show below.

Check-in

MM/DD/YYYY hh:mm aa

–

Check-out

MM/DD/YYYY hh:mm aa

Check-in - Check-out

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

<MultiInputDateTimeRangeField
  slotProps={{
    textField: ({ position }) => ({
      label: position === 'start' ? 'Check-in' : 'Check-out',
    }),
  }}
/>
<SingleInputDateTimeRangeField label="Check-in - Check-out" />

<MultiInputDateTimeRangeField
  slotProps={{
    textField: ({ position }) => ({
      label: position === 'start' ? 'Check-in' : 'Check-out',
    }),
  }}
/>
<SingleInputDateTimeRangeField label="Check-in - Check-out" />

Press Enter to start editing

Uncontrolled vs. controlled value

The value of the component can be uncontrolled or controlled.

Uncontrolled field

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

Controlled field

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

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

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

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.