Angular-UI引导日期选择器未在引导模式上显示

Angular - UI Bootstrap Datepicker not displaying over Bootstrap Modal

本文关键字：模式 显示 选择器 日期 Angular-UI      更新时间：2023-11-09

我有一个Angular应用程序，我正在使用UI引导。我有一个模态，它的底部有一个日期选择器。当展开Datepicker时，它会停留在模态中。我试过更改z-index，但这并没有改变任何东西。这是我的日期选择器html：

<div class="control-group">
  <label class="control-label">Birth Date:</label>
  <div class="controls">
    <div class="form-horizontal" ng-controller="DatepickerCtrl">
      <input name="birthdate" class="input-thick" type="text" datepicker-popup="MM/dd/yyyy" ng-model="model.dateOfBirth" is-open="opened" min="minDate" max="'2013-11-11'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" required />
      <button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>
      <p ng-show="!addPatientForm.birthdate.$valid && formSubmitted" class="form-error"><i class="fa fa-exclamation-circle "></i> <b>Date of Birth: </b>Enter a date in the format MM/DD/YYYY. It cannot be a future date.</p>
    </div>
  </div>
</div>

和js:

App.controller('DatepickerCtrl', function ($scope, $routeParams, $modal, $timeout) {
  $scope.today = function() {
    $scope.dt = new Date();
  };
  $scope.today();
  $scope.showWeeks = true;
  $scope.toggleWeeks = function () {
    $scope.showWeeks = ! $scope.showWeeks;
  };
  $scope.clear = function () {
    $scope.dt = null;
  };
  $scope.toggleMin = function() {
    $scope.minDate = ( $scope.minDate ) ? null : new Date();
  };
  $scope.open = function() {
    $timeout(function() {
      $scope.opened = true;
    });
  };
  $scope.dateOptions = {
    'year-format': 'yy',
    'starting-day': 1
  };
});

这里有一个plunker来展示我的问题。我需要做些什么才能使我的日期选择器正确显示？

从.modal-body中删除样式overflow-y: auto可以修复此问题。现在，overlow-y属性在内容溢出时自动添加滚动条（在本例中为日期选择器），而不是允许它溢出到模态主体之外。

@Jakemmarsh的回答基本正确
但在我的实践中，我使用了角带，并将日期选择器置于模态中，出现了与重新绘制类似的问题
我最终解决了它：

.modal-open .modal.repaint{overflow-y: hidden !important;}

和

$("body").delegate("[bs-datepicker]","click",function(){
    $(".modal-open .modal").addClass("repaint");
});

愿这对某人有所帮助

相关文章：