Jquery Ui Datepicker Monat/Jahr Dropdown funktioniert nicht in Popup in der neuesten Firefox

Question

Irgendwie funktioniert meine jQuery UI Datepicker Monat/Jahr Drop-Down in keinem Popup im neuesten Firefox.

Wenn ich auf Monats- oder Jahresauswahl klicke, wird die Optionsliste nicht angezeigt.

Hier ist mein Popup & Datumsauswahl-Code:

$("#dialog-form").dialog({ 
    modal: true 
}); 

$("#datepicker").datepicker({ 
    changeMonth: true, 
    changeYear: true 
}); 

bereitete ich eine Demo auf JSfiddle zu:

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

Answer 1

Dies liegt daran, die modale Fokus auf sich selbst erzwingt. Hier ist eine Lösung für diese wie erwähnt here. Fügen Sie das folgende Skript zu Ihrer js-Datei hinzu. Das ist es.

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

Answer 2

Ich hatte

$.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)) 
} 

zu verwenden, um Fokus innerhalb Modell zu beschränken, wenn wir Tab verwenden Elemente (Got von GIT zu konzentrieren).

versucht, diese >>

$("#dateOfBirth").datepicker({ 
    beforeShow: function(input, inst) { 
     $(document).off('focusin.bs.modal'); 
    }, 
    onClose:function(){ 
     $(document).on('focusin.bs.modal'); 
    }, 
    changeYear: true, 
    yearRange : '-150:+0' 
}); 

Jetzt kann ich das Jahr wählen :)

Answer 3

Magnific Pop-up mit jQuery UI Datepicker (changemonth und changeyear aktiviert ist)

diesen Code Versuchen

// 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

In meinem Fall glaubte ich, dass der Datepicker fehlgeschlagen war, aber was wirklich passierte, war, dass ein zuvor referenzierter Datepicker (bootstrap-datepicker.js) Vorrang vor dem jquery-ui Datepicker hatte.

Answer 5

Ideale Lösung ist, Datumsauswahl-Popup-Div im modalen Dialog zu verschieben.

$("#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(); 
     }  
    } 
}); 

Hinweis: Wird CSS ein wenig zu aktualisieren. Überprüfen Sie jsfiddle Link für die tatsächliche Demo.

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