ブートストラップを使用して日付範囲を作成することはできませんui

Question

私のアプリケーションにAngular UI Bootstrapコンポーネントを使用しています。

2つの日付があります。利用可能な日付と有効期限。 ExpireDateを常にAvailableDateよりも大きくしたい。

var expireMinDate = new Date(); 
    $scope.OpenExpireDate = function() { 
     $scope.expireDatePopup.opened = true; 
     var newMinDate = $scope.availableDateOptions.minDate; 
     $scope.expireDateOptions.minDate = expireMinDate.setDate(newMinDate.getDate() + 1); 
    }; 

このコードを試しました。これは動作していません。 ExpireDateは意図したとおりに無効になっていません。私は、他のすべての日を無効にするコードを取得していません。何が間違っていますか？

更新：今、私はAvailableDateを見て、それに応じてminDateを変更しています。

$scope.$watch('AvailableDate', function() { 
    var newMinParts = $scope.AvailableDate.toString().split("-"); 
    $scope.expireDateOptions.minDate = new Date(newMinParts[0], newMinParts[1]-1, newMinParts[2]); 
}); 

更新フィドル：https://jsfiddle.net/codeandcloud/cpu4euoj/4/

アイデアAvailableDateの変化を反映するためにEXPIREDATE MinDateプロパティの設定を更新することです。今、minDateの設定は完全に消えています。

Answer 1

HTML部分については

 <div class="container" ng-app="demoApp" ng-controller="demoController"> 
<div id="demoForm" name="demoForm" ng-form="demoForm" novalidate> 
    <div class="col-md-4"> 
     <label class="control-label">Available Date</label> 
     <div class="input-form"> 
      <input type="text" class="form-control" uib-datepicker-popup="{{dateFormat}}" ng-model="AvailableDate" name="availabledate" is-open="availableDatePopup.opened" datepicker-options="availableDateOptions" ng-required="true" data-ng-change="captureChange(AvailableDate)" close-text="Close" ng-click="OpenAvailableDate()" 
      placeholder="Available Date" /> 
      <label ng-show="showMessages && addJobForm.availabledate.$invalid" class="text-danger"> 
       Available Date is required. 
      </label> 
     </div> 
    </div> 
    <div class="col-md-4"> 
     <label class="control-label">Expire Date</label> 
     <div class="input-form"> 
      <input type="text" class="form-control" uib-datepicker-popup="{{dateFormat}}" ng-model="ExpireDate" name="expiredate" is-open="expireDatePopup.opened" datepicker-options="expireDateOptions" ng-required="true" close-text="Close" ng-click="OpenExpireDate()" 
      placeholder="Expire Date" /> 
      <label ng-show="showMessages && addJobForm.expiredate.$invalid" class="text-danger"> 
       Expire Date is required. 
      </label> 
     </div> 
    </div> 
</div> 

のJavaScriptパートの

  var demoApp = angular.module('demoApp', ["ui.bootstrap"]); 
      demoApp.controller("demoController", ["$scope", 
function($scope) { 
    var today = new Date(); 
    $scope.dateFormat = 'yyyy-MM-dd'; 
    $scope.availableDateOptions = { 
     formatYear: 'yy', 
     startingDay: 1, 
     minDate: today, 
     maxDate: new Date(2030, 5, 22) 
    }; 
    $scope.expireDateOptions = { 
     formatYear: 'yy', 
     startingDay: 1, 
     minDate: today, 
     maxDate: new Date(2030, 5, 22) 
    }; 
    $scope.availableDatePopup = { 
     opened: false 
    }; 
    $scope.expireDatePopup = { 
     opened: false 
    }; 
    $scope.OpenAvailableDate = function() { 
     $scope.availableDatePopup.opened = true; 
    }; 

$scope.captureChange = function(val){ 
    var expDate = angular.copy(val); 
    expDate.setDate(expDate.getDate()+1); 
    $scope.ExpireDate = expDate; 
} 

    var expireMinDate = new Date(); 
    $scope.OpenExpireDate = function() { 
     $scope.expireDatePopup.opened = true; 
     var newMinDate = $scope.availableDateOptions.minDate; 
if($scope.AvailableDate != undefined){ 
var ddnew = angular.copy($scope.AvailableDate); 
    ddnew.setDate(ddnew.getDate()+1); 
     $scope.expireDateOptions.minDate = ddnew; 
    } 
    else{ 
    $scope.expireDateOptions.minDate = today; 
    } 
    }; 
}]);