angularui bootstrap 日期选择器弹出窗口在选择日期时未关闭

Question

我的应用程序中有两个日期选择器弹出窗口，它们工作正常，除了弹出窗口不会在日期选择时保持关闭状态。它似乎关闭然后再次打开。如果我按下关闭按钮或失去焦点，它们就会关闭。但是选择日期应该会关闭。

我的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" />

在我的控制器中：

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

这是一个 jsfiddle，其中包含我描述的行为：https://jsfiddle.net/d3hzo23g/7/

Answer 1

您遇到的问题是因为您在输入的焦点上打开日历。当您 select 一个日期实际上是关闭日历并将焦点设置回输入时，触发另一个打开日历。

Answer 2

我必须说，那真是令人抓狂。问题的根本原因是您在关闭 label 元素之前将日期选择器输入放入其中。我不想承认在弄清楚之前我尝试过多少种不同的方法来用不同的属性和事件修复它。

任何人，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" />

angularui bootstrap 日期选择器弹出窗口在选择日期时未关闭

angularui bootstrap datepicker popup is not closing on date selection

javascript

angularjs

angular-ui-bootstrap