angularui bootstrap datepicker popup is not closing on date selection

Question

I have two datepicker popups in my application and they are working just fine EXCEPT the popups don't stay closed on date selection. It appears to close then opens right back up again. They do close if I hit the close button or lose focus. But it should close when selecting a date.

My HTML:

<input type="text" 
    id="startDatePicker" 
    class="form-control input-sm" 
    ng-model="vm.dateStart" 
    uib-datepicker-popup="MM-dd-yyyy" 
    datepicker-options="vm.startDateConfig" 
    ng-focus="vm.startDateConfig.open=true" 
    minDate="vm.startDateConfig.minDate" 
    is-open="vm.startDateConfig.open"
    show-button-bar="true" />

and in my controller:

angular.module('etixApp').controller('etixController', ['$scope', '$http', '$uibModal', '$window', '$filter', function($scope, $http, $uibModal, $window, $filter) {
  /* jshint validthis: true */
  var vm = this;
  vm.startDateConfig = {
    // open: false,
    minDate: new Date(Date.now())
  };
  vm.endDateConfig = {
    // open: false, 
    minDate: new Date(vm.dateStart)
  };
  //watching to see what date is set in the start date
  //field and setting that date as the minimum for end date
  $scope.$watch("vm.dateStart", function(newValue, oldValue) {
    if (newValue === oldValue) {
      return;
    }
    vm.endDateConfig.minDate = newValue;
  });
}]);

Here is a jsfiddle with the behavior I describe: https://jsfiddle.net/d3hzo23g/7/

Answer 1

That was pretty maddening, I must say. The root cause of the problem was that you put the datepicker input inside of the label element before closing it. I don't want to admit how many different ways I tried to fix it with different attributes and events before I figured that out.

Anywho, here's the fixed fiddle .

<label>
  Start Date
</label>     <!-- <<<< this... THIS... THIS!!! -->
<input type="text" 
       id="startDatePicker" 
       class="form-control input-sm" 
       ng-model="vm.dateStart" 
       uib-datepicker-popup="MM-dd-yyyy" 
       datepicker-options="vm.startDateConfig" 
       ng-focus="vm.startDateConfig.open=true" 
       minDate="vm.startDateConfig.minDate" 
       is-open="vm.startDateConfig.open"
       show-button-bar="true" />

Answer 2

The problem you are experiencing is because you are opening the calendar on focus of the input. When you select a date is actually closing the calendar and setting focus back to the input , triggering another open of the calendar.