Focused Dates

The Vue DatePicker component enables you to handle the configuration of the focused calendar dates.

The Calendar always displays a focused date and, by default, the focused date is today's date. To change the focused date, use the focusedDate property by setting it to a specific Date value. The Date value has to be a valid JavaScript Date object.

<div id="vueapp" class="vue-app">
        :focused-date="new Date(1997, 2, 20)"
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 =;

In this article