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定义不同的开放名称，并且为每个datePickers定义不同的开放函数会更方便。那么你需要的是将关联的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>

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

1 个答案: