javascript - 以模态形式弹出显示日历
问题描述
我有模态表单来选择时间,但是当模态表单显示时日历在模态表单后面。我想在模态表单上显示日历
#
$('#datetimepicker1').datepicker();
$('#datetimepicker2').datepicker();
$(document).on('click', '#btn_ok', function() {
alert($('#datetimepicker1').val());
})
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> #
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Chọn thời gian</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="form-inline">
<label style="padding-right: 10px">Từ</label>
<div class="input-group date" data-target-input="nearest">
<input type="text" id="datetimepicker1" class="form-control datetimepicker-input">
</div>
<br>
<div class="modal-footer">
<button class="btn btn-success" id="btn_ok">OK</button>
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
</div>
解决方案
由于各种原因,元素可能会重叠。增加datepicker-div的 z-index 。z-index 仅影响具有位置的元素。和 datepicker 的位置是固定的。
结果 - https://www.screencast.com/t/dkpeBNbcpJq
//Add in style file.
div#ui-datepicker-div {
z-index: 9999 !important;
}
推荐阅读
- javascript - JQuery Ajax Success Handler 找不到类函数
- java - 将我的第二个活动中的图像的可见性设置为我的主要活动中的可见性?
- rest - 如何检索与在公共数据集上执行 Google BigQuery 相关的作业信息?
- c# - 有没有办法在 Azure Key Vault 中存储超过 25KB 的机密?
- javascript - 如何滚动到特定于桌面视图的 ID 并将其默认设置为移动视图?
- scala - Spark Streaming DF 并行处理
- python - 如何通过特定的浏览器作为参数。它的错误:py.test:错误:无法识别的参数:--browser IE
- java - 膨胀类 com.google.android.material.internal.NavigationMenuItemView 时出错
- r - R- 在同一个自动图中绘制多个预测
- r - 通过 R 中的 paws 包查询 AWS Athena 时如何获得完整结果?