我试图谷歌搜索SO以寻找类似的问题,但还没有发现任何东西。 我有一个问题,我从jquery创建并打开一个模态并尝试访问日期选择器,但它不会激活datepickers JS。
YOUR_SECRET_ACCESS_KEY
(关于长线长度的道歉,但是我已经尽可能地删除了 - 现在只显示与问题相关的代码。)
我在顶部引用了这些脚本:
$("[id=add]").click(function () {
$("#myModal .modal-header h4").html("Request for Change");
$("#myModal .modal-body").html('<form class="form-horizontal" role="form"><br /><br /><label class="col-sm-2 control-label">Date Required</label><div class="col-sm-3"><div class="input-group date col-sm-8"><input type="text" class="form-control" id="DateRequired"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span></div></div></div>');
$("#myModal").modal("show");
});
在与上面jquery函数相同的<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<script src="~/Scripts/jquery.tablesorter.min.js"></script>
标记中,在最顶层我有:
<script> </script>
我有这样的代码以类似的方式使用(除了没有jquery模式 - 只是在cshtml页面上),它正常工作。我不知道为什么这种方式不起作用。我已经使用开发人员工具来尝试跟踪问题,但是没有错误 - 脚本正确加载,但是当单击Date Required时它不会触发datepicker的jquery。
我是否使用Jquery html错误来创建模态?
干杯
答案 0 :(得分:11)
日期选择器隐藏在模态之后。
将datepicker&#39; s z-index
设置在模式1050
之上。
另外将你的日期选择代码包装在bootstrap的模态显示事件中。
$('#myModal').on('shown.bs.modal', function() {
$('.input-group.date').datepicker({
format: "dd/mm/yyyy",
startDate: "01-01-2015",
endDate: "01-01-2020",
todayBtn: "linked",
autoclose: true,
todayHighlight: true,
container: '#myModal modal-body'
});
});
$("[id=add]").click(function() {
$("#myModal .modal-header h4").html("Request for Change");
$("#myModal .modal-body").html('<form class="form-horizontal" role="form"><br /><br /><label class="col-sm-2 control-label">Date Required</label><div class="col-sm-3"><div class="input-group date col-sm-8"><input type="text" class="form-control" id="DateRequired"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span></div></div></form>');
$("#myModal").modal("show");
});
&#13;
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<style>
.datepicker {
z-index: 1600 !important; /* has to be larger than 1050 */
}
</style>
<div class="well">
<button type="button" id="add">Add</button>
</div>
<div id="myModal" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4></h4>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
&#13;
注意:我添加了bootstrap v3.3.6 CSS并删除了对demoort的tablesorter脚本的本地引用。
答案 1 :(得分:3)
你必须在模态加载后调用datepicker:
$("[id=add]").click(function() {
$("#myModal .modal-header h4").html("Request for Change");
$("#myModal .modal-body").html('<form class="form-horizontal" role="form"><br /><br /><label class="col-sm-2 control-label">Date Required</label><div class="col-sm-3"><div class="input-group date col-sm-8"><input type="text" class="form-control" id="DateRequired"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span></div></div></div>');
$("#myModal").modal("show");
$('#myModal').on('shown.bs.modal', function(e) {
$('.input-group.date').datepicker({
format: "dd/mm/yyyy",
startDate: "01-01-2015",
endDate: "01-01-2020",
todayBtn: "linked",
autoclose: true,
todayHighlight: true
});
});
});
答案 2 :(得分:2)
在样式标签中,放置以下内容并起作用。模态的z索引超过日期选择器的z索引。因此将日期选择器的z索引放置在9999
.ui-datepicker {
z-index: 9999 !important;
}
答案 3 :(得分:1)
答案 4 :(得分:0)
$(document).on('click','#add',function(){
$('.input-group.date').datepicker({
format: "dd/mm/yyyy",
startDate: "01-01-2015",
endDate: "01-01-2020",
todayBtn: "linked",
autoclose: true,
todayHighlight: true
});
})
答案 5 :(得分:0)
它是由z-index引起的, 到现在为止,您可以在styles.css中手动设置日期选择器的z-index
/*Date picker container*/ bs-datepicker-container { z-index: 3000; }
答案 6 :(得分:0)
On_Open
答案 7 :(得分:0)
对我有用!
$('#modal_form_horizontal').on('shown.bs.modal', function() {
$('.daterangepicker').css('z-index','1600');
});
答案 8 :(得分:0)
默认情况下,模式z索引为2050。您的日期选择器z索引应大于模式z索引。
赞:
.datepicker {
z-index: 2051 !important;
}
答案 9 :(得分:0)
在使用引导程序时(已通过引导程序4.3.1进行了测试),并使用jquery(3.4.1)和jquery ui(1.12.1)进行了日期选择器和模式查询。日期选择器可以在模式中正常工作。
除非您还在元素输入中使用了form-control(bootstrap)类。 引导程序中的css会将输入设置为css位置:相对。此时,日期选择器将不再可见。
该问题的另一种解决方法是:
.form-control.datepicker {position:unset}
或者不使用表单控件类