Controlled Mode

By default, the DatePicker is in an uncontrolled state.

The DatePicker provides options for:

Controlling the Date Value

To manage the date value of the DatePicker:
1. Use its value property.
1. Handle the change event.
1. Pass the new value through the props.

The following example demonstrates how to control the DatePicker value.

<div id="vueapp" class="vue-app">
   <div class="row">
        <div class="example-config col-xs-12 col-md-12 example-col">
            <p>The value is: {{value}}</p>
        </div>
        <div class="col-xs-12 col-md-12 example-col">
            <p>Controlled DatePicker</p>
            <datepicker
                :value="value"
                @change="handleChange"
            />
        </div>
    </div>
</div>
import { DatePicker } from '@progress/kendo-vue-dateinputs';
Vue.component('datepicker', DatePicker);

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

Controlling the Popup State

To manage the popup state of the DatePicker, use its show property, to set the shown state of the component.

The following example demonstrates how to control the state of the DatePicker calendar upon display.

<div id="vueapp" class="vue-app">
    <div class="row">
         <div class="col-xs-12 col-md-6 example-col">
             <p>Controlled DatePicker</p>
             <datepicker
                 :show="show"
             ></datepicker>
             <button class="k-button k-primary" @click="handleClick">Toggle</button>
         </div>
         <div class="col-xs-12 col-md-6 example-col">
             <p>Always shown</p>
             <datepicker
                 :show="true"
             ></datepicker>
         </div>
    </div>
</div>
import Vue from 'vue';
import { DatePicker } from '@progress/kendo-vue-dateinputs';
Vue.component('datepicker', DatePicker);

new Vue({
    el: '#vueapp',
    data: function() {
        return {
            show: false
        };
    },
    methods: {
        handleClick(event) {
            this.show = !this.show;
        }
    }
});

In this article