时间选择器落后于Twitter引导程序模式 [英] Time picker going behind the twitter bootstrap modal
本文介绍了时间选择器落后于Twitter引导程序模式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在Java Spring MVC Web应用程序中使用引导程序日期时间选择器来分别选择日期和时间.我已包含所需的CSS和脚本. 我的HTML代码如下:
I am using bootstrap date-time picker in my Java Spring MVC web application to select date and time separately. I have included the CSS and scripts required. my HTML code would be as follows:
<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代码初始化日期和时间选择器: //初始化日期时间选择器
I am using the following javascript code to initialize the date and time pickers: //Initializing date time pickers
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());
});
我没有选择日期的问题.问题发生在时间选择器上.我发现与z索引相关的解决方案很少，但dint似乎对我有用.
I have no issue with selecting date. The issue happens with the time picker. I found few solutions related to z index, but dint seem to work for me.
推荐答案
经过研究，我从以下URL找到了解决方案:
After some research, I found the solution from the following URL:
https://github.com/jdewit/bootstrap-timepicker/issues/326
我在样式表中添加了一个CSS条目，以便为时间选择器设置z-index，问题已解决:
I added a CSS entry to my stylesheet to set the z-index for the time picker and the issue was solved:
.bootstrap-timepicker-widget.dropdown-menu { z-index: 1050!important; }
这篇关于时间选择器落后于Twitter引导程序模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
