javascript - angularui bootstrap datepicker 弹出窗口未在日期选择时关闭

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

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

这是一个带有我描述的行为的 jsfiddle:https://jsfiddle.net/d3hzo23g/7/

Answer 1

我必须说，那真是令人抓狂。问题的根本原因是您在关闭它之前将日期选择器输入放入 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" />