Implementing jQuery DatePicker in Bootstrap modal
为我的问题创建了 jsfiddle http://jsfiddle.net/sudiptabanerjee/93eTU/
模态窗口中的问题是更改月份和更改年份组合。
a) IE 11:一切正常
b) Chrome 版本 31,在月份组合选择时,引导模式隐藏。
c) Firefox v26,月份和年份下拉菜单不起作用。
请帮忙。
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!-- Button trigger modal --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button> <!-- Modal --> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> <label for="idTourDateDetails">Tour Start Date:</label> <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"></span> Alt Field: <input type="text" name="idTourDateDetailsHidden" id="idTourDateDetailsHidden"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <!-- /.modal-content --> <!-- /.modal-dialog --> <!-- /.modal --> |
CSS
1 2 3 | .clsDatePicker { z-index: 100000; } |
JS
1 2 3 4 5 6 7 8 | $('#idTourDateDetails').datepicker({ dateFormat: 'dd-mm-yy', minDate: '+5d', changeMonth: true, changeYear: true, altField:"#idTourDateDetailsHidden", altFormat:"yy-mm-dd" }); |
这是因为模态强制将注意力集中在自身上。这是这里提到的解决方案。将以下脚本添加到您的 js 文件中。就是这样。
工作演示
jQuery
1 2 3 4 5 6 7 8 9 10 11 12 13 | // 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 }); |
对于 Bootstrap 4:
1 2 | replace : $.fn.modal.Constructor.prototype.enforceFocus By: $.fn.modal.Constructor.prototype._enforceFocus |
1 2 3 4 5 6 7 8 9 10 11 12 | var enforceModalFocusFn = $.fn.modal.Constructor.prototype.enforceFocus; $.fn.modal.Constructor.prototype.enforceFocus = function() {}; try{ $confModal.on('hidden', function() { $.fn.modal.Constructor.prototype.enforceFocus = enforceModalFocusFn; }); $confModal.modal({ backdrop : false }); } catch (error) { if(error.name != 'ReferenceError') throw error; } |
更简单...只需要将此行注释到您的 boostrap.js that.enforceFocus() 中。
此问题的另一个解决方法是删除 div.modal 元素上的 tabindex="-1" 属性。在 bootstrap 4 上测试。
找到了一种更简单的方法来解决此日期选择器问题。确保 JS 低于 jquery,jqueryUI lib 调用。
1 2 3 4 5 6 7 8 9 10 11 12 | $("body").delegate("#date1","focusin", function () { $(this).datepicker( { dateFormat:"yy-mm-dd", changeMonth: true, changeYear: true } ); }); $("#date1" ).datepicker(); |
将 z-index 添加到您的日期选择器类
根据 Surjith\\ 的回答,我添加了一个 try/catch 块来解决
咖啡脚本:
1 2 3 4 5 6 7 8 9 10 11 12 | enforceModalFocusFn = $.fn.modal.Constructor::enforceFocus $.fn.modal.Constructor::enforceFocus = -> try $confModal.on"hidden", -> $.fn.modal.Constructor::enforceFocus = enforceModalFocusFn return $confModal.modal backdrop: false catch error if error.name != 'ReferenceError' throw error |