单击下一个日期选择器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' 传递给你的 open 函数。因此，如果您有多个日期选择器的相同 html 代码，那么您将一起打开。

你需要为不同的datePickers定义不同的is-open名字，为每个datePickers定义不同的open函数更方便。那么您只需将关联的 datePicker 函数的 is-open 属性设置为 true 即可。

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

		    $scope.datepicker.dt1 = true;
		  };

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

		    $scope.datepicker.dt1 = true;
		  };

    <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>