DateRangePickerProps

Enable adaptive popup rendering based on viewport width.

Set the subtitle text in the adaptive popup (action sheet). Use only when adaptive is true.

Set the title text in the adaptive popup (action sheet). Use only when adaptive is true. If not set, it matches the label.

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.

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.

Identifies the element(s) which will label the component.

Apply the autoFocus attribute to the first input.

Enables the customization or the override of the default Calendar which is rendered by the DateRangePicker.

Represents the additional props that can be passed to the MultiViewCalendar inside the DateRangePicker (see example).

Sets the className of the DateRangePicker.

Show a clear button for start and end inputs. Clicking resets the range and fires onChange.

Sets the default state of the DateRangePicker upon render (see example).

Set the initial value when uncontrolled (see example).

Determines whether the DateRangePicker is disabled (see example).

Enables the customization or the override of the default end DateInput which is rendered by the DateRangePicker (see example).

Represents the additional props that can be passed to the end-date DateInput inside the DateRangePicker (see example).

Specifies the focused date of the DateRangePicker (see example).

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.

Specifies the id of the DateRangePicker.

Pass HTML attributes to the internal focusable input elements. Attributes required for core logic are ignored.

Specifies the greatest valid date (see example).

Specifies the smallest valid date (see example).

Fires each time any of the DateRangePicker elements gets blurred.

Fires when the popup is about to cancel in (adaptive mode).

Fires when the user changes part of the range (see example).

Fires when the popup closes.

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

Fires when the popup opens.

Enables the customization or the override of the default Popup which is rendered by the DateRangePicker (see example).

Represents the additional props that will be passed to the Popup inside the DateRangePicker (see example).

Specifies if the calendar will be displayed (see example).

Enables the customization or the override of the default start DateInput which is rendered by the DateRangePicker (see example).

Represents the additional props that will be passed to the start-date DateInput inside the DateRangePicker (see example).

Specifies the additional styles that will be applied to the wrapping DateRangePicker element.

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.

Sets the tabIndex property of the DatePicker.

Override the validity state. If valid is set, ignore required. Part of FormComponentProps.

Set the selected range (see example). Provide start and end valid Date values or null.

Enables Web MCP tool registration for this component. Requires a parent WebMcpProvider from @progress/kendo-react-webmcp.