Interface DateRangePickerProps

interface DateRangePickerProps {
    autoFocus?: boolean;
    calendars?: 1 | 2 | 3;
    className?: string;
    closeOnSelect?: boolean;
    components?: DateRangePickerSlotsComponents<Date>;
    componentsProps?: DateRangePickerSlotsComponentsProps<Date>;
    currentMonthCalendarPosition?: 1 | 2 | 3;
    customTranslation?: DeepPartial<Translation>;
    dayOfWeekFormatter?: ((day: string, date: Date) => string);
    defaultCalendarMonth?: Date;
    defaultRangePosition?: RangePosition;
    defaultValue?: DateRange<Date>;
    desktopModeMediaQuery?: string;
    disableAutoMonthSwitching?: boolean;
    disabled?: boolean;
    disableDragEditing?: boolean;
    disableFuture?: boolean;
    disableHighlightToday?: boolean;
    disableOpenPicker?: boolean;
    disablePast?: boolean;
    displayWeekNumber?: boolean;
    fixedWeekNumber?: number;
    format?: string;
    formatDensity?: "dense" | "spacious";
    inputRef?: Ref<HTMLInputElement>;
    label?: ReactNode;
    lang: "sv" | "en";
    loading?: boolean;
    localeText?: PickersInputComponentLocaleText<Date>;
    maxDate?: Date;
    minDate?: Date;
    name?: string;
    onAccept?: ((value: DateRange<Date>) => void);
    onChange?: ((value: DateRange<Date>, context: PickerChangeHandlerContext<DateRangeValidationError>) => void);
    onClose?: (() => void);
    onError?: ((error: DateRangeValidationError, value: DateRange<Date>) => void);
    onMonthChange?: ((month: Date) => void);
    onOpen?: (() => void);
    onRangePositionChange?: ((rangePosition: RangePosition) => void);
    onSelectedSectionsChange?: ((newValue: FieldSelectedSections) => void);
    open?: boolean;
    rangePosition?: RangePosition;
    readOnly?: boolean;
    reduceAnimations?: boolean;
    referenceDate?: Date;
    renderLoading?: (() => ReactNode);
    selectedSections?: FieldSelectedSections;
    shouldDisableDate?: ((day: Date, position: "start" | "end") => boolean);
    showDaysOutsideCurrentMonth?: boolean;
    slotProps?: DateRangePickerSlotsComponentsProps<Date>;
    slots?: UncapitalizeObjectKeys<DateRangePickerSlotsComponents<Date>>;
    sx?: SxProps<Theme>;
    timezone?: string;
    value?: DateRange<Date>;
    viewRenderers?: Partial<PickerViewRendererLookup<DateRange<Date>, "day", DateRangeViewRendererProps<Date, "day">, {}>>;
}

Hierarchy

  • DateRangePickerProps<Date>
    • DateRangePickerProps

Properties

autoFocus? calendars? className? closeOnSelect? components? componentsProps? currentMonthCalendarPosition? customTranslation? dayOfWeekFormatter? defaultCalendarMonth? defaultRangePosition? defaultValue? desktopModeMediaQuery? disableAutoMonthSwitching? disabled? disableDragEditing? disableFuture? disableHighlightToday? disableOpenPicker? disablePast? displayWeekNumber? fixedWeekNumber? format? formatDensity? inputRef? label? lang loading? localeText? maxDate? minDate? name? onAccept? onChange? onClose? onError? onMonthChange? onOpen? onRangePositionChange? onSelectedSectionsChange? open? rangePosition? readOnly? reduceAnimations? referenceDate? renderLoading? selectedSections? shouldDisableDate? showDaysOutsideCurrentMonth? slotProps? slots? sx? timezone? value? viewRenderers?

Properties

OptionalautoFocus

autoFocus?: boolean

If true, the main element is focused during the first mount. This main element is:

  • the element chosen by the visible view if any (i.e: the selected day on the day view).
  • the input element if there is a field rendered.

Optionalcalendars

calendars?: 1 | 2 | 3

The number of calendars to render on desktop.

Default

2

OptionalclassName

className?: string

Class name applied to the root element.

OptionalcloseOnSelect

closeOnSelect?: boolean

If true, the popover or modal will close after submitting the full date.

Default

true for desktop, false for mobile (based on the chosen wrapper and desktopModeMediaQuery prop).

Optionalcomponents

components?: DateRangePickerSlotsComponents<Date>

Overridable components.

Default

{}

Deprecated

Please use slots.

OptionalcomponentsProps

componentsProps?: DateRangePickerSlotsComponentsProps<Date>

The props used for each component slot.

Default

{}

Deprecated

Please use slotProps.

OptionalcurrentMonthCalendarPosition

currentMonthCalendarPosition?: 1 | 2 | 3

Position the current month is rendered in.

Default

1

OptionalcustomTranslation

customTranslation?: DeepPartial<Translation>

Translation object used for screen reader texts.

OptionaldayOfWeekFormatter

dayOfWeekFormatter?: ((day: string, date: Date) => string)

Formats the day of week displayed in the calendar header.

Type declaration

    • (day, date): string

    • Parameters

      • day: string

        The day of week provided by the adapter. Deprecated, will be removed in v7: Use date instead.

      • date: Date

        The date of the day of week provided by the adapter.

      Returns string

      The name to display.

Default

(_day: string, date: TDate) => adapter.format(date, 'weekdayShort').charAt(0).toUpperCase()

OptionaldefaultCalendarMonth

defaultCalendarMonth?: Date

Default calendar month displayed when value={[null, null]}.

Deprecated

Consider using referenceDate instead.

OptionaldefaultRangePosition

defaultRangePosition?: RangePosition

The initial position in the edited date range. Used when the component is not controlled.

Default

'start'

OptionaldefaultValue

defaultValue?: DateRange<Date>

The default value. Used when the component is not controlled.

OptionaldesktopModeMediaQuery

desktopModeMediaQuery?: string

CSS media query when Mobile mode will be changed to Desktop.

Default

'@media (pointer: fine)'

Example

'@media (min-width: 720px)' or theme.breakpoints.up("sm")

OptionaldisableAutoMonthSwitching

disableAutoMonthSwitching?: boolean

If true, after selecting start date calendar will not automatically switch to the month of end date.

Default

false

Optionaldisabled

disabled?: boolean

If true, the picker and text field are disabled.

Default

false

OptionaldisableDragEditing

disableDragEditing?: boolean

If true, editing dates by dragging is disabled.

Default

false

OptionaldisableFuture

disableFuture?: boolean

If true, disable values after the current date for date components, time for time components and both for date time components.

Default

false

OptionaldisableHighlightToday

disableHighlightToday?: boolean

If true, today's date is rendering without highlighting with circle.

Default

false

OptionaldisableOpenPicker

disableOpenPicker?: boolean

If true, the open picker button will not be rendered (renders only the field).

Default

false

OptionaldisablePast

disablePast?: boolean

If true, disable values before the current date for date components, time for time components and both for date time components.

Default

false

OptionaldisplayWeekNumber

displayWeekNumber?: boolean

If true, the week number will be display in the calendar.

OptionalfixedWeekNumber

fixedWeekNumber?: number

Calendar will show more weeks in order to match this value. Put it to 6 for having fix number of week in Gregorian calendars

Default

undefined

Optionalformat

format?: string

Format of the date when rendered in the input(s). Defaults to localized format based on the used views.

OptionalformatDensity

formatDensity?: "dense" | "spacious"

Density of the format when rendered in the input. Setting formatDensity to "spacious" will add a space before and after each /, - and . character.

Default

"dense"

OptionalinputRef

inputRef?: Ref<HTMLInputElement>

Pass a ref to the input element. Ignored if the field has several inputs.

Optionallabel

label?: ReactNode

The label content. Ignored if the field has several inputs.

lang

lang: "sv" | "en"

Optionalloading

loading?: boolean

If true, calls renderLoading instead of rendering the day calendar. Can be used to preload information and show it in calendar.

Default

false

OptionallocaleText

localeText?: PickersInputComponentLocaleText<Date>

Locale for components texts. Allows overriding texts coming from LocalizationProvider and theme.

OptionalmaxDate

maxDate?: Date

Maximal selectable date.

OptionalminDate

minDate?: Date

Minimal selectable date.

Optionalname

name?: string

Name attribute used by the input element in the Field. Ignored if the field has several inputs.

OptionalonAccept

onAccept?: ((value: DateRange<Date>) => void)

Callback fired when the value is accepted.

Type declaration

    • (value): void

    • Parameters

      • value: DateRange<Date>

        The value that was just accepted.

      Returns void

OptionalonChange

onChange?: ((value: DateRange<Date>, context: PickerChangeHandlerContext<DateRangeValidationError>) => void)

Callback fired when the value changes.

Type declaration

    • (value, context): void

    • Parameters

      • value: DateRange<Date>

        The new value.

      • context: PickerChangeHandlerContext<DateRangeValidationError>

        The context containing the validation result of the current value.

      Returns void

OptionalonClose

onClose?: (() => void)

Callback fired when the popup requests to be closed. Use in controlled mode (see open).

OptionalonError

onError?: ((error: DateRangeValidationError, value: DateRange<Date>) => void)

Callback fired when the error associated to the current value changes. If the error has a non-null value, then the TextField will be rendered in error state.

Type declaration

    • (error, value): void

    • Parameters

      • error: DateRangeValidationError

        The new error describing why the current value is not valid.

      • value: DateRange<Date>

        The value associated to the error.

      Returns void

OptionalonMonthChange

onMonthChange?: ((month: Date) => void)

Callback fired on month change.

Type declaration

    • (month): void

    • Parameters

      • month: Date

        The new month.

      Returns void

OptionalonOpen

onOpen?: (() => void)

Callback fired when the popup requests to be opened. Use in controlled mode (see open).

OptionalonRangePositionChange

onRangePositionChange?: ((rangePosition: RangePosition) => void)

Callback fired when the range position changes.

Type declaration

    • (rangePosition): void

    • Parameters

      • rangePosition: RangePosition

        The new range position.

      Returns void

OptionalonSelectedSectionsChange

onSelectedSectionsChange?: ((newValue: FieldSelectedSections) => void)

Callback fired when the selected sections change.

Type declaration

    • (newValue): void

    • Parameters

      • newValue: FieldSelectedSections

        The new selected sections.

      Returns void

Optionalopen

open?: boolean

Control the popup or dialog open state.

Default

false

OptionalrangePosition

rangePosition?: RangePosition

The position in the currently edited date range. Used when the component position is controlled.

OptionalreadOnly

readOnly?: boolean

OptionalreduceAnimations

reduceAnimations?: boolean

If true, disable heavy animations.

Default

@media(prefers-reduced-motion: reduce) || navigator.userAgent matches Android <10 or iOS <13

OptionalreferenceDate

referenceDate?: Date

The date used to generate the new value when both value and defaultValue are empty.

Default

The closest valid date-time using the validation props, except callbacks like shouldDisable<...>.

OptionalrenderLoading

renderLoading?: (() => ReactNode)

Component displaying when passed loading true.

Type declaration

    • (): ReactNode

    • Returns ReactNode

      The node to render when loading.

Default

() => "..."

OptionalselectedSections

selectedSections?: FieldSelectedSections

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.

OptionalshouldDisableDate

shouldDisableDate?: ((day: Date, position: "start" | "end") => boolean)

Disable specific date.

Warning: This function can be called multiple times (e.g. when rendering date calendar, checking if focus can be moved to a certain date, etc.). Expensive computations can impact performance.

Type declaration

    • (day, position): boolean

    • Parameters

      • day: Date

        The date to test.

      • position: "start" | "end"

        The date to test, 'start' or 'end'.

      Returns boolean

      Returns true if the date should be disabled.

OptionalshowDaysOutsideCurrentMonth

showDaysOutsideCurrentMonth?: boolean

If true, days outside the current month are rendered:

  • if fixedWeekNumber is defined, renders days to have the weeks requested.

  • if fixedWeekNumber is not defined, renders day to fill the first and last week of the current month.

  • ignored if calendars equals more than 1 on range pickers.

Default

false

OptionalslotProps

slotProps?: DateRangePickerSlotsComponentsProps<Date>

The props used for each component slot.

Default

{}

Optionalslots

slots?: UncapitalizeObjectKeys<DateRangePickerSlotsComponents<Date>>

Overridable component slots.

Default

{}

Optionalsx

sx?: SxProps<Theme>

The system prop that allows defining system overrides as well as additional CSS styles.

Optionaltimezone

timezone?: string

Choose which timezone to use for the value. Example: "default", "system", "UTC", "America/New_York". If you pass values from other timezones to some props, they will be converted to this timezone before being used.

See

See the timezones documention for more details.

Default

The timezone of the value or defaultValue prop is defined, 'default' otherwise.

Optionalvalue

value?: DateRange<Date>

The selected value. Used when the component is controlled.

OptionalviewRenderers

viewRenderers?: Partial<PickerViewRendererLookup<DateRange<Date>, "day", DateRangeViewRendererProps<Date, "day">, {}>>

Define custom view renderers for each section. If null, the section will only have field editing. If undefined, internally defined view will be the used.

Settings

Member Visibility

On This Page

Properties