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.

The DateRangePicker Component is part of Kendo UI for Vue, a professional grade UI library with 90+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Basic Usage

The following example demonstrates the DateRangePicker in action.

View Source
Edit In Stackblitz  
Change Theme:

## Functionality and Features

* [Disabled dates][slug:disabledates_daterangepicker]
* [Active view][slug:startviewdepth_daterangepicker]
* [Week number column][slug:weekcolumn_daterangepicker]
* [Date ranges and formats][slug:startviewdepth_daterangepicker]
* [Templates][slug:templates_daterangepicker]
* [Keyboard navigation][slug:keyboard_navigation_daterangepicker]
* [RTL support][slug:rtl_daterangepicker]

## 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"
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");

In this article

Not finding the help you need?