Skip to content

MultiInputDateTimeRangeField API

API reference docs for the React MultiInputDateTimeRangeField component. Learn about the props, CSS, and other APIs of this exported module.

Demos

For examples and details on the usage of this React component, visit the component demo pages:

Import

import { MultiInputDateTimeRangeField } from '@mui/x-date-pickers-pro/MultiInputDateTimeRangeField';
// or
import { MultiInputDateTimeRangeField } from '@mui/x-date-pickers-pro';
You can learn about the difference by reading this guide on minimizing bundle size.

Component name

The name MuiMultiInputDateTimeRangeField can be used when providing default props or style overrides in the theme.

Props

NameTypeDefaultDescription
ampmbool`utils.is12HourCycleInCurrentLocale()`
12h/24h view for hour selection clock.
componentsobject{}
Overridable components.
componentsPropsobject{}
The props used for each component slot.
defaultValueArray<any>
The default value. Use when the component is not controlled.
direction'column-reverse'
| 'column'
| 'row-reverse'
| 'row'
| Array<'column-reverse'
| 'column'
| 'row-reverse'
| 'row'>
| object
'column'
Defines the flex-direction style property. It is applied for all screen sizes.
disabledboolfalse
If true, the component is disabled.
disableFutureboolfalse
If true, disable values after the current date for date components, time for time components and both for date time components.
disableIgnoringDatePartForTimeValidationboolfalse
Do not ignore date part when validating min/max time.
disablePastboolfalse
If true, disable values before the current date for date components, time for time components and both for date time components.
dividernode
Add an element between each child.
formatstring
Format of the date when rendered in the input(s).
formatDensity'dense'
| 'spacious'
"dense"
Density of the format when rendered in the input. Setting formatDensity to "spacious" will add a space before and after each /, - and . character.
maxDateany
Maximal selectable date.
maxDateTimeany
Maximal selectable moment of time with binding to date, to set max time in each day use maxTime.
maxTimeany
Maximal selectable time. The date part of the object will be ignored unless props.disableIgnoringDatePartForTimeValidation === true.
minDateany
Minimal selectable date.
minDateTimeany
Minimal selectable moment of time with binding to date, to set min time in each day use minTime.
minTimeany
Minimal selectable time. The date part of the object will be ignored unless props.disableIgnoringDatePartForTimeValidation === true.
minutesStepnumber1
Step over minutes.
onChangefunc
Callback fired when the value changes.

Signature:
function(value: TValue, context: FieldChangeHandlerContext<TError>) => void
value: The new value.
context: The context containing the validation result of the current value.
onErrorfunc
Callback fired when the error associated to the current value changes.

Signature:
function(error: TError, value: TValue) => void
error: The new error.
value: The value associated to the error.
onSelectedSectionsChangefunc
Callback fired when the selected sections change.

Signature:
function(newValue: FieldSelectedSections) => void
newValue: The new selected sections.
readOnlyboolfalse
It prevents the user from changing the value of the field (not from interacting with the field).
selectedSections'all'
| 'day'
| 'hours'
| 'meridiem'
| 'minutes'
| 'month'
| 'seconds'
| 'weekDay'
| 'year'
| number
| { endIndex: number, startIndex: number }
The currently selected sections. This prop accept four formats: 1. If a number is provided, the section at this index will be selected. 2. If an object with a startIndex and endIndex properties are provided, the sections between those two indexes will be selected. 3. If a string of type FieldSectionType is provided, the first section with that name will be selected. 4. If null is provided, no section will be selected If not provided, the selected sections will be handled internally.
shouldDisableClockfunc
Disable specific clock time.

Signature:
function(clockValue: number, view: TimeView) => boolean
clockValue: The value to check.
view: The clock type of the timeValue.
returns (boolean): If true the time will be disabled.
shouldDisableDatefunc
Disable specific date.

Signature:
function(day: TDate, position: string) => boolean
day: The date to test.
position: The date to test, 'start' or 'end'.
returns (boolean): Returns true if the date should be disabled.
shouldDisableTimefunc
Disable specific time.

Signature:
function(value: TDate, view: TimeView) => boolean
value: The value to check.
view: The clock type of the timeValue.
returns (boolean): If true the time will be disabled.
shouldRespectLeadingZerosbool`false`
If true, the format will respect the leading zeroes (e.g: on dayjs, the format M/D/YYYY will render 8/16/2018) If false, the format will always add leading zeroes (e.g: on dayjs, the format M/D/YYYY will render 08/16/2018)
Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (e.g: "DD"), so shouldRespectLeadingZeros={true} might lead to inconsistencies when using AdapterLuxon.
Warning n°2: When shouldRespectLeadingZeros={true}, the field will add an invisible character on the sections containing a single digit to make sure onChange is fired. If you need to get the clean value from the input, you can remove this character using input.value.replace(/\u200e/g, '').
Warning n°3: When used in strict mode, dayjs and moment require to respect the leading zeros. This mean that when using shouldRespectLeadingZeros={false}, if you retrieve the value directly from the input (not listening to onChange) and your format contains tokens without leading zeros, the value will not be parsed by your library.
slotPropsobject{}
The props used for each component slot.
slotsobject{}
Overridable component slots.
spacingArray<number
| string>
| number
| object
| string
0
Defines the space between immediate children.
sxArray<func
| object
| bool>
| func
| object
The system prop, which allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.
useFlexGapboolfalse
If true, the CSS flexbox gap is used instead of applying margin to children.
While CSS gap removes the known limitations, it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
To enable this flag globally, follow the theme's default props configuration.
valueArray<any>
The selected value. Used when the component is controlled.

Slots

NameTypeDefaultDescription
RootelementTypeMultiInputDateTimeRangeFieldRoot
Element rendered at the root.
SeparatorelementTypeMultiInputDateTimeRangeFieldSeparator
Element rendered between the two inputs.
TextFieldelementTypeTextField from '@mui/material'
Form control with an input to render a date and time. It is rendered twice: once for the start date time and once for the end date time. Receives the same props as @mui/material/TextField.
The component cannot hold a ref.