KendoReact DateRangePicker Overview

The KendoReact DateRangePicker combines the KendoReact DateInput and MultiViewCalendar components and enables the user to enter or pick a date-range value.

The following example demonstrates the DateRangePicker in action.

The DateRangePicker is part of the KendoReact Date Inputs component library. The procedures for installing, importing, and using the Date Inputs are identical for all components in the package. To learn how to use the DateRangePicker and the rest of the Date Inputs, see the Getting Started with the KendoReact Date Inputs guide.

Key Features

• Controlled mode—By using the controlled mode, you can manage the date value and the state of the popup in the DateRangePicker.
• Default value—The defaultValue property allows you to configure an initial value, while the defaultShow property sets the initial state of the popup.
• Disabled DateRangePicker—To prevent users from interacting with the DateRangePicker, you can render it in a disabled state until specific requirements are met.
• Focused dates—The DateRangePicker enables you to change the default focused date.
• Date limits—You can configure a specific date limit that allows the user to select dates only within that predefined range.
• Reverse selection—To improve the user experience, the DateRangePicker automatically corrects the selection when the end-user selects a start value that is after the end value.
• Custom rendering—The DateRangePicker allows you to customize its rendering and transform the appearance of its child components like start and end date, calendar, and popup.
• Configuration of child components—The DateRangePicker provides options for customizing its child components.
• Globalization—The DateRangePicker provides globalization features allowing you to create applications that can be used all over the world.
• Keyboard navigation—The DateRangePicker supports keyboard shortcuts that allow users to interact with the component.
• Accessibility—The DateRangePicker is accessible for screen readers and provides full WAI-ARIA support.

Suggested Links

• API Reference of the DateRangePicker
• Getting Started with the KendoReact Date Inputs
• React DateRangePicker High-Level Overview