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

我看着你的傻瓜。在script.js文件中，您有以下内容

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

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

$ scope.opened = true;和$ 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 - datepicker popup在开始日期和结束日期都会打开

1 个答案: