时间选择器无法处理日历模式弹出窗口

Question

我正试图通过单击"添加事件"按钮在完整日历上添加一个具有时间表的事件。但"时间选择器"不适用于日历模式弹出框。

我尝试使用以下代码：

在calendar_show.js 中

// Function to quickModal
function quickModal(start, end, allDay)
{   
    $('#cal_quickSaveModal').modal('show');
    $(".modal-header").html('<div id="event_title"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><label>Title : </label><input name="title" type="text" class="input-title form-control"></div>');
    $(".modal-body").html('<form id="event_description"><label>Description : </label><textarea class="input form-control" name="notes"></textarea><label>Start Time : </label><div class="input-group bootstrap-timepicker"><input id="timep1" type="text" name="start" class="form-control timep1"><span class="input-group-addon" style="left: 100px; width: 3px; height: 3px;"><i class="icon-time fa fa-clock-o"></i></span></div><label>End Time : </label><div class="input-group bootstrap-timepicker"><input id="timep2" type="text"  name="end" class="form-control timep2"><span class="input-group-addon" style="left: 100px; width: 3px; height: 3px;"><i class="icon-time fa fa-clock-o"></i></span></div></form>');
    $(".modal-footer").show();
    calendar.start = start;
    calendar.end = end;
    calendar.allDay = allDay;
    // Save button
    $(".modal-footer").delegate('[data-option="quickSave"]','click', function(e) 
    {   
        var event_title = $("div#event_title").find('input').serialize();
        var event_description = $("form#event_description").find("textarea.input").serialize();
        var event_stime = $("form#event_description").find("#timep1").serialize();
        var event_etime = $("form#event_description").find("#timep2").serialize();          
        quickSave(event_title, event_description, calendar.start, calendar.end, event_stime, event_etime);          
        e.preventDefault();
    });
}; // end quickModal

我在calendar.php 中添加了时间选择器

<script src="../common/js/calendar_show.js"></script>
<script type="text/javascript">
    $("#timep1").timepicker();
    $("#timep2").timepicker();
</script>

Answer 1

您的时间选择器在没有弹出窗口的情况下工作正常吗？你可能想看看这个讨论-让Jquery UI日历显示在模式弹出的顶部

选择器不显示的原因之一是弹出对话框的z索引值较高。所以，试着用picker的z索引值进行实验，给它一个大值，比如10000，看看它现在是否可见。