• What is KendoReact
  • Getting Started
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Charts
    • Common Utilitiesupdated
    • Conversational UI
    • Data Gridupdated
    • Data Query
    • Data Tools
    • Date Inputsupdated
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Map
    • Notification
    • PDF Processing
    • PDFViewernew
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeView
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting
Components / Date Inputs / API / DateRangePickerProps / 

DateRangePickerProps

Represents the props of the KendoReact DateRangePicker component.

NameTypeDefaultDescription

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.

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.

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.

max?

Date

Specifies the greatest valid date (see example).

min?

Date

Specifies the smallest valid date (see example).

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.

Methods

onBlur

Fires each time any of the DateRangePicker elements gets blurred.

Parameters

event

FocusEvent<any>

onChange

Fires each time the user selects a part of a date range (see example).

Parameters

event

DateRangePickerChangeEvent

onFocus

Fires each time the user focuses any of the DateRangePicker elements.

Parameters

event

FocusEvent<any>

In this article

Not finding the help you need?

Contact Support