Skip to content

Files

Latest commit

 

History

History
73 lines (57 loc) · 2.64 KB

index.md

File metadata and controls

73 lines (57 loc) · 2.64 KB
title page_title description slug canonicalLink position
Overview
DatePicker Overview - Components - Kendo UI for Vue
Get an overview of the features the Kendo UI DateRangePicker wrapper for Vue delivers and use the component in Vue projects.
overview_daterangepicker_wrapper
0

DateRangePicker Overview

The DateRangePicker combines the Kendo UI DateInput and MultiViewCalendar components and enables the user to enter or pick a date-range value.

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

Basic Usage

The following example demonstrates the DateRangePicker in action.

{% meta height:450 %} {% embed_file daterangepicker/basic/main.vue preview %} {% embed_file daterangepicker/basic/main.js %} {% endmeta %}

Functionality and Features

  • [Disabled dates]({% slug disabledates_daterangepicker_wrapper %})
  • [Active view]({% slug startviewdepth_daterangepicker_wrapper %})
  • [Week number column]({% slug weekcolumn_daterangepicker_wrapper %})
  • [Date ranges and formats]({% slug startviewdepth_daterangepicker_wrapper %})
  • [Templates]({% slug templates_daterangepicker_wrapper %})
  • [Keyboard navigation]({% slug keyboard_navigation_daterangepicker_wrapper %})
  • [RTL support]({% slug rtl_daterangepicker_wrapper %})

Events

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

<div id="vueapp" class="vue-app">
    <kendo-daterangepicker v-on:open="onOpen"
                           v-on:close="onClose"
                           v-on:change="onChange">
    </kendo-daterangepicker>
</div>
Vue.use(DateinputsInstaller);
new Vue({
    el: '#vueapp',
    methods: {
        onOpen: function (e) {
            console.log("DateRangePicker is opened");
        },
        onClose: function (e) {
            console.log("DateRangePicker is closed");
        },
        onChange: function (e) {
            console.log("DateRangePicker selected date is changed");
        }
    }
})

Suggested Links