background

Kendo UI for Vue

Vue DateRangePicker

  • Give your users a visual and interactive way to select date ranges by displaying side-by-side calendars.
  • Part of the Kendo UI for Vue library along with 100+ professionally-designed components.
  • Includes support, documentation, demos, virtual classrooms, learning resources and more!
DateRangePicker
  • Focused Dates

    The Vue DateRangePicker always shows a focused value when the calendar is displayed. The default is today, but you can assign whatever value you like.

    See the Vue DateRangePicker Focused Dates demo

  • Reverse Selection

    By default, this Vue date picker component autocorrects scenarios in which end dates are selected before start dates. In other words, the first date selected is always the start date. You can change that behavior and allow the opposite so that the end date can be selected first.

    See the Vue DateRangePicker Reverse Selection demo

    reverse-daterangepicker-component
  • Customization Options

    The Vue DateRangePicker is very configurable with built-in properties, but you can also take it a step further by customizing the components used for these elements:

    • Date Inputs
    • Calendar
    • Popup

    See the Vue DateRangePicker Customization Options demo

  • Events

    The Vue DateRangePicker component supports different events, enabling you to customize the component behavior based on your needs.  

    See the Vue DateRangePicker Events demo 

  • Keyboard Navigation

    For users who prefer to use the keyboard or cannot use a mouse, this component fully supports keyboard interactions. See the demo for a complete list of supported shortcuts.

    See the Vue DateRangePicker Keyboard Navigation demo

    Keyboard Navigation
  • Overview

    The Vue DateRangePicker component offers a highly customizable that help users select a range of dates using multiple calendars. The component by default has an end and a start date, and dates can be selected across any range and is supported by showcasing two calendars side-by-side.

    See the Vue DateRangePicker demo

    daterangepicker---overview
  • Accessibility

    Like the rest of Kendo UI, the Vue DateRangePicker is fully accessible to help you build software for everyone. It provides full WAI-ARIA support as well as Section 508 compliance.

    Read the Vue DateRangePicker Accessibility documentation

    Accessibility
  • Controlling States and Defaults

    To give you full control, you can easily decide and configure the following:

    • Controlled Mode: Specify behavior of the component when a date is selected and control when, and if, the calendar popup is displayed.
    • Date Limits: Restrict the selection to upper and lower date ranges.
    • Default Value and State: Set the initial selected range and calendar popup visibility.
    • Disabled: Show the calendars, but in read-only mode.
    daterangepicker---disabled-dates
Next Steps

Get Started with Kendo UI for Vue

Kendo UI for Vue - Kendoka