Jquery Ui Datepicker month/year dropdown is not working in popup in latest firefox
Solution 1
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.
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:
replace : $.fn.modal.Constructor.prototype.enforceFocus
By: $.fn.modal.Constructor.prototype._enforceFocus
Solution 2
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).
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 :)
Solution 3
Ideal solution is to move date picker popup div inside modal dialog.
$("#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.
JsFiddle: http://jsfiddle.net/469zV/414/
Solution 4
In modern times -- 2018, with Bootstrap 4.1 -- I was able to solve this by simply passing focus : false
to the modal constructor.
Solution 5
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;}
StormTrooper
Updated on July 19, 2022Comments
-
StormTrooper almost 2 years
Somehow my jQuery UI Datepicker Month/Year Dropdown not working in any popup in latest 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: