在Bootstrap 3模式中使用jQuery DatePicker [英] Use jQuery DatePicker in Bootstrap 3 modal
本文介绍了在Bootstrap 3模式中使用jQuery DatePicker的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想在模式中使用 jQuery UI datepicker .真正的问题是,如果我还要显示年份和月份,则会显示空选择:
I would like to use jQuery UI datepicker in a modal. The real problem is that if I want to also show years and months, it shows me empty selects:
使用Firebug,选项标签似乎在模式下.
Using firebug, it seems that the option tags are under the modal.
这是我的HTML:
<div class="modal-dialog">
<div class="modal-content">
<form id="add-form" action="#" method="post">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Add</h4>
</div>
<div class="modal-body">
<div class="input-group">
<div class="input-group">
<label for="date">Date</label>
<input type="text" id="date" name="date" class="form-control datepicker"/>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default" data-dismiss="modal">Chiudi</button>
<button type="submit" class="btn btn-primary">Salva</button>
</div>
</form>
</div>
</div>
JavaScript:
Javascript:
$( ".datepicker" ).datepicker({
dateFormat: 'dd/mm/yy',
defaultDate: new Date(),
changeMonth: true,
changeYear: true
});
$('.datepicker').css("z-index","0");
我已经尝试过此,但是它不起作用(我也遇到了
I already tried this but it doesn't work (I have the same problem of giuseppe).
推荐答案
我通过 answer 找到了解决方案.您唯一需要的选项是forceFocus.
I found the solution with this answer. The only option you needed is enforceFocus.
Working Demo
jQuery
// Since confModal is essentially a nested modal it's enforceFocus method
// must be no-op'd or the following error results
// "Uncaught RangeError: Maximum call stack size exceeded"
// But then when the nested modal is hidden we reset modal.enforceFocus
$.fn.modal.Constructor.prototype.enforceFocus = function() {};
这篇关于在Bootstrap 3模式中使用jQuery DatePicker的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文