Bootstrap-ui 日期选择器关闭日期选择

Question

技术： AngularJs 和 Bootstrap-ui

环境：我使用由 "FilterCtrl" 控制的可协作过滤器部分。过滤器中的每个输入元素都由嵌套控制器控制，如 "TypeaheadCtrl" 或 "DatepickerCtrl"。每个的 ng-models 在 FilterCtrl 中都绑定了“$parent.field”。

问题： Datepicker 工作正常，例外，这就是问题所在，它不会关闭。根据默认设置 (https://angular-ui.github.io/bootstrap/#/datepicker)，日期选择器应在 select 日期关闭。它不是。即使我点击按钮栏的 "Close" 按钮也没有。如果焦点发生变化，它会关闭。

HTML:

<div class="" ng-controller="FilterCtrl">
  <a class="black bold nodecoration" ng-click="isCollapsed = !isCollapsed" role="button">Filter</a>
<!-- Filter -->
  <div class="bckgrnd-lgrey bordered max-width" collapse="isCollapsed" id="findenFilter">
    <div class="nobreak" ng-controller="TypeaheadCtrl">
      <label>Suchbegriff:
        <input ng-model="$parent.searchText" placeholder="z.B. Rock" type="text" typeahead="prediction for prediction in predictions | filter:$viewValue |limitTo:8"></label>
    </div>
    <div class="nobreak" ng-controller="DatepickerCtrl">
      <label>Datum:
        <input class="" close-text="Close" datepicker-popup="{{format}}" is-open="status.opened" ng-click="open()" ng-model="$parent.selectedDate" show-weeks="false" type="text">
    </div>
    <div class="nobreak">
      <label>Land: </label>
    </div>

    <button type="button" name="button" ng-click="printValues()">log values</button>
  </div>

</div>

JS: 日期选择器Ctrl:

angular.module('tbdApp')
  .controller('DatepickerCtrl', function($scope) {
    this.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];
    $scope.today = function() {
      $scope.selectedDate = new Date();
    };
    $scope.clear = function() {
      $scope.selectedDate = null;
    };
    $scope.open = function($event) {
      $scope.status.opened = true;
    };


    $scope.status = {
      opened: false
    };

    $scope.formats = ['dd.MM.yyyy', 'dd-MMMM-yyyy', 'yyyy/MM/dd'];
    $scope.format = $scope.formats[0];
    $scope.today();
  });

过滤器控件：

angular.module('tbdApp')
  .controller('FilterCtrl', function ($scope) {
    this.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];
    $scope.isCollapsed = false;
    $scope.selectedDate = null;
    $scope.searchText = null;
    $scope.printValues = function () {
      console.log("collapsed: " + $scope.isCollapsed);
      console.log("selectedDate: " + $scope.selectedDate);
      console.log("searchText: " + $scope.searchText);
    }
  });

我没有找到有类似问题的人。我想这可能是范围问题，但我不知道问题到底是什么。

Answer 1

因此，根据您的 plunkr 示例，我确定的问题是在您输入的事件中。而不是

ng-click="open()"

做

ng-focus="open()"

发生这种情况是因为在您 select 日期之后，angularjs 试图将点击事件移动到输入框中。不知道为什么，但这是行为。

Answer 2

聪明灵活的解决方案：检查 open() 方法中的 $event.target。

HTML:

<div class="my-datepicker" ng-click="datePickers.open(0, $event)">
    <input type="text" ng-model="date_min" uib-datepicker-popup is-open="datePickers.opened[0]"/>
    <span class="glyphicon glyphicon-calendar"></span>
</div>
<div class="my-datepicker" ng-click="datePickers.open(1, $event)">
    <input type="text" ng-model="date_max" uib-datepicker-popup is-open="datePickers.opened[1]"/>
    <span class="glyphicon glyphicon-calendar"></span>
</div>

JS:

$scope.datePickers = {
    opened: [false, false],

    open: function (i, e) {
        if (!$(e.toElement).parent().hasClass('my-datepicker')) return;
        this.opened[i] = true;
    }
};

Bootstrap-ui 日期选择器关闭日期选择

Bootstrap-ui datepicker close-on-date-selection

datepicker

angularjs

angular-ui-bootstrap