今天,当我尝试在 Bootstrap Modal 上显示日期选择器时,我遇到了这个问题。
我正在使用bootstrap-datepicker作为日期选择器库。
这是我的模态形式:
<div class="form-group">
<label for="message-text" class="control-label">Start Date</label>
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right datepicker" id="datepicker2" name="start_date">
</div>
</div>
这是我的日期选择器脚本:
$('#datepicker2').datepicker({
autoclose: true,
format: 'yyyy-mm-dd',
zIndexOffset: 10000
});
我已经使用了 zIndexOffset,但它不起作用,日历仍然显示在模式后面。
有人可以提出解决方案吗?
谢谢。
最佳答案
您应该尝试在模态 div
内添加日期选择器容器。您可以为模式指定一个id
,如下所示:
<div class="form-group" id="myModalWithDatePicker">
<label for="start_date" class="control-label">Start Date</label>
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right datepicker" id="datepicker2" name="start_date">
</div>
</div>
然后您可以使用container
选项,如下所示:
$('#datepicker2').datepicker({
autoclose: true,
container: '#myModalWithDatePicker',
format: 'yyyy-mm-dd'
});
关于javascript - 日期选择器 : Datepicker on Modal (z-index),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37906313/