New to Kendo UI for jQuery? Download free 30-day trial

Select a Range of Dates

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

In this article