Reverse Range Selection

By default, the Calendar swaps the start and end dates of the value if the end is before the start.

To enable the reverse range selection, set the allowReverse property of the Calendar to true.

<div id="vueapp" class="vue-app">
   <div class="example-wrapper">
                <div class="example-config">
                    <p>
                        The value is: <br />
                        start: {{value.start}} <br />
                        end: {{value.end}}
                    </p>
                </div>
                <Calendar
                    :allow-reverse="true"
                    @change="handleChange"
                    :mode="'range'"
                ></Calendar>
            </div>
</div>
import { Calendar } from '@progress/kendo-vue-dateinputs';
Vue.component('calendar', Calendar);

new Vue({
    el: '#vueapp',
    data: function() {
        return {
             value: {
                start: null,
                end: null
            }
        }
    },
    methods: {
        handleChange (event) {
            this.value = event.target.value;
        }
    }
});

In this article