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 Kendo UI for Vue library together with other best-in-class native components for building fast and beautiful apps.
  • Comes with outstanding technical support, detailed documentation and demos.
DateRangePicker
Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo
  • 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
  • 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
  • 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

  • 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
  • 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
kendo

Get Started with Kendo UI for Vue

Kendo UI