以模态形式显示日历

Question

我有模态表单来选择时间，但是显示模态表单时，日历落后于模态表单。 我想在模式表单上显示日历

 # $('#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">&times;</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> 

Answer 1

元素可能由于多种原因而重叠。 增加datepicker-div的z索引。 z-index仅影响具有位置的元素。 和日期选择器的位置已固定。

结果-https://www.screencast.com/t/dkpeBNbcpJq

 //Add in style file.
    div#ui-datepicker-div {
        z-index: 9999 !important;
    }

Answer 2

增加日期选择器的z-index大于模式的z-index