角度 - 用户界面引导日期选择器不显示在引导模式

我有一个角度的应用程序，我正在使用用户界面引导。我在模态底部有一个带Datepicker的模态。展开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 
    }; 
});

Here是为了显示我的问题一个plunker。我需要做什么才能让Datepicker正确显示？

来源

2013-11-26 jhamm

你能提供一个jsFiddle吗？另外，我建议使用Angular Strap指令来引导UI元素，它们对我来说效果更好。 [AngulatStrap：datepicker]（http://mgcrea.github.io/angular-strap/#/datepicker） – Ulugbek

我添加了一个plunker来显示问题。 – jhamm

@Ulugbek我不知道纯粹的Bootstrap CSS问题是如何与JavaScript集成库（strap或angular-ui/bootstrap）相关的。 –

从.modal-body中删除样式overflow-y: auto解决了该问题。现在，overflow-y属性会在内容溢出时自动添加滚动条（在本例中为datepicker），而不是允许它溢出到模态体外。

来源

2013-11-26 16:36:16 Jakemmarsh

-1

@ Jakemmarsh的答案基本上是正确的！！
但在我的练习中，我使用了角度绑带，并将datepicker放在模态中，并且发生了与重绘类似的问题。
我终于被解决了它：

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

和

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

愿这会为别人的帮助。：/

来源

2014-11-04 06:33:41 soytian

你应该避免使用jquery作为小黑客。 – Marcio

我必须使用js，因为**重绘**在模态出现时发生 – soytian

角度 - 用户界面引导日期选择器不显示在引导模式

回答

相关问题