在Bootstrap模式中实现jQuery DatePicker
发布时间:2020-12-18 00:07:34 所属栏目:安全 来源:网络整理
导读:为我的问题 http://jsfiddle.net/sudiptabanerjee/93eTU/创建jsfiddle 在模态窗口问题是更改月份和更改年份组合。 a)IE 11:一切都按预期工作 b)Chrome版本31,在月组合选择,引导模式隐藏。 c)Firefox v26,月和年下拉菜单不起作用。 请帮忙。 HTML !-- But
为我的问题
http://jsfiddle.net/sudiptabanerjee/93eTU/创建jsfiddle
在模态窗口问题是更改月份和更改年份组合。 a)IE 11:一切都按预期工作 请帮忙。 HTML <!-- Button trigger modal --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> <div class="col-md-12"> <div class="row"> <label for="idTourDateDetails">Tour Start Date:</label> <div class="form-group"> <div class="input-group"> <input type="text" name="idTourDateDetails" id="idTourDateDetails" readonly="readonly" class="form-control clsDatePicker"> <span class="input-group-addon"><i id="calIconTourDateDetails" class="glyphicon glyphicon-th"></i></span> </div> </div>Alt Field: <input type="text" name="idTourDateDetailsHidden" id="idTourDateDetailsHidden"> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal --> CSS .clsDatePicker { z-index: 100000; } JS $('#idTourDateDetails').datepicker({ dateFormat: 'dd-mm-yy',minDate: '+5d',changeMonth: true,changeYear: true,altField: "#idTourDateDetailsHidden",altFormat: "yy-mm-dd" }); 解决方法
这是因为模态强调自己。这里是一个解决方案,如上所述
here。将以下脚本添加到您的js文件。而已。
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 var enforceModalFocusFn = $.fn.modal.Constructor.prototype.enforceFocus; $.fn.modal.Constructor.prototype.enforceFocus = function() {}; $confModal.on('hidden',function() { $.fn.modal.Constructor.prototype.enforceFocus = enforceModalFocusFn; }); $confModal.modal({ backdrop : false }); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |