Bootstrap Datepicker在模式中不起作用 [英] Bootstrap datepicker in modal not working
问题描述
我已经尝试过Google搜索类似的问题,但到目前为止还没有找到任何东西. 我有一个问题,我在jquery中创建并打开模态并尝试访问日期选择器,但是它没有激活datepickers JS.
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.
$("[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>
在与上面的jquery函数相同的<script> </script>
标记中,在最顶部我有:
And in the same <script> </script>
tag as the jquery function above, at the very top I have:
$('.input-group.date').datepicker({
format: "dd/mm/yyyy",
startDate: "01-01-2015",
endDate: "01-01-2020",
todayBtn: "linked",
autoclose: true,
todayHighlight: true
});
我以类似的方式使用了此代码(除了没有jquery模态-仅在cshtml页面上使用),可以正常工作.我不知道为什么这种方式行不通.我已经使用开发人员工具尝试跟踪问题,但是没有错误-脚本可以正确加载,但是在单击需要的日期"时,它不会触发jquery进行datepicker.
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 html错误创建模态吗?
Am I using the Jquery html wrong to create the modal?
欢呼
推荐答案
日期选择器隐藏在模式后面.
将日期选择器的z-index
设置为模式的1050
上方.
Set datepicker's z-index
above the modal's which is 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>
注意:我添加了bootstrap v3.3.6 CSS,并删除了该示例中对tablesorter脚本的本地引用.
Note: I added bootstrap v3.3.6 CSS and removed the local reference to the tablesorter script for the demo.
这篇关于Bootstrap Datepicker在模式中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!