Timepicker无法处理日历模式弹出窗口

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

你的时间选择器在没有弹出窗口的情况下工作正常吗？你可能想看看这个讨论- Get Jquery UI Calendar to Show on Top of Modal Popup

您的拾取器没有显示的原因之一是因为弹出对话框具有较高的z索引值。因此，尝试使用picker的z索引值，并给它一个较大的值，比如10000，看看它现在是否可见。