angularjs

Question

如何防止在仅单击 1 个输入时同时打开日期选择器弹出窗口？

<form>
        <div class="form-group">
          <label for="fromDate">From:</label>
          <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" show-weeks="false" ng-click="open($event)" name="fromDate" id="fromDate" />
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open($event)">
              <i class="glyphicon glyphicon-calendar"></i>
            </button>
          </span>
        </div>
        <div class="form-group">
          <label for="toDate">To:</label>
          <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="toDate" is-open="opened2" datepicker-options="dateOptions" ng-required="true" close-text="Close" show-weeks="false" ng-click="open($event)" name="toDate" id="toDate" />
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open($event)">
              <i class="glyphicon glyphicon-calendar"></i>
            </button>
          </span>
        </div>
      </form>

Answer 1

我看了你的plunkr。在您的 script.js 文件中，您有以下内容

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

  $scope.opened = true;
   $scope.opened2 = true;
};

$scope.opened = 真；和 $scope.opened2=true；两者都被设置。这迫使他们都打开。单击任一日历按钮时，您正在调用此函数

ng-click="open($event)"

is-open 将强制日历在代码中的其他地方设置变量时显示。记住它是双向绑定

至于你的解决方案。我认为修复它的一个简单方法是将另一个变量传递到您的 open 方法中，告诉它单击了哪个按钮所以

$scope.open = function($event, calId) {
  $event.preventDefault();
  $event.stopPropagation();

  if(calId===1) $scope.opened = true;
  if(calId===2) $scope.opened2 = true;
};

然后在您的 html 中将按钮更改为以下传入 1、2、3 等。对于您要在页面上显示的任何日期选择器。

ng-click="open($event,1)"

angularjs - 日期选择器弹出窗口在开始日期和结束日期都打开

angularjs - datepicker popup opens both in start date and end date

datepicker

twitter-bootstrap