javascriptjqueryhtmljquery-uidatepicker

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


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:

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


Solution

  • 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