Date Ranges and Formats

The DateRangePicker enables you to set date ranges and formats.

To configure the date ranges, use the min and max properties. To set the date format, use the format property.

<div id="vueapp" class="vue-app">
    <kendo-daterangepicker :min="minDate"
                           :max="maxDate"
                           :range="currentRange"
                           :format="'yyyy/MM/dd'">
    </kendo-daterangepicker>
</div>
Vue.use(DateinputsInstaller);
new Vue({
    el: '#vueapp',
    data: {
        minDate: new Date(),
        maxDate: new Date(new Date().setDate(new Date().getDate() + 8)),
        currentRange: {start: new Date(), end: new Date(new Date().setDate(new Date().getDate() + 2))}
    }
})

In this article