[英]Jquery Ui Datepicker month/year dropdown is not working in popup in latest firefox
不知何故,我的 jQuery UI Datepicker Month/Year Dropdown 在最新的 firefox 的任何彈出窗口中都不起作用。
當我單擊月份或年份下拉菜單時,不會出現選項列表。
這是我的彈出窗口和日期選擇器代碼:
$( "#dialog-form" ).dialog({
modal: true
});
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true
});
我也在 JSfiddle 上准備了一個演示:
這是因為模態強制將注意力集中在自身上。 這是這里提到的解決方案。 將以下腳本添加到您的 js 文件中。 就是這樣。
jsfiddle: http : //jsfiddle.net/surjithctly/93eTU/16/
// 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:
replace : $.fn.modal.Constructor.prototype.enforceFocus
By: $.fn.modal.Constructor.prototype._enforceFocus
我不得不使用
$.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))
}
為了在我們使用 Tab 聚焦元素時限制模型內部的焦點(來自 GIT)。
試過這個>>
$("#dateOfBirth").datepicker({
beforeShow: function(input, inst) {
$(document).off('focusin.bs.modal');
},
onClose:function(){
$(document).on('focusin.bs.modal');
},
changeYear: true,
yearRange : '-150:+0'
});
現在我可以選擇年份:)
理想的解決方案是在模態對話框中移動日期選擇器彈出 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();
}
}
});
注意:將不得不稍微更新 css。 檢查 jsfiddle 鏈接以獲取實際演示。
JsFiddle : http : //jsfiddle.net/469zV/414/
帶有 jquery ui datepicker 的華麗彈出窗口(啟用了 changemonth 和 changeyear)
試試這個代碼
// 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);
};
在現代——2018 年,使用 Bootstrap 4.1——我能夠通過簡單地將focus : false
傳遞給模態構造函數來解決這個問題。
嘗試這個:
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);
}
將強制顯示無定義為:
.forced-display-none {display: none !important;}
就我而言,我認為 datepicker 失敗了,但真正發生的是以前引用的 datepicker (bootstrap-datepicker.js) 優先於 jquery-ui datepicker。
我為嵌套在引導模式中的 jquery daterangepicker 提供了一個解決方案(問題:選擇器月\/年沒有出現在 FF 瀏覽器上)。 解決方案是添加“parentEl”選項,指示要在其中初始化 daterangepicker 的模式:
$('#example-date-input').daterangepicker({
parentEl: $('.modal-where-daterangepicker-should-be-nested'),
.....
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.