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中尝试过，这就是为什么它没有用。

Modal中的DatePicker

1 个答案: