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

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

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 :)


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/