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
Change Theme:
Functionality and Features
- Disabled dates
- Active view
- Week number column
- Date ranges and formats
- Templates
- Keyboard navigation
- RTL support
Events
The following example demonstrates basic DateRangePicker events. You can subscribe to all DateRangePicker events by the handler name.
<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");
}
}
})