推特 bootstrap 模式后面的时间选择器

Question

我在 Java Spring MVC 网络应用程序中使用 bootstrap 日期时间选择器来分别 select 日期和时间。我已经包含了 CSS 和所需的脚本。我的 HTML 代码如下：

<div class="form-group">
    <label class="col-lg-2 control-label">Start</label>
    <div class="col-lg-10">
        <div class="row">
            <div class="col-sm-6">
                <!--Bootstrap Datepicker : Component-->
                <div id="dripCampaignStartDate">
                    <label class="control-label" for="startDate">Start Date</label>
                    <div class="input-group date">
                        <input type="text" class="form-control" id="startDate" name="startDate" readonly="readonly">
                        <span class="input-group-addon"><i class="swcm-pli-calendar-4"></i></span>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <!--Bootstrap Timepicker : Component-->
                <label class="control-label" for="startTime">Start Time</label>
                <div class="input-group date" id="dripCampaignStartTime">
                    <input type="text" class="form-control" id="startTime" name="startTime" readonly="readonly">
                    <span class="input-group-addon"><i class="swcm-pli-clock"></i></span>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="form-group">
    <label class="col-lg-2 control-label">End</label>
    <div class="col-lg-10">
        <div class="row">
            <div class="col-sm-6">
                <!--Bootstrap Datepicker : Component-->
                <div id="dripCampaignEndDate">
                    <label class="control-label" for="endDate">End Date</label>
                    <div class="input-group date">
                        <input type="text" class="form-control" id="endDate" name="endDate" readonly="readonly">
                        <span class="input-group-addon"><i class="swcm-pli-calendar-4"></i></span>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <!--Bootstrap Timepicker : Component-->
                <label class="control-label" for="endTime">End Time</label>
                <div class="input-group date" id="dripCampaignEndTime">
                    <input type="text" class="form-control" id="endTime" name="endTime" readonly="readonly">
                    <span class="input-group-addon"><i class="swcm-pli-clock"></i></span>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="form-group">
    <label class="col-lg-2 control-label">DNS Time</label>
    <div class="col-lg-10">
        <div class="row">
            <div class="col-sm-6">
                <!--Bootstrap Datepicker : Component-->
                <label class="control-label" for="DNSStartTime">From</label>
                <div class="input-group date" id="dripCampaignDNSStartTime">
                    <input type="text" class="form-control" id="DNSStartTime" name="DNSStartTime" readonly="readonly">
                    <span class="input-group-addon"><i class="swcm-pli-clock"></i></span>
                </div>
            </div>
            <div class="col-sm-6">
                <!--Bootstrap Datepicker : Component-->
                <label class="control-label" for="DNSEndTime">To</label>
                <div class="input-group date" id="dripCampaignDNSEndTime">
                    <input type="text" class="form-control" id="DNSEndTime" name="DNSEndTime" readonly="readonly">
                    <span class="input-group-addon"><i class="swcm-pli-clock"></i></span>
                </div>
            </div>
        </div>
    </div>
</div>

我正在使用以下 javascript 代码来初始化日期和时间选择器： //初始化日期时间选择器

var currentDate = new Date();
var tomorrow = new Date();
tomorrow.setDate(currentDate.getDate() + 1);
var minDateValue = new Date();
var maxDateValue = new Date();

$('#dripCampaignStartDate .date').datetimepicker({
    format: 'L',
    allowInputToggle: true,
    ignoreReadonly: true,
    useCurrent: false,
    minDate: currentDate,
    defaultDate: currentDate
});

$('#dripCampaignEndDate .date').datetimepicker({
    format: 'L',
    allowInputToggle: true,
    ignoreReadonly: true,
    useCurrent: false,
    minDate: currentDate,
    defaultDate: currentDate
});

$('#dripCampaignEndDate .date').data("DateTimePicker").date(tomorrow);

$("#dripCampaignStartDate .date").on("dp.change", function (e) {
    $('#dripCampaignStartDate .date').data("DateTimePicker").minDate(moment().millisecond(0).second(0).minute(0).hour(0));
    minDateValue = new Date(e.date);
    minDateValue.setDate(minDateValue.getDate());
    minDateValue.setHours(0,0,0,0);
    $('#dripCampaignEndDate .date').data("DateTimePicker").minDate(minDateValue);
    if($('#dripCampaignEndDate .date').data("DateTimePicker").date() < $('#dripCampaignStartDate .date').data("DateTimePicker").date())
    {
        tomorrow = new Date(minDateValue);
        tomorrow.setDate(tomorrow.getDate() + 1);
        $('#dripCampaignEndDate .date').data("DateTimePicker").date(tomorrow);
    }
});

$("#dripCampaignEndDate .date").on("dp.change", function (e) {
    minDateValue.setHours(0,0,0,0);
    $('#dripCampaignEndDate .date').data("DateTimePicker").minDate(minDateValue);
    maxDateValue = new Date(e.date);
    maxDateValue.setDate(maxDateValue.getDate());
    $('#dripCampaignStartDate .date').data("DateTimePicker").minDate(moment().millisecond(0).second(0).minute(0).hour(0));
    maxDateValue.setHours(0,0,0,0);
    $('#dripCampaignStartDate .date').data("DateTimePicker").maxDate(maxDateValue);
});

currentDate.setTime(currentDate.getTime() + (60*60*1000));

$('#dripCampaignStartTime, #dripCampaignEndTime, #dripCampaignDNSStartTime, #dripCampaignDNSEndTime').timepicker({
    defaultTime: currentDate
});

$('#start-Time').val($('#dripCampaignStartTime').val());
$('#endTime').val($('#dripCampaignEndTime').val());
$('#DNSStartTime').val($('#dripCampaignDNSStartTime').val());
$('#DNSEndTime').val($('#dripCampaignDNSEndTime').val());

$(document).on( 'change', '#dripCampaignStartTime' ,function (event){
    $('#start-Time').val($('#dripCampaignStartTime').val());
});

$(document).on( 'change', '#dripCampaignEndTime' ,function (event){
    $('#endTime').val($('#dripCampaignEndTime').val());
});

$(document).on( 'change', '#dripCampaignDNSStartTime' ,function (event){
    $('#DNSStartTime').val($('#dripCampaignDNSStartTime').val());
});

$(document).on( 'change', '#dripCampaignDNSEndTime' ,function (event){
    $('#DNSEndTime').val($('#dripCampaignDNSEndTime').val());
});

我对select约会没意见。问题发生在时间选择器上。我发现很少有与 z index 相关的解决方案，但 dint 似乎对我有用。

Answer 1

经过一番研究，我从以下URL找到了解决方案：

https://github.com/jdewit/bootstrap-timepicker/issues/326

我在我的样式表中添加了一个 CSS 条目来设置时间选择器的 z-index，问题已解决：

 .bootstrap-timepicker-widget.dropdown-menu { z-index: 1050!important; }

推特 bootstrap 模式后面的时间选择器

Time picker going behind the twitter bootstrap modal

jquery

bootstrap-modal

bootstrap-datetimepicker