DEVELOPER REFERENCE · v4.0.0

DateRangePicker API

Props, callbacks and methods. Select an underlined type to explore its fields, allowed values and callback arguments.

DateRangePicker54 props3 callbacks0 methods

Props54

DateRangePicker props
Name	Type	Description
`value`Optional	`CalendarDateRange \| undefined`Inspect type	Value to display or edit. The declared type identifies the supported representation; change callbacks describe how edited values are emitted.
`label`Required	`string`	Label content or accessible name for the component, as rendered by this control.
`fromLabel`Required	`string`	Label for the start of a date range.
`toLabel`Required	`string`	Label for the end of a date range.
`openLabel`Required	`string`	Accessible label for the action that opens the picker.
`disabled`Optional	`boolean \| undefined`	Disables user interaction with the control.
`readOnly`Optional	`boolean \| undefined`	Displays the current value while preventing user edits.
`className`Optional	`string \| undefined`	Additional CSS classes applied to the component root.
`dir`Optional	`"rtl" \| "ltr" \| undefined`	Text direction used by the calendar layout.
`translations`Optional	`Partial<CalendarTranslations> \| undefined`Inspect type	Overrides any subset of the exported English calendar translations.
`locale`Optional	`string \| undefined`	Locale identifier or localized label configuration used for formatting and accessible text.
`previewInvalid`Optional	`boolean \| undefined`	Marks the current preview as unavailable without changing selection.
`previewDescription`Optional	`string \| undefined`	Localized explanation, announced politely and linked to invalid preview days.
`presets`Optional	`readonly { readonly label: string; readonly date: ISODateString; }[] \| undefined`Inspect type	Predefined labeled date selections offered as quick actions.
`referenceDate`Optional	`ISODateString \| undefined`Inspect type	Reference ISO date used for Today and relative calendar presentation.
`calendarSystem`Optional	`DisplayCalendarSystem \| undefined`Inspect type	Calendar system used for display; stored values retain the ISO date representation.
`numberOfMonths`Optional	`number \| undefined`	Number of months displayed simultaneously.
`pagedNavigation`Optional	`boolean \| undefined`	Moves by the number of visible months instead of by a single month.
`reverseMonths`Optional	`boolean \| undefined`	Displays simultaneous months in reverse order.
`captionLayout`Optional	`"label" \| "dropdown" \| "dropdown-months" \| "dropdown-years" \| undefined`	Chooses a text caption or month/year selection dropdowns.
`startMonth`Optional	`ISODateString \| undefined`Inspect type	Navigation bounds; unlike minDate/maxDate these do not disable day values.
`endMonth`Optional	`ISODateString \| undefined`Inspect type	Latest month available through navigation; this does not disable individual date values.
`disableNavigation`Optional	`boolean \| undefined`	Disables navigation between calendar months or years.
`showWeekNumber`Optional	`boolean \| undefined`	Displays the week-number column.
`weekNumbering`Optional	`"iso" \| "local" \| undefined`	Uses ISO week numbers or locale-based week numbering.
`formatWeekNumber`Optional	`((week: number) => string) \| undefined`Inspect type	Formats a numeric week number for display.
`footer`Optional	`ComponentChildren`Inspect type	Content rendered in the footer or after the main component content.
`cellSize`Optional	`number \| undefined`	Size of calendar day cells in pixels.
`referenceInstant`Optional	`Date \| undefined`Inspect type	Optional instant used only to resolve Today in the requested zone. ISO date values never shift.
`timeZone`Optional	`string \| undefined`	Time zone used for resolving Today; ISO date values themselves do not shift zones.
`weekStartsOn`Optional	`CalendarWeekStart \| undefined`Inspect type	First weekday of the week, from 0 (Sunday) through 6 (Saturday).
`minDate`Optional	`ISODateString \| undefined`Inspect type	Earliest selectable calendar date in the library ISO date representation.
`maxDate`Optional	`ISODateString \| undefined`Inspect type	Latest selectable calendar date in the library ISO date representation.
`isDateDisabled`Optional	`((date: ISODateString) => boolean) \| undefined`Inspect type	Return true to prevent selection of the supplied ISO date.
`showOutsideDays`Optional	`boolean \| undefined`	Renders dates belonging to adjacent months in the current month grid.
`allowOutsideMonthSelection`Optional	`boolean \| undefined`	Allows selecting visible dates from adjacent months.
`fixedWeeks`Optional	`boolean \| undefined`	Keeps a fixed six-week layout for every month.
`showTodayButton`Optional	`boolean \| undefined`	Shows the action for selecting or navigating to Today.
`showHeader`Optional	`boolean \| undefined`	Hides the complete month/year heading and navigation row.
`showNavigation`Optional	`boolean \| undefined`	Convenience switch for both previous and next actions.
`showPreviousButton`Optional	`boolean \| undefined`	Shows the previous-period navigation action.
`showNextButton`Optional	`boolean \| undefined`	Shows the next-period navigation action.
`showMonthLabel`Optional	`boolean \| undefined`	Displays the current month caption.
`showWeekdays`Optional	`boolean \| undefined`	Displays weekday column labels.
`enableYearView`Optional	`boolean \| undefined`	Allows the month/year heading to open a twelve-month overview. Defaults to true.
`views`Optional	`readonly CalendarView[] \| undefined`Inspect type	Available views. Defaults to month and year; supersedes `enableYearView`.
`defaultView`Optional	`CalendarView \| undefined`Inspect type	Initial calendar view, month or year.
`isMonthDisabled`Optional	`((month: ISODateString) => boolean) \| undefined`Inspect type	Return true to prevent selection of the supplied month.
`dayClassName`Optional	`string \| ((date: ISODateString, context: CalendarDayContext) => string \| undefined) \| undefined`Inspect type	Additional day-cell classes, optionally computed from the date and day state.
`renderDay`Optional	`((date: ISODateString, context: CalendarDayContext) => ComponentChildren) \| undefined`Inspect type	Custom content renderer for a day, receiving its ISO date and selected/disabled/preview state.
`formatMonth`Optional	`((month: ISODateString, locale: string) => string) \| undefined`Inspect type	Formats the month caption for the supplied locale.
`formatWeekday`Optional	`((date: ISODateString, locale: string) => string) \| undefined`Inspect type	Formats the weekday column label for the supplied date and locale.
`formatDayLabel`Optional	`((date: ISODateString, locale: string) => string) \| undefined`Inspect type	Formats the accessible name for a calendar day.
`validateSelection`Optional	`((date: ISODateString, context: CalendarSelectionValidationContext) => CalendarSelectionValidationResult) \| undefined`Inspect type	Validates a proposed selection. Return false or an explanatory string to reject it.

Events and callbacks3

DateRangePicker events and callbacks
Name	Type	Description
`onChange`Required	`(value: CalendarDateRange) => void`Inspect type	Receives the new value when the user changes the control. Update the corresponding value prop for controlled use.
`onInvalidSelection`Optional	`((reason: string, date: ISODateString) => void) \| undefined`Inspect type	Receives the rejection reason and the attempted date when selection validation fails.
`onViewChange`Optional	`((view: CalendarView) => void) \| undefined`Inspect type	Receives the newly selected calendar view.

Methods0

No component-specific imperative methods. Use props and callbacks to control this component.