DateRangePickerProps
Represents the props of the KendoReact DateRangePicker component.
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, itsallowReverse
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.
calendar?
React.ComponentType<MultiViewCalendarProps<any>>
Enables the customization or the override of the default Calendar which is rendered by the DateRangePicker.
calendarSettings?
Represents the additional props that can be passed to the MultiViewCalendar inside the DateRangePicker (see example).
className?
string
Sets the className
of the DateRangePicker.
defaultShow?
boolean
Sets the default state of the DateRangePicker upon render (see example).
defaultValue?
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?
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
orendDateInputSettings
are set, theirformat
will take precedence.
id?
string
Specifies the id
of the DateRangePicker.
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.
onChange?
(event: DateRangePickerChangeEvent) => void
Fires each time the user selects a part of a date range (see example).
onFocus?
(event: FocusEvent<any>) => void
Fires each time the user focuses any of the DateRangePicker elements.
popup?
React.ComponentType<PopupProps>
Enables the customization or the override of the default Popup which is rendered by the DateRangePicker (see example).
popupSettings?
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?
Represents the additional props that will be passed to the start-date DateInput inside the DateRangePicker (see example).
style?
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 totrue
.
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?
Specifies the selected date range of the DateRangePicker (see example).
The
value
has to be an object withstart
andend
valid JavaScriptDate
instances ornull
.