All Components

DateInputs Overview

The DateInputs enable the user to pick up dates and times for scheduling appointments.

Basic Usage

The following example demonstrates how to initialize the Calendar, DateInput, DatePicker, DateTimePicker, and TimePicker.

<div id="vueapp" class="vue-app row example-wrapper">
    <div class="row">
        <div class="col-xs-12 col-sm-6 example-col">
            <p>DateInput</p>
            <kendo-dateinput v-model="date"></kendo-dateinput>
            <p>(Use <code>←</code> and <code>→</code> to navigate, <code>↑</code> and <code>↓</code> to update.)</p>
            <p>Calendar</p>
            <kendo-calendar :value="new Date()"></kendo-calendar>
        </div>
        <div class="col-xs-12 col-sm-6 example-col">
            <p>DatePicker</p>
            <kendo-datepicker v-model="date"></kendo-datepicker>
            <p>(Use <code>Alt</code>+<code>↓</code> to open the Calendar.)</p>
            <p>DateTimePicker</p>
            <kendo-datetimepicker v-model="date"></kendo-datetimepicker>
            <p>(Use <code>Alt</code>+<code>↓</code> to open the time list, <code>Tab</code> to move to the next time section in the popup, <code>↑</code> to increment and <code>↓</code> to decrement the value.)</p>
            <p>TimePicker</p>
            <kendo-timepicker v-model="date"></kendo-timepicker>
            <p>(Use <code>Alt</code>+<code>↓</code> to open the time list, <code>Tab</code> to move to the next time section in the popup, <code>↑</code> to increment and <code>↓</code> to decrement the value.)</p>
        </div>  
    </div>
</div>
Vue.use(DateinputsInstaller);

new Vue({
    el: '#vueapp',
    data: {
        date: null
    }
})

Installation

To initialize the DateInputs, either:

Initializing with Webpack

  1. Install Kendo UI and add a theme.

    npm install --save @progress/kendo-ui
    npm install --save @progress/kendo-theme-default
  2. Install the Kendo UI DateInputs package for Vue.

    npm install --save @progress/kendo-dateinputs-vue-wrapper

    The package also exports the following wrappers for individual components:

    • Calendar
    • DateInput
    • DatePicker
    • DateTimePicker
    • TimePicker
  3. Import the Kendo UI packages to the App component. If you use the Kendo UI components more than once in your application, add all Kendo UI-related files to the main.js file. If you use the Kendo UI components once in your application, add the Kendo UI-related files the component where they will be referred.

    import '@progress/kendo-ui'
    import '@progress/kendo-theme-default/dist/all.css'
    
    import { Calendar,
            DateInput,
            TimePicker,
            DatePicker,
            DateTimePicker,
            DateinputsInstaller } from '@progress/kendo-dateinputs-vue-wrapper'
    
    Vue.use(DateinputsInstaller)
    
    new Vue({
       el: '#app',
       components: {
           Calendar,
           DateInput,
           TimePicker,
           DatePicker,
           DateTimePicker
       }
    })
In this article