关闭日期选择器点击下一个日期选择器时AngularJS

Question

我在我的表单中有多个日期选择器。默认情况下，这些关闭，一旦选择日期，他们再次关闭。另外，即使我不选择日期，只需点击它，它会自动关闭。

但是，当我打开第一个日期并且不要单击外部或选择某个日期，然后只需打开第二个日期选择器时，第一个日期选择器就会保持打开状态。

我该如何避免这种情况，并确保即使点击第二个日期选择器时第一个自动关闭？

  <button type="button" id="dateButton" class="btn btn-default" ng-click="open($event,'dt')" > 
      <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" 
       is-open="datepicker.dt" min-date="minDate" max-date="maxDate" show-weeks="false" ng-required="true" 
       datepicker-options="dateOptions" show-button-bar="false" readonly="readonly"/> 
     </button> 

     <button type="button" id="dateButton" class="btn btn-default" ng-click="open($event,'dt2')" > 
      <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt2" 
       is-open="datepicker.dt2" min-date="minDate" max-date="maxDate" show-weeks="false" ng-required="true" 
        show-button-bar="false" readonly="readonly"/> 
     </button> 

_

$scope.datepicker={ 
    dt:false, 
    dt2:false 
}; 
$scope.open = function($event,which) { 
    $event.preventDefault(); 
    $event.stopPropagation(); 

    $scope.datepicker[which] = true; 
}; 
$scope.format = 'dd-MMM-yyyy'; 

这里是我做过什么：plnkr.co/edit/o9I3cRej9I7rZUcPpz6O?p=preview你看，如果你点击一个日期选择器，但只要按一下另外一个第一个将不会关闭

Answer 1

您正在使用is-from属性中的同名是“datepicker.dt”。 而你将'dt'传递给你的开放函数。所以，如果你有多个日期选择器的相同的HTML代码，你一起打开。

您需要为不同的datePickers定义不同的is-open名称，并且为每个datePickers定义不同的打开函数会更方便。然后，您需要的仅仅是将关联的datePicker函数的is-open属性设置为true。

\t $scope.openDt1 = function($event) { 
 
\t \t  $event.preventDefault(); 
 
\t \t  $event.stopPropagation(); 
 

 
\t \t  $scope.datepicker.dt1 = true; 
 
\t \t }; 
 

 
\t $scope.openDt2 = function($event) { 
 
\t \t  $event.preventDefault(); 
 
\t \t  $event.stopPropagation(); 
 

 
\t \t  $scope.datepicker.dt1 = true; 
 
\t \t };

<button type="button" id="dateButton" class="btn btn-default" ng-click="openDt1($event)"> 
 
      <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" 
 
       is-open="datepicker.dt1" min-date="minDate" max-date="maxDate" show-weeks="false" ng-required="true" 
 
       datepicker-options="dateOptions" show-button-bar="false" readonly="readonly"/> 
 
    </button> 
 

 
    <button type="button" id="dateButton" class="btn btn-default" ng-click="openDt2($event)"> 
 
      <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" 
 
       is-open="datepicker.dt2" min-date="minDate" max-date="maxDate" show-weeks="false" ng-required="true" 
 
       datepicker-options="dateOptions" show-button-bar="false" readonly="readonly"/> 
 
    </button>