Javascript 模态内的 Bootstrap DatePicker 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32778903/
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 inside Modal not working
提问by Kim Ocampo Octaviano
I have this datepicker inside a modal but not working. I already tried some of the codes i saw in the forum, but none of them is working. Could this be a javascript problem? I am not sure what making it not to show the datepicker,anyone who can help me please thanks 
我在模态中有这个日期选择器但不起作用。我已经尝试了我在论坛中看到的一些代码，但它们都不起作用。这可能是一个javascript问题吗？我不确定是什么让它不显示日期选择器，任何可以帮助我的人请谢谢
<script>
$(document).ready(function() {
$('#datePicker')
.datepicker({
format: 'mm/dd/yyyy'
})
.on('changeDate', function(e) {
// Revalidate the date field
$('#eventForm').formValidation('revalidateField', 'date');
});
$('#eventForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
name: {
validators: {
notEmpty: {
message: 'The name is required'
}
}
},
date: {
validators: {
notEmpty: {
message: 'The date is required'
},
date: {
format: 'MM/DD/YYYY',
message: 'The date is not a valid'
}
}
}
}
});
});
</script><div class="form-group">
<label class="col-xs-3 control-label">Date</label>
<div class="col-xs-5 date">
<div class="input-group input-append date" id="datePicker">
<input type="text" class="awe-calendar" name="date" />
<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>回答by SjaakvBrabant
add z-index above 1051 in class datepicker
在类日期选择器中添加 1051 以上的 z-index
add something like this in page or css
在页面或 css 中添加类似的内容
<style>
.datepicker{z-index:1151 !important;}
</style>
回答by Abhilash Thomas
The same issue i faced, the best method is please check the below code which i used to fix this issue. This will work wen you click any where in the body
我遇到了同样的问题，最好的方法是检查我用来解决这个问题的以下代码。这将在您单击正文中的任何位置时起作用
Please add the just above of
请添加上面的
div model-body
div 模型体
<script>
$(document).on("click", ".modal-body", function () {
$("#datepicker").datepicker({
dateFormat: 'yy-mm-dd'
});
});
</script>
<div class="modal-body">
回答by Abhilash Thomas
I made a sample application for to show it. Its work fine
我制作了一个示例应用程序来展示它。它的工作正常
<!DOCTYPE html>
<html>
<head>
<title>The Date</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
$(function () {
$('#datetimepicker1').datepicker({
});
});
</script>
</head>
<body>
<div class="container">
<div class=""> </div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Pick your Date</h4>
</div>
<div class="modal-body">
<input id="datetimepicker1" type="text" class="form-control" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
</html>
回答by muchtarsp
I have similar issue and after several hour, i have found this simple but useful answerin css.
我有类似的问题，几个小时后，我在 css 中找到了这个简单但有用的答案。
If you want to use jquery after you call the modal, you can do like this:
如果您想在调用模态后使用 jquery，您可以这样做：
$('#infoModal').modal('show');
$('#infoModal').on('shown.bs.modal', function(e) {
$('.bootstrap-datetimepicker-widget').css('z-index', 1500);
});
Thanks to Alfredo
回答by Ahmadreza Pourghodrat
Change the id of the input tag to datepicker, it may work.
将输入标签的 id 更改为datepicker，它可能会起作用。
回答by Nurkartiko
add this:
添加这个：
$('#datePicker')
.datepicker({
format: 'mm/dd/yyyy',
beforeShow: function () {
setTimeout(function () {
$('.ui-datepicker').css('z-index', 99999);
}, 0);
}
})
.on('changeDate', function(e) {
// Revalidate the date field
$('#eventForm').formValidation('revalidateField', 'date');
});
