Range Selection

The DatePicker enables you to define value ranges for selection.

The following example demonstrates how to set range selection only if the entered date is valid and is within the defined range.

<div id="vueapp" class="vue-app">
     <div style="display:inline-flex">
        <div style="margin-right:20px">
            <h4>Start:</h4>
            <kendo-datepicker id="start" v-on:change="startChange"></kendo-datepicker>
        </div>

        <div>
            <h4>End:</h4>
            <kendo-datepicker id="end" v-on:change="endChange"></kendo-datepicker>
        </div>    
    </div>
</div>
Vue.use(DateinputsInstaller);
new Vue({
    el: '#vueapp',
    mounted () {
            var start = $("#start").data("kendoDatePicker");
            var end = $("#end").data("kendoDatePicker");
            start.max(end.value());
            end.min(start.value());
    },
    methods: {        
        startChange: function (e) {           
            var start = $("#start").data("kendoDatePicker");
            var end = $("#end").data("kendoDatePicker");
            var startDate = start.value(),
                    endDate = end.value();
                 if (startDate) {
                        startDate = new Date(startDate);
                        startDate.setDate(startDate.getDate());
                        end.min(startDate);
                    } else if (endDate) {
                        start.max(new Date(endDate));
                    } else {
                        endDate = new Date();
                        start.max(endDate);
                        end.min(endDate);
                    }
        },
        endChange: function (e) {
            var start = $("#start").data("kendoDatePicker");
            var end = $("#end").data("kendoDatePicker");
            var endDate = end.value(),
                startDate = start.value();
             if (endDate) {
                    endDate = new Date(endDate);
                    endDate.setDate(endDate.getDate());
                    start.max(endDate);
                } else if (startDate) {
                    end.min(new Date(startDate));
                } else {
                    endDate = new Date();
                    start.max(endDate);
                    end.min(endDate);
                }
        }
    }
})        

In this article