AngularUI: диапазон datepicker не блокирует даты

Question

Может ли кто-нибудь помочь?
Я хотел, чтобы в моем start-datepicker были заблокированы даты после даты окончания и заблокированы даты в конце-datepicker до даты начала. Я использовал angularui datepickers.
я пытался сделать это, используя этот код:

$scope.start = new Date(); 
    $scope.end = new Date($scope.start.getTime() + 7 * 24 * 60 * 60 * 1000); 

    $scope.minStartDate = 0; //fixed date 
    $scope.maxStartDate = $scope.end; //init value 
    $scope.minEndDate = $scope.start; //init value 
    $scope.maxEndDate = $scope.end; //fixed date same as $scope.maxStartDate init value 

    $scope.$watch('start', function(v){ 
    $scope.minEndDate = v; 
    }); 
    $scope.$watch('end', function(v){ 
    $scope.maxStartDate = v; 
    }); 

И вот plunker: http://plnkr.co/edit/tTBcSZE08VYCpitdhCRA?p=preview

Answer 1

Я обновил свой plunker с необходимыми изменениями, в основном вы настраивали minDate и maxDate incorrectly.You объявили но нет такого объекта в вашем контроллере, поэтому я добавил два объекта date-options для календарей соответственно. Вот код working.

Изменения в ваших JS, как показано ниже

$scope.datePicker ={}; 
    $scope.start = new Date(); 
    $scope.end = new Date($scope.start.getTime() + 7 * 24 * 60 * 60 * 1000); 

    $scope.datePicker.minStartDate = 0; //fixed date 
    $scope.datePicker.maxStartDate = $scope.end; //init value 
    $scope.datePicker.minEndDate = $scope.start; //init value 
    $scope.datePicker.maxEndDate = $scope.end; //fixed date same as $scope.maxStartDate init value 

$scope.$watch('start', function(v) { 
      $scope.datePicker.minEndDate = v; 
      $scope.dateOptions2.minDate = v; //chabge the same in date options object to reflect in UI 
     }); 
     $scope.$watch('end', function(v) { 
      $scope.datePicker.maxStartDate = v; 
      $scope.dateOptions1.maxDate = v; 
     }); 
    //create two separate objects for date options where you can set ,in and max date.. 
     $scope.dateOptions1 = { 
      //dateDisabled: disabled, 
      formatYear: 'yyyy', 
      maxDate: $scope.datePicker.maxStartDate, 
      minDate: $scope.datePicker.minStartDate, 
      startingDay: 1 
     }; 
     $scope.dateOptions2 = { 
      //dateDisabled: disabled, 
      formatYear: 'yyyy', 
      maxDate: $scope.datePicker.maxEndDate, 
      minDate: $scope.datePicker.minEndDate, 
      startingDay: 1 
     }; 

Изменения в вашем HTML, как показано ниже

<div ng-controller="DatepickerPopupDemoCtrl"> 
     <p class="input-group"> 
      <input type="text" 
        class="form-control" 
        uib-datepicker-popup="{{format}}" 
        ng-model="start" 
        is-open="popup1.opened" 

        datepicker-options="dateOptions1" 
        close-text="Close" 
        alt-input-formats="altInputFormats" /> 
      <span class="input-group-btn"> 
      <button type="button" class="btn btn-default" ng-click="open1()"> 
       <i class="glyphicon glyphicon-calendar"></i> 
      </button> 
      </span> 
     </p> 

     <hr> 

     <p class="input-group"> 
      <input type="text" 
        class="form-control" 
        uib-datepicker-popup="{{format}}" 
        ng-model="end" 
        is-open="popup2.opened" 

        datepicker-options="dateOptions2" 
        close-text="Close" 
        alt-input-formats="altInputFormats" /> 
      <span class="input-group-btn"> 
      <button type="button" class="btn btn-default" ng-click="open2()"> 
       <i class="glyphicon glyphicon-calendar"></i> 
      </button> 
      </span> 
     </p> 

    </div>