Modal内部的Bootstrap DatePicker无法正常工作
[英]Bootstrap DatePicker inside Modal not working
问题描述
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? 这可能是一个JavaScript问题吗？ I am not sure what making it not to show the datepicker,anyone who can help me please thanks 我不知道是什么让它不显示datepicker，任何人都可以帮助我，谢谢
<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>
6 个解决方案
解决方案1
8 2015-09-25 09:32:51
add z-index above 1051 in class datepicker 在类datepicker中将z-index添加到1051以上
add something like this in page or css 在页面或CSS中添加这样的东西
<style>
.datepicker{z-index:1151 !important;}
</style>
解决方案2
2 2016-08-03 11:41:17
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
<script>
$(document).on("click", ".modal-body", function () {
$("#datepicker").datepicker({
dateFormat: 'yy-mm-dd'
});
});
</script>
<div class="modal-body">
解决方案3
1 2016-08-03 12:01:41
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>
解决方案4
1 2019-03-20 09:09:06
I have similar issue and after several hour, i have found this simple but useful answer in 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);
});
解决方案5
0 2017-07-26 05:16:23
将输入标记的id更改为datepicker ，它可能有效。
解决方案6
0 2018-01-25 03:35:47
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');
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.