Question

我使用Ace Admin Responsive主题来设计我的Web应用程序。我需要在模态窗口中打开日期选择器组件。我用他们在主题中的方式。但是，当我点击日历时，没有任何显示。或者它可能会显示在模态对话框后面。如果我将日期选择器放在模态对话框之外，它的效果很好。是否可以在模态对话框中使用日期选择器？我的代码：要打开我的模态对话框：

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal-form" ng-click="clear()">
    <span class="glyphicon glyphicon-flash"></span> Create a new Hike
</button>

在我的对话框中，日期选择器组件：

<div class="row">
    <div class="col-xs-8 col-sm-11">
        <!-- #section:plugins/date-time.datepicker -->
        <div class="input-group">
            <input class="form-control date-picker" id="id-date-picker-1" type="text" data-date-format="dd-mm-yyyy" />
            <span class="input-group-addon">
                <i class="fa fa-calendar bigger-110"></i>
            </span>
        </div>
    </div>
</div>

Jquery代码：

 $('.date-picker').datepicker({
                    autoclose: true,
                    todayHighlight: true
                })
                //show datepicker when clicking on the icon
                .next().on(ace.click_event, function(){
                    $(this).prev().focus();
                });

Answer 1

如果它显示在对话框后面，则需要将{calender wrapper div元素的z-index设置为比模态更高的值。例如9999。您可以使用开发人员工具或firebug来检查日历HTML。它应该在body标签的末尾。

Bootstrap：模态对话框中的日期选择器

1 个答案: