Edit this page

Select a range of dates

Environment

Product Progress Kendo UI Calendar
Progress Kendo UI 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 end and start dates, select the dates in the selected range 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

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy