Skip to content

Latest commit

 

History

History
94 lines (74 loc) · 2.48 KB

calendar-select-range-of-dates.md

File metadata and controls

94 lines (74 loc) · 2.48 KB
title page_title description type slug tags res_type component
Select a Range of Dates
Select a Range of Dates - Kendo UI Calendar for jQuery
Learn how to select a range of dates in the Kendo UI Calendar widget.
how-to
calendar-select-range-of-dates
kendo, ui, calendar, select, range, dates, multiple, between, datepicker
kb
calendar

Environment

Product Progress® Kendo UI® Calendar for jQuery
Product Version Tested up to version 2017.3.1026
 

Description

How can I select a range of dates in the Kendo Calendar widget?

Solution

Once the user chooses both the end and start dates, select the dates in the selected range by using the selectDates method.

    <label>Start:</label>

    <input id='start'/>

    <label>End:</label>
    <input id='end'/>
    <br/>
    <div id='calendar' style='margin:10px'></div>

    <script>
      Date.prototype.addDays = function (days) {
        var dat = new Date(this.valueOf());
        dat.setDate(dat.getDate() + days);
        return dat;
      }

      $('#start').kendoDatePicker({
        change: rangeSelection
      });

      $('#end').kendoDatePicker({
        change: rangeSelection
      });

      $('#calendar').kendoCalendar({
        selectable:'multiple'
      });

      function rangeSelection() {

        var start = $('#start').data('kendoDatePicker');
        var end = $('#end').data('kendoDatePicker');
        var calendar = $('#calendar').data('kendoCalendar');

        if (start.value() && end.value() && start.value().getTime() <= end.value().getTime()) {
          debugger
          var datesToSelect = [];
          var daysToAdd = 0;
          while (true) {
            var dateToAdd = start.value().addDays(daysToAdd);
            if (dateToAdd.getTime() >= end.value().getTime()) {
              datesToSelect.push(dateToAdd);
              break;
            }
            datesToSelect.push(dateToAdd);
            daysToAdd++;
          }

          calendar.selectDates(datesToSelect);
        }
      }

    </script>

See Also