Date Inputs Overview

The Date Inputs 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, DateRangePicker, DateTimePicker, and TimePicker.

Installation

To initialize the Date Inputs, either:

• Use the CDN service, or
• Use Webpack.

Initializing with Webpack

1. Install Kendo UI and add a theme.

Copy Codenpm install --save @progress/kendo-ui
npm install --save @progress/kendo-theme-default

1. Install the Kendo UI Date Inputs package for Vue.

Copy Codenpm install --save @progress/kendo-dateinputs-vue-wrapper

Copy CodeThe package also exports the following wrappers for individual components:

* Calendar
* DateInput
* DatePicker
* DateRangePicker
* DateTimePicker
* MultiViewCalendar
* TimePicker

1. 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.

   Copy Codeimport '@progress/kendo-ui' // This will import the entire Kendo UI library
   // As an alternative, you could import only the scripts that are used by a specific widget:
   // import '@progress/kendo-ui/js/kendo.calendar' // Imports only the Calendar script and its dependencies
   // import '@progress/kendo-ui/js/kendo.dateinput' // Imports only the DateInput script and its dependencies
   // import '@progress/kendo-ui/js/kendo.datepicker' // Imports only the DatePicker script and its dependencies
   // import '@progress/kendo-ui/js/kendo.daterangepicker' // Imports only the DateRangePicker script and its dependencies
   // import '@progress/kendo-ui/js/kendo.datetimepicker' // Imports only the DateTimePicker script and its dependencies
   // import '@progress/kendo-ui/js/kendo.multiviewcalendar' // Imports only the MultiViewCalendar script and its dependencies
   // import '@progress/kendo-ui/js/kendo.timepicker' // Imports only the TimePicker script and its dependencies
   
   import '@progress/kendo-theme-default/dist/all.css'
   
   import { Calendar,
           DateInput,
           DatePicker,
           DateRangePicker,
           DateTimePicker,
           MultiViewCalendar,
           TimePicker,
           DateinputsInstaller } from '@progress/kendo-dateinputs-vue-wrapper'
   
   Vue.use(DateinputsInstaller)
   
   new Vue({
       el: '#app',
       components: {
           Calendar,
           DateInput,
           DatePicker,
           DateRangePicker,
           DateTimePicker,
           MultiViewCalendar,
           TimePicker
       }
   })

Suggested Links

• Get Started with the Calendar
• Get Started with the DateInput
• Get Started with the DatePicker
• Get Started with the DateRangePicker
• Get Started with the DateTimePicker
• Get Started with the MultiViewCalendar
• Get Started with the TimePicker