DateRangePickerProps

Represents the props of the KendoReact DateRangePicker component.

Name	Type	Default	Description
adaptive?	boolean	false	Providing different rendering of the popup element based on the screen dimensions.
adaptiveSubtitle?	string		Specifies the text that is rendered as subtitle in the adaptive popup(action sheet). Applicable only when adaptive is set to true.
adaptiveTitle?	string		Specifies the text that is rendered as title in the adaptive popup(action sheet). Applicable only when adaptive is set to true. If not provided, the title will be the same as the label.
allowReverse?	boolean		If allowReverse is set to true, the component skips the validation of whether the from value is after the to value (see example). If the calendarSettings property is set, its allowReverse will take precedence.
ariaDescribedBy?	string		Identifies the element(s) which will describe the component, similar to HTML aria-describedby attribute. For example these elements could contain error or hint message.
ariaLabelledBy?	string		Identifies the element(s) which will label the component.
autoFocus?	boolean		Represents the autoFocus HTML attribute that will be applied to the input element of the DateRangePicker. (Defaults to false)
calendar?	React.ComponentType<MultiViewCalendarProps<any>>		Enables the customization or the override of the default Calendar which is rendered by the DateRangePicker.
calendarSettings?	DateRangePickerCalendarSettings		Represents the additional props that can be passed to the MultiViewCalendar inside the DateRangePicker (see example).
className?	string		Sets the className of the DateRangePicker.
clearButton?	boolean		If clearButton is set to true, the DateRangePicker renders a button next to the start and end date values. Clicking this button resets the value of the date and triggers the change event.
defaultShow?	boolean		Sets the default state of the DateRangePicker upon render (see example).
defaultValue?	SelectionRange		Sets the default value of the DateRangePicker (see example).
disabled?	boolean		Determines whether the DateRangePicker is disabled (see example).
endDateInput?	React.ComponentType<DateInputProps<any>>		Enables the customization or the override of the default end DateInput which is rendered by the DateRangePicker (see example).
endDateInputSettings?	DateRangePickerDateInputSettings		Represents the additional props that can be passed to the end-date DateInput inside the DateRangePicker (see example).
focusedDate?	Date		Specifies the focused date of the DateRangePicker (see example).
format?	string | DateFormatOptions		Specifies the date format which is used for formatting the value of the DateInput (see example). If startDateInputSettings or endDateInputSettings are set, their format will take precedence.
id?	string		Specifies the id of the DateRangePicker.
inputAttributes?	React.InputHTMLAttributes<HTMLInputElement>		Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
max?	Date		Specifies the greatest valid date (see example).
min?	Date		Specifies the smallest valid date (see example).
onBlur?	(event: FocusEvent<any>) => void		Fires each time any of the DateRangePicker elements gets blurred.
onCancel?	(event: MouseEvent<HTMLButtonElement>) => void		Fires each time the popup of the DateRangePicker is about to cancel in (adaptive mode).
onChange?	(event: DateRangePickerChangeEvent) => void		Fires each time the user selects a part of a date range (see example).
onClose?	(event: DateRangePickerCloseEvent) => void		Fires each time the popup is closed.
onFocus?	(event: FocusEvent<any>) => void		Fires each time the user focuses any of the DateRangePicker elements.
onOpen?	(event: DateRangePickerOpenEvent) => void		Fires each time the popup is opened.
popup?	React.ComponentType<PopupProps>		Enables the customization or the override of the default Popup which is rendered by the DateRangePicker (see example).
popupSettings?	DateRangePickerPopupSettings		Represents the additional props that will be passed to the Popup inside the DateRangePicker (see example).
show?	boolean		Specifies if the calendar will be displayed (see example).
startDateInput?	React.ComponentType<DateInputProps<any>>		Enables the customization or the override of the default start DateInput which is rendered by the DateRangePicker (see example).
startDateInputSettings?	DateRangePickerDateInputSettings		Represents the additional props that will be passed to the start-date DateInput inside the DateRangePicker (see example).
style?	React.CSSProperties		Specifies the additional styles that will be applied to the wrapping DateRangePicker element.
swapButton?	boolean		Determines whether the DateRangePicker will display a Swap Value button (see example). The DateRangePicker will display the swap button only if the allowReverse property is also set to true.
tabIndex?	number		Sets the tabIndex property of the DatePicker.
valid?	boolean		Overrides the validity state of the component. If valid is set, the required property will be ignored. This property is part of the FormComponentProps interface.
value?	SelectionRange		Specifies the selected date range of the DateRangePicker (see example). The value has to be an object with start and end valid JavaScript Date instances or null.