html - 模态中的日期选择器

Question

我在我的 php 应用程序的模态对话框中添加了一个日期。当我单击控件时，日历显示在页面的左上角，即使在选择日期之后，当我单击某处时日历也不会关闭.我的代码:

<div class="modal" id="apply_Compensation_Leave" tabindex="-1" role="dialog" aria-labelledby="messageModelLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content"> 
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><li class="fa fa-times"/></button>
        <h3 style="font-size: 17px;">Apply Leave</h3>
    </div>
<div class="modal-body">
    <form class="form-horizontal" id="Compensation_Leave" >
    <div class="control-group">
        <label class="control-label">Leave Dates</label>

        <div class="control-group">
            <label class="control-label" for="from">From</label>
            <div class="input-group date" data-date="" data-date-format="yyyy-mm-dd">               
                <input type='text' id="startdate" class="form-control" name="startdate" ></input>
                <span class="add-on input-group-addon"><i class="fa fa-calendar"></i></span>
            </div>
        </div>

        <div class="control-group">
            <label class="control-label" for="to">To</label>
            <div class="input-group date" data-date="" data-date-format="yyyy-mm-dd">   
                <input id="enddate" type="text" class="form-control" name="enddate" ></input>
                <span class="add-on input-group-addon"><i class="fa fa-calendar"></i></span>
            </div>
        </div>

        <div class="control-group">
            <label class="control-label" for="leave_status">Reason</label>
            <div class="controls">
                <textarea id="leave_reason" class="form-control" name="leave_reason" maxlength="500"></textarea>
            </div>
        </div>      

    </div>
    </form>
</div>
    <div class="modal-footer">      
            <button onclick="" class="btn">Apply Leaves</button>
            <button onclick="modJs.showLeaveView();return false;" class="btn">Back</button>     
    </div>

</div>
</div>
</div>    
 <script type="text/javascript">
            $(function () {
                $('#startdate,#enddate').datetimepicker();
            });
        </script>

如果我像这样更改我的脚本:

<script type="text/javascript">
            $(function () {
                $('#startdate,#enddate').datetimepicker({ z-index: 9999 !important;});
            });
        </script>

日历没有出现，只是它以“yyyy-mm-dd”格式在文本框本身中将所有日期显示为组合框。

Answer 1

我在 php 页面中添加了如下样式，现在可以正常工作了。

        <style>
.datepicker{z-index:1151 !important;}
</style>

我从 Twitter Bootstrap Datepicker within modal window 得到了这个解决方案以前我在 javascript 中尝试过，这就是它不起作用的原因。