Modal中的Bootstrap DatePicker不起作用
Posted
技术标签:
【中文标题】Modal中的Bootstrap DatePicker不起作用【英文标题】：Bootstrap DatePicker inside Modal not working 【发布时间】：2015-12-23 02:13:33 【问题描述】：我在模态框内有这个日期选择器，但无法正常工作。我已经尝试了一些我在论坛中看到的代码，但它们都不起作用。这可能是一个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>【问题讨论】：
在body标签末尾加载jquery和bootstrap.min.js
我已经在body标签的末尾加载了。
日期选择器正在工作，但它显示在输入字段上方
什么意思？日期选择器未显示。
我无法点击日历标志。
【参考方案1】：
在类 datepicker 中添加高于 1051 的 z-index
在页面或css中添加类似的东西
<style>
.datepickerz-index:1151 !important;
</style>
【讨论】：
尝试调试它，这样你就知道哪里出错了 我试过了，我可以把文件发给你吗？你能帮助我吗。 -.-【参考方案2】：我遇到了同样的问题，最好的方法是请检查我用来解决此问题的以下代码。这将在您单击正文中的任何位置时起作用
请在上面加上
div 模型主体
<script>
$(document).on("click", ".modal-body", function ()
$("#datepicker").datepicker(
dateFormat: 'yy-mm-dd'
);
);
</script>
<div class="modal-body">
【讨论】：
【参考方案3】：我制作了一个示例应用程序来展示它。它的工作正常
<!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】：我有类似的问题，几个小时后，我在 css 中发现了这个简单但有用的answer。
如果你想在调用modal后使用jquery，你可以这样做：
$('#infoModal').modal('show');
$('#infoModal').on('shown.bs.modal', function(e)
$('.bootstrap-datetimepicker-widget').css('z-index', 1500);
);
感谢Alfredo
【讨论】：
【参考方案5】：把输入标签的id改成datepicker，就可以了。
【讨论】：
【参考方案6】：添加这个：
$('#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');
);
【讨论】：
以上是关于Modal中的Bootstrap DatePicker不起作用的主要内容，如果未能解决你的问题，请参考以下文章
Modal中的Bootstrap DatePicker不起作用
Bootstrap Modal 中的 Jcrop 裁剪错误的坐标
Draggable JS Bootstrap modal - 性能问题
Draggable JS Bootstrap modal - 性能问题