Wrapper Components / Date Inputs / DateRangePicker

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.

<div id="vueapp" class="vue-app">
    <h5>Select date: </h5>
    <kendo-daterangepicker :min="minDate"
                           :max="maxDate"
                           :range="currentRange"
                           :format="'yyyy/MMMM/dd'">
    </kendo-daterangepicker>
</div>
Vue.use(DateinputsInstaller);
new Vue({
    el: '#vueapp',
    data: {
        minDate: new Date(2017, 9, 1),
        maxDate: new Date(2018, 10, 30),
        currentRange: {start: new Date(2017, 9, 4), end: new Date(2018, 10, 22)}
    }
})

Functionality and Features

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");
        }
    }
})

In this article