Javascript 模态中的 Bootstrap 日期选择器不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35268857/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap datepicker in modal not working
提问by Craig
I've tried to google and search SO for a similar question, but haven't found anything as of yet. I have an issue where I create and open a modal from jquery and try to access a date picker, however it doesn't activate the datepickers JS.
我试图用谷歌搜索类似的问题，但还没有找到任何东西。我有一个问题，我从 jquery 创建并打开一个模态并尝试访问日期选择器，但是它没有激活日期选择器 JS。
$("[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");
});
(Apologies about the long line length, however I have removed as much as I can - just showing the code which relates to the problem now.)
（对长线长度表示歉意，但是我已经尽可能多地删除了 - 现在只显示与问题相关的代码。）
I have these scripts referenced at the top:
我在顶部引用了这些脚本：
<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>
And in the same <script> </script>tag as the jquery function above, at the very top I have:
在与<script> </script>上面的 jquery 函数相同的标签中，在最顶部我有：
$('.input-group.date').datepicker({
format: "dd/mm/yyyy",
startDate: "01-01-2015",
endDate: "01-01-2020",
todayBtn: "linked",
autoclose: true,
todayHighlight: true
});
I have this code used in an similar way (except no jquery modal - simply on a cshtml page) that works correctly. I don't know why this way won't work. I've used developer tools to try to trace an issue, but there are no errors - the scripts load correctly however when clicking the Date Required it doesn't fire to the jquery for datepicker.
我以类似的方式使用了这段代码（除了没有 jquery 模式 - 只是在 cshtml 页面上），它可以正常工作。我不知道为什么这种方式行不通。我已经使用开发人员工具尝试跟踪问题，但没有错误 - 脚本正确加载，但是当单击所需日期时，它不会触发日期选择器的 jquery。
Am I using the Jquery html wrong to create the modal?
我是否错误地使用 Jquery html 来创建模态？
Cheers
干杯
回答by luchaos
The datepicker is hiding behind the modal.
日期选择器隐藏在模态后面。
Set datepicker's z-indexabove the modal's which is 1050.
将日期选择器设置z-index在模态上方，即1050.
Additionally wrap your datepicker code in bootstrap's modal shown event.
另外将您的日期选择器代码包装在引导程序的模式显示事件中。
$('#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");
});<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>Note: I added bootstrap v3.3.6 CSS and removed the local reference to the tablesorter script for the demo.
注意：我添加了 bootstrap v3.3.6 CSS 并删除了对演示的 tablesorter 脚本的本地引用。
回答by Supun Praneeth
well you have to call the datepicker after modal loaded:
那么你必须在模式加载后调用日期选择器：
$("[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
});
});
});
回答by mzografski
You need to initiate the date picker on the Modal shown event
您需要在Modal 显示的事件上启动日期选择器
回答by Chinthaka
$('#myModal').on('shown.bs.modal', function (e) {
$('.date').datepicker();
});
回答by Евгений К
It works for me!
这个对我有用！
$('#modal_form_horizontal').on('shown.bs.modal', function() {
$('.daterangepicker').css('z-index','1600');
});
回答by Altaf
By default, modal z-index is 2050. Your datepicker z-index should be more than modal z-index.
默认情况下，modal z-index 为 2050。您的日期选择器 z-index 应该大于 modal z-index。
Like:
喜欢：
.datepicker {
z-index: 2051 !important;
}
回答by Bunkerbuster
When using bootstrap (tested with bootstrap 4.3.1) And jquery (3.4.1) jquery ui (1.12.1) for the datepicker and modal. The datepicker will work fine in a modal.
使用 bootstrap 时（使用 bootstrap 4.3.1 测试）和 jquery (3.4.1) jquery ui (1.12.1) 用于日期选择器和模态。日期选择器将在模态中正常工作。
Except if u are also using the class form-control (bootstrap) in your element input. The css from bootstrap will set the input with the css position: relative. At this moment the datepicker will no longer will be visible.
除非您还在元素输入中使用类表单控件（引导程序）。bootstrap 中的 css 将使用 css position:relative 设置输入。此时日期选择器将不再可见。
A other fix to this issue wil be:
此问题的另一个解决方法是：
.form-control.datepicker {position:unset}
or not using the form-control class
或不使用表单控件类
回答by Carlos Malaver
In a style label, put the following and it worked. The z-index of the modal exceeds that of the datepicker. so place the z-index of the datepicker at 9999
在样式标签中，输入以下内容即可。模态的 z-index 超过日期选择器的 z-index。所以将日期选择器的 z-index 放在 9999
.ui-datepicker {
z-index: 9999 !important;
}
回答by Haz Pro
$(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
});
})
回答by Parveen Chauhan
It is caused by the z-index, By now you can set manually the z-index of the date picker in your styles.css
它是由 z-index 引起的，现在您可以在 style.css 中手动设置日期选择器的 z-index
/*Date picker container*/ bs-datepicker-container { z-index: 3000; }
