模态日期选择器

Posted 2023-05-07

【中文标题】模态日期选择器

【英文标题】：DatePicker in Modal

【发布时间】：2016-04-28 15:10:56

【问题描述】：

我在我的 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”格式的文本框本身的组合框。

【问题讨论】：

你是否包含了这个

Twitter Bootstrap Datepicker within modal window的可能重复

【参考方案1】：

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

        <style>
.datepickerz-index:1151 !important;
</style>

我从Twitter Bootstrap Datepicker within modal window 得到了这个解决方案 以前我在javascript里面试过，这就是为什么它不起作用。