最初のdatepickerフィールドで選択された日付に基づいて日付を無効にします

Question

私はangularjsアプリケーションで作業しています。ユーザーは、[From Date]ピッカーおよび[To Date]ピッカーフィールドから日付を選択できます。 From Date pickerフィールドで選択した日付のユーザーに基づいてTo Dateピッカーの日付選択を無効にしたいとします。 例）ユーザがFrom Date pickerフィールドで02/23/2017を選択した場合、To Dateピッカーで02/23/2017より前のすべての日付を無効にする必要があります。

Demo here

私は、以下のように日付の分-date属性にMODEL1を割り当てるが、それは働いていませんでした試みました。また、To-Dateフィールドの日付ピッカーカレンダーをユーザーがFrom-Dateフィールドで日付を選択するとポップアップ表示させようとしましたが、javascriptエラーが発生しました。どんな提案も役に立ちます。以下は

<input type="text" uib-datepicker-popup="{{dateformat}}" min-date={{model1}} ng-model="model2" is-open="showdp" /> 

コードです：

 <div style="float:left" ng-controller="fromDateCtrl"> 
     From Date: 
     <input type="text" uib-datepicker-popup="{{dateformat}}" min-date="mindate" ng-model="model1" is-open="showdp" /> 
     <span> 
     <button type="button" class="btn btn-default" ng-click="showcalendar($event)"> 
      <i class="glyphicon glyphicon-calendar"></i> 
     </button> 
    </span> 
    </div> 
    <div style="float:left" ng-controller="toDateCtrl"> 
     To Date: 
     <input type="text" uib-datepicker-popup="{{dateformat}}" min-date="mindate" ng-model="model2" is-open="showdp" /> 
     <span> 
     <button type="button" class="btn btn-default" ng-click="showcalendar($event)"> 
      <i class="glyphicon glyphicon-calendar"></i> 
     </button> 
    </span> 
    </div> 

JSコード：あなたは、各入力のための2つの異なるコントローラを使用しているすべての

angular.module('plunker', ['ngAnimate', 'ui.bootstrap']); 
     angular.module('plunker').controller('fromDateCtrl', function ($scope) { 
      $scope.today = function() { 
       $scope.model1 = new Date(); 
      }; 
      $scope.mindate = new Date(); 
      $scope.dateformat="MM/dd/yyyy"; 
      $scope.today(); 
      $scope.showcalendar = function ($event) { 
       $scope.showdp = true; 
      }; 
      $scope.showdp = false; 
     }); 

     angular.module('plunker').controller('toDateCtrl', function ($scope) { 
      $scope.today = function() { 
       $scope.model2 = new Date(); 
      }; 
      $scope.mindate = new Date(); 
      $scope.dateformat="MM/dd/yyyy"; 
      $scope.today(); 
      $scope.showcalendar = function ($event) { 
       $scope.showdp = true; 
      }; 
      $scope.showdp = false; 
     }); 

Answer 1

まず、それはあなたを意味する2番目のコントローラのmodel1にアクセスすることはできません。

次に、最小の日付は日付の型にする必要があります。だから、

：

angular.module('plunker', ['ngAnimate', 'ui.bootstrap']); 
 
     angular.module('plunker').controller('dateCtrl', function ($scope) { 
 
      $scope.model1 = new Date(); 
 
      $scope.model2 = new Date(); 
 
      $scope.mindate = new Date(); 
 
      $scope.dateformat="MM/dd/yyyy";    
 
     });

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> 
 
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script> 
 
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script> 
 
<script language="javascript" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script> 
 
<div ng-app="plunker"> 
 
    <div ng-controller="dateCtrl"> 
 
    <div style="float:left" > 
 
    From Date: 
 
    <input type="text" uib-datepicker-popup="{{dateformat}}" min-date="mindate" ng-model="model1" is-open="showFrom" ng-change="showTo = !showTo" /> 
 
    <span> 
 
      <button type="button" class="btn btn-default" ng-click="showFrom = !showFrom"> 
 
       <i class="glyphicon glyphicon-calendar"></i> 
 
      </button> 
 
     </span> 
 
    </div> 
 
    <div style="float:left"> 
 
    To Date: 
 
    <input type="text" uib-datepicker-popup="{{dateformat}}" min-date="model1" ng-model="model2" is-open="showTo" /> 
 
    <span> 
 
      <button type="button" class="btn btn-default" ng-click="showTo = !showTo"> 
 
       <i class="glyphicon glyphicon-calendar"></i> 
 
      </button> 
 
     </span> 
 
    </div> 
 
    </div> 
 
</div>

UPDATE：

ちょうど秒1を開くためにng-changeを使用しています。