DatePicker Overview

The DatePicker combines the Kendo UI DateInput and Calendar components.

It enables the user to enter or pick a date value.

The DatePicker wrapper for Vue is a client-side wrapper for the Kendo UI DatePicker widget.

Basic Usage

The following example demonstrates the DatePicker in action.

Functionality and Features

• Disabled dates
• Active view
• Week number column
• Date ranges and formats
• Range selection
• Templates
• Keyboard navigation
• RTL support

Events

The following example demonstrates basic DatePicker events. You can subscribe to all DatePicker events by the handler name.

Copy Code<div id="vueapp" class="vue-app">
    <kendo-datepicker v-on:open="onOpen" v-on:close="onClose"></kendo-datepicker>
</div>

Copy CodeVue.use(DateinputsInstaller);
new Vue({
	el: '#vueapp',
	methods: {
		onOpen: function (e) {
			console.log("DatePicker is opened");
		},
		onClose: function (e) {
			console.log("DatePicker is closed");
		}
	}
})

Suggested Links

• Kendo UI DatePicker for jQuery
• API Reference of the DatePicker