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-index值。因此，尝试尝试选择器的z-index值并给它一个大的值，例如10000，看看它现在是否可见。

Timepicker不适用于日历模式弹出窗口

1 个答案: