如何在模式弹出窗口中使用引导日期和时间选择器？

Question

我正在尝试在模式弹出窗口中实现日期和时间选择器。我能够显示日期选择器，但无法在模式窗口内显示时间选择器，当我单击时间选择器的输入文本字段时，它显示在模式窗口后面。

这是我的 html 代码：-

HTML 代码：

<div id="modal" class="modal fade in" style="display: block; margin-top:100px;" data-backdrop="static" aria-hidden="false">
<div class="main padder"> 
<table>
<tr>
  <td>              
    <input type="text" id="multiStartDate" name="multiStartDate" class="datepicker form-control" />                             
  </td>
<td>
<input type="text" id="multiStartTime" name="multiStartTime" class="form-control timepicker"/>  
</td>
<td>
<input type="text" id="multiEndDate" name="multiEndDate"   class="form-control timepicker" />
</td>
<td>
<a href="#" class="btn btn-md btn-orange btn-info m-r-small" id="addNewDate">Add</a>
</td>
</tr>
</table>
</div>
</div>

这是CSS代码：

.datepicker { 
       z-index: 100000 !important; 
       display: block; 
    }

    .timepicker{
       z-index: 100001 !important;
    }

这是Js代码：

我正在使用 Backbone.js 框架：

所以在我的backbone.js 视图中：

onShow : function(){

         $('#multiStartDate').datepicker({
        format: "mm-dd-yyyy", 
        autoclose: true,
        todayHighlight:true
        });

        $('#modal').modal('show');
        $('#multiStartTime').timepicker();
        },

Answer 1

为您的 datetimepicker 添加 css，它正在渲染，但位于模态后面，因此您需要在模态打开事件中增加 datetimepicker 的 z-index，例如

$("#modal").on("show.bs.modal",   function(){
 $("#multiStartTime").css("z-index","999"); 
 });