Jquery Ui Datepicker month / year dropdown not working in popup in latest Firefox

Question

Somehow my jQuery UI Datepicker Month / Year Dropdown doesn't work in any popup in the latest firefox.

When I click on the "Month" or "Year" drop-down list, the list of options is not displayed.

Here is my Popup and Datepicker Code:

$( "#dialog-form" ).dialog({ modal: true }); $("#datepicker").datepicker({ changeMonth: true, changeYear: true }); 

I also prepared a demo version of JSfiddle:

http://jsfiddle.net/469zV/2/

Answer 1

This is because the modal makes you focus on yourself. Here is the solution for this, as mentioned here . Add the below script to your js file. It.

jsfiddle: http://jsfiddle.net/surjithctly/93eTU/16/

Link: Twitter uploads some modal errors

 // Since confModal is essentially a nested modal it 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 

Answer 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)) } 

to limit focus inside the model when we use Tab to focus elements (derived 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 choose the year :)

Answer 3

Massive popup with jquery ui datepicker (changes and changeyear included)

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); }; 

Answer 4

The ideal solution is to move the date picker popup in a modal dialog box.

 $("#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 : you will need to update css a bit. Check out the jsfiddle link for an actual demo.

JsFiddle : http://jsfiddle.net/469zV/414/

Answer 5

Nowadays - 2018, with Bootstrap 4.1 - I was able to solve this problem by simply passing focus: false to the modal constructor.

Answer 6

In my case, I thought the datapicker was failing, but what really happened was that the previously assigned datepicker (bootstrap-datepicker.js) was a priority over jquery-ui datepicker.