DateRangePicker Overview

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

The DateRangePicker wrapper for Vue is a client-side wrapper for the Kendo UI DateRangePicker widget.

Basic Usage

The following example demonstrates the DateRangePicker in action.

Example
View Source
Edit In Stackblitz  
Change Theme:

## Functionality and Features

* [Disabled dates][slug:disabledates_daterangepicker]
* [Active view][slug:startviewdepth_daterangepicker]
* [Week number column][slug:weekcolumn_daterangepicker]
* [Date ranges and formats][slug:startviewdepth_daterangepicker]
* [Templates][slug:templates_daterangepicker]
* [Keyboard navigation][slug:keyboard_navigation_daterangepicker]
* [RTL support][slug:rtl_daterangepicker]

## Events

The following example demonstrates basic DateRangePicker events. You can subscribe to [all DateRangePicker events](https://docs.telerik.com/kendo-ui/api/javascript/ui/daterangepicker#events) by the handler name.

```html
Vue.use(DateinputsInstaller);
new Vue({
    el: '#vueapp',
    methods: {
        onOpen: function (e) {
            console.log("DateRangePicker is opened");
        },
        onClose: function (e) {
            console.log("DateRangePicker is closed");
        },
        onChange: function (e) {
            console.log("DateRangePicker selected date is changed");
        }
    }
})

In this article

Not finding the help you need?