Bootstrap-ui datepicker close-on-date-selection

Question

Technologies: AngularJs and Bootstrap-ui

Enviroment: I use a collabsable filter section which is controlled by "FilterCtrl". Each input element in the filter is controlled by a nested controller like "TypeaheadCtrl" or "DatepickerCtrl". The ng-models of each one are bound with "$parent.field" in FilterCtrl.

Problem: Datepicker works fine, exept, and this is the issue, it does not close. According to the default settings (https://angular-ui.github.io/bootstrap/#/datepicker), the datepicker should close on select a date. It does not. Even if I click on the button-bar's "Close" button it does not. If the focus changes, it does 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: DatepickerCtrl:

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();
  });

FilterCtrl:

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);
    }
  });

I didnt found anyone who had a similar problem. I suppose it could be a scope issue but I have no idea what excactly the issue could be.

Answer 1

So based on your plunkr example, the issue I identified is in the event on your input. Instead of

ng-click="open()"

do

ng-focus="open()"

This happens due to the fact that after you select the date, angularjs tries to move the click event into the input box. Not sure why, but this is the behavior.

Answer 2

Smart and flexible solution: check the $event.target in open() method.

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