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

我必须说，这非常让人抓狂。问题的根本原因是您在关闭它之前将datepicker输入放在label元素内。在我想出这个问题之前，我不想承认有多少不同的方法我尝试用不同的属性和事件来修复它。

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

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

angularui bootstrap datepicker弹出窗口未在日期选择上关闭

2 个答案: