Introduction
Vue 2 End of Support
Wrappers Deprecation Summary
Knowledge Base
FAQ
Components / Date Inputs / DateRangePicker / Overview

Kendo UI for Vue Native DateRangePicker Overview

The Kendo UI for Vue Native DateRangePicker combines the Kendo UI for Vue DateInput and Calendar components and enables the user to enter or pick a date-range value.

ninja-iconThe DateRangePicker is part of Kendo UI for Vue, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.Start Free Trial

The following example demonstrates the DateRangePicker in action.

Change Theme
Theme
Loading ...

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.

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.
  • Events—The DateRangePicker provides events that help you tailor the component in a way that best fits your requirements.

Support and Learning Resources

Additional Resources

In this article
Key FeaturesSupport and Learning ResourcesAdditional Resources
Not finding the help you need?
Contact Support