javascript - year - jquery ui datepicker not working in firefox

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

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

    changeMonth: true,
    changeYear: true

I prepared a demo on JSfiddle too:

Magnific popup with jquery ui datepicker (changemonth and changeyear is enabled)

Try this code

// Added to make calendar drop downs work properly
$.magnificPopup.instance._onFocusIn = function(e) {

    if( $('ui-datepicker-month') ) {
        return true;
    if( $('ui-datepicker-year') ) {
        return true;

I had to use

$.fn.modal.Constructor.prototype.enforceFocus = function () {
  .off('') // guard against infinite focus loop
  .on('', $.proxy(function (e) {
    if (this.$element[0] !== && !this.$element.has( {
  }, this))

in order to restrict focus inside model when we use Tab to focus elements (Got from GIT).

tried this>>

    beforeShow: function(input, inst) {
    changeYear: true,
    yearRange : '-150:+0'

Now I can select the year :)

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

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.