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
<div id="vueapp" class="vue-app">
<kendo-daterangepicker v-on:open="onOpen"
v-on:close="onClose"
v-on:change="onChange">
</kendo-daterangepicker>
</div>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");
}
}
})