Select Ranges between DatePickers

The following example demonstrates how to implement a range selection between two Kendo UI DatePickers in AngularJS projects.

Example

<div id="example" ng-app="KendoDemos">
  <div class="demo-section k-content"ng-controller="MyCtrl">
    <div class="box-col">
      <h4>From date:</h4>
      <input id="fromDatepicker" kendo-date-picker
             ng-model="fromDateString"
             k-ng-model="fromDateObject"
             k-max = "maxDate"
             k-rebind="maxDate"
             k-on-change="fromDateChanged()" />
      <span></span>
      <span>max date:</span>
    </div>
    <div class="box-col">
      <h4>To date:</h4>
      <input id="toDatepicker" kendo-date-picker
             ng-model="toDateString"
             k-ng-model="toDateObject"
             k-min = "minDate"
             k-rebind = "minDate"
             k-on-change="toDateChanged()"/>
      <span></span>
      <span>min date:</span>
    </div>
    <div>
      <button id="clear" ng-click="clear()">Clear</button>
    </div>
  </div>
</div>
<script>
  angular.module("KendoDemos", [ "kendo.directives" ])
          .controller("MyCtrl", function($scope){
            $scope.fromDateString;
            $scope.fromDateObject = null;
            $scope.toDateString;
            $scope.toDateObject = null;
            $scope.maxDate = new Date();
            $scope.minDate = new Date(2000, 0, 1, 0, 0, 0);
            $scope.fromDateChanged = function(){
              $scope.minDate = new Date($scope.fromDateString);
              console.log("min changed " + $scope.fromDateString);
            };
            $scope.toDateChanged = function(){
              $scope.maxDate = new Date($scope.toDateString);
              console.log("min changed " + $scope.toDateString);
            };
            $scope.clear = function(){
              $scope.fromDateString = '';
              $scope.toDateString = '';
              $scope.fromDateObject = null;
              $scope.toDateObject = null;
              $scope.maxDate = new Date();
              $scope.minDate = new Date(2000, 0, 1, 0, 0, 0);
            }
          })
</script>

See Also

• DatePicker JavaScript API Reference
• How to Set the First Weekday
• How to Create Date Masking
• How to Globally Modify Default Options
• How to Hide the Default Button
• How to Integrate DatePicker with DateJS Library
• How to Make Input Elements Readonly
• How to Persist Entered Dates
• How to Resize Calendar Based on Input Width

For more runnable examples on the Kendo UI DatePicker, browse its How To documentation folder.