Kendo UI for Vue DateRangePicker Overview
The Kendo UI for Vue DateRangePicker combines the Kendo UI for Vue DateInput and Calendar 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 Kendo UI for Vue 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 Kendo UI for Vue Date Inputs guide.
- 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
defaultValueproperty allows you to configure an initial value, while the
defaultShowproperty 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.
- Events—The DateRangePicker provides events that help you tailor the component in a way that best fits your requirements.
Support and Learning Resources
- DateRangePicker Homepage
- API Reference of the DateRangePicker Component
- Getting Started with Kendo UI for Vue - TypeScript (Online Guide)
- Getting Started with Kendo UI for Vue - TypeScript + Options API (Online Guide)
- Getting Started with Kendo UI for Vue - Nuxt 3 (Online Guide)
- Virtual Classroom (Training Course for Registered Users)
- DateRangePicker Forum
- Knowledge Base
- Kendo UI Productivity Tools extension for VS Code