MultiInputDateTimeRangeField API
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';
Component name
The nameMuiMultiInputDateTimeRangeField
can be used when providing default props or style overrides in the theme.Props
Name | Type | Default | Description |
---|---|---|---|
ampm | bool | `utils.is12HourCycleInCurrentLocale()` | 12h/24h view for hour selection clock. |
components | object | {} | Overrideable components. |
componentsProps | object | {} | The props used for each component slot. |
defaultValue | Array<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. |
disabled | bool | false | If true , the component is disabled. |
disableFuture | bool | false | If true , disable values after the current date for date components, time for time components and both for date time components. |
disableIgnoringDatePartForTimeValidation | bool | false | Do not ignore date part when validating min/max time. |
disablePast | bool | false | If true , disable values before the current date for date components, time for time components and both for date time components. |
divider | node | Add an element between each child. | |
format | string | Format of the date when rendered in the input(s). | |
maxDate | any | Maximal selectable date. | |
maxDateTime | any | Maximal selectable moment of time with binding to date, to set max time in each day use maxTime . | |
maxTime | any | Maximal selectable time. The date part of the object will be ignored unless props.disableIgnoringDatePartForTimeValidation === true . | |
minDate | any | Minimal selectable date. | |
minDateTime | any | Minimal selectable moment of time with binding to date, to set min time in each day use minTime . | |
minTime | any | Minimal selectable time. The date part of the object will be ignored unless props.disableIgnoringDatePartForTimeValidation === true . | |
minutesStep | number | 1 | Step over minutes. |
onChange | func | 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. | |
onError | func | 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. | |
onSelectedSectionsChange | func | Callback fired when the selected sections change. Signature: function(newValue: FieldSelectedSections) => void newValue: The new selected sections. | |
readOnly | bool | false | 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 MuiDateSectionName 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. | |
shouldDisableClock | func | 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. | |
shouldDisableDate | func | 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. | |
shouldDisableTime | func | 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. | |
slotProps | object | {} | The props used for each component slot. |
slots | object | {} | Overrideable component slots. |
spacing | Array<number | string> | number | object | string | 0 | Defines the space between immediate children. |
sx | Array<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. | |
value | Array<any> | The selected value. Used when the component is controlled. |
Slots
Name | Type | Default | Description |
---|---|---|---|
Root | elementType | MultiInputDateTimeRangeFieldRoot | Element rendered at the root. |
Separator | elementType | MultiInputDateTimeRangeFieldSeparator | Element rendered between the two inputs. |
TextField | elementType | TextField 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 . |