javascript Jquery Ui Datepicker 月/年下拉列表在最新的 Firefox 中的弹出窗口中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29887850/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery Ui Datepicker month/year dropdown is not working in popup in latest firefox
提问by StormTrooper
Somehow my jQuery UI Datepicker Month/Year Dropdown not working in any popup in latest firefox .
不知何故，我的 jQuery UI Datepicker Month/Year Dropdown 在最新的 firefox 中的任何弹出窗口中都不起作用。
When I click on Month or Year Dropdown, the options list doesn't appears.
当我点击月份或年份下拉菜单时，选项列表不会出现。
Here is my Popup & Datepicker Code:
这是我的弹出窗口和日期选择器代码：
$( "#dialog-form" ).dialog({
modal: true
});
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true
});
I prepared a demo on JSfiddle too:
我也准备了一个关于 JSfiddle 的演示：
回答by Vijay
This is because the modal enforces focus on itself. Here is a solution for this as mentioned here. Add the below script to your js file. That's it.
这是因为模态强制将注意力集中在自身上。这是这里提到的解决方案。将以下脚本添加到您的 js 文件中。而已。
jsfiddle: http://jsfiddle.net/surjithctly/93eTU/16/
jsfiddle：http: //jsfiddle.net/surjithctly/93eTU/16/
Ref: Twitter bootstrap multiple modal error
// 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 });
For Bootstrap 4:
对于 Bootstrap 4：
replace : $.fn.modal.Constructor.prototype.enforceFocus
By: $.fn.modal.Constructor.prototype._enforceFocus
回答by ShAkKiR
I had to use
我不得不使用
$.fn.modal.Constructor.prototype.enforceFocus = function () {
$(document)
.off('focusin.bs.modal') // guard against infinite focus loop
.on('focusin.bs.modal', $.proxy(function (e) {
if (this.$element[0] !== e.target && !this.$element.has(e.target).length) {
this.$element.focus()
}
}, this))
}
in order to restrict focus inside model when we use Tab to focus elements (Got from GIT).
为了在我们使用 Tab 聚焦元素时限制模型内部的焦点（来自 GIT）。
tried this>>
试过这个>>
$("#dateOfBirth").datepicker({
beforeShow: function(input, inst) {
$(document).off('focusin.bs.modal');
},
onClose:function(){
$(document).on('focusin.bs.modal');
},
changeYear: true,
yearRange : '-150:+0'
});
Now I can select the year :)
现在我可以选择年份:)
回答by Vasant Rajput
Magnific popup with jquery ui datepicker (changemonth and changeyear is enabled)
带有 jquery ui datepicker 的华丽弹出窗口（启用了 changemonth 和 changeyear）
Try this code
试试这个代码
// Added to make calendar drop downs work properly
$.magnificPopup.instance._onFocusIn = function(e) {
if( $(e.target).hasClass('ui-datepicker-month') ) {
return true;
}
if( $(e.target).hasClass('ui-datepicker-year') ) {
return true;
}
$.magnificPopup.proto._onFocusIn.call(this,e);
};
回答by maximus ツ
Ideal solution is to move date picker popup div inside modal dialog.
理想的解决方案是在模态对话框中移动日期选择器弹出 div。
$("#dialog-form").dialog({
modal: true,
width: 500,
height: 500
});
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
beforeShow: function(el, dp) {
$(el).parent().append($('#ui-datepicker-div'));
$('#ui-datepicker-div').hide();
}
}
});
Note: Will have to update css a bit. Check jsfiddle link for actual demo.
注意：将不得不稍微更新 css。检查 jsfiddle 链接以获取实际演示。
JsFiddle: http://jsfiddle.net/469zV/414/
JsFiddle：http: //jsfiddle.net/469zV/414/
回答by David
In modern times -- 2018, with Bootstrap 4.1 -- I was able to solve this by simply passing focus : falseto the modal constructor.
在现代——2018 年，使用 Bootstrap 4.1——我能够通过简单地传递focus : false给模态构造函数来解决这个问题。
回答by Sergio Marsilli
try this:
试试这个：
beforeShow: function(el, dp) {
uidp = $('#ui-datepicker-div').addClass('forced-display-none').detach();
$(el).parent().append(uidp);
setTimeout(function(){$(uidp).css({'position':'relative','left':'0px','top':'0px'}).removeClass('forced-display-none')},200);
}
define forced-display-none as:
将强制显示无定义为：
.forced-display-none {display: none !important;}
回答by Néstor Sánchez A.
In my case, I believed the datepicker was failing, but what really happen was that a previously referenced datepicker (bootstrap-datepicker.js) was taken precedence over the jquery-ui datepicker.
就我而言，我认为 datepicker 失败了，但真正发生的是以前引用的 datepicker (bootstrap-datepicker.js) 优先于 jquery-ui datepicker。
