Jquery Ui Datepicker-Monat/Jahr-dropdown funktioniert nicht im popup-Menü im neuesten firefox

Irgendwie meine jQuery-UI-Datepicker-Monat/Jahr-Dropdown funktioniert nicht in jedem popup-Menü im neuesten firefox .

Wenn ich auf Monat oder Jahr Dropdown-Liste der Optionen nicht angezeigt.

Hier ist mein Popup & Datepicker-Code:

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

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

Bereitete ich eine demo auf JSfiddle zu:

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

InformationsquelleAutor StormTrooper | 2015-04-27
  1. 18

    Dies ist, weil die modale erzwingt die Konzentration auf sich selbst. Hier ist eine Lösung für dieses, wie erwähnt hier . Fügen Sie unterhalb der Skript, um Ihre js-Datei. Das ist es.

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

    Ref: Twitter bootstrap mehrere modale Fehler

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

    Für Die Bootstrap-4: 

    replace : $.fn.modal.Constructor.prototype.enforceFocus
By: $.fn.modal.Constructor.prototype._enforceFocus
    • danke @vijay
    • Ich habe auch das problem, obwohl ich nicht die Verwendung von bootstrap. Jede Idee, wie es zu lösen? jQuery v1.12.4 und jQuery UI v1.12.1
    InformationsquelleAutor Vijay
  2. 9

    Musste ich 

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

    zur Einschränkung des Fokus-Insider-Modell, wenn wir Sie mit der Tab-Fokus-Elementen (Habe aus dem GIT).

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

    Nun kann ich wählen Sie das Jahr 🙂

    • es rettete meine Zeit 🙂
    • froh, dass es geholfen 🙂
    InformationsquelleAutor ShAkKiR
  3. 1

    Magnific popup mit jquery ui datepicker (changemonth und changeyear aktiviert ist)

    Versuchen, diesen 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);
};
    • wo soll ich das sagen? Innerhalb magnificPopup () - Funktion Rückrufe?
    • Dies ist die Arbeit mit magnific popup -. Danke 🙂
    InformationsquelleAutor Vasant Rajput
  4. 1

    Ideale Lösung ist, sich zu bewegen date picker popup-div in Modaler 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();
        }    
    }
});

    Hinweis: Wird die Aktualisierung css ein bisschen. Überprüfen Sie jsfiddle link zur aktuellen demo.

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

    • In meinem Fall, diese Lösung funktioniert, aber es stört die anderen datepicker, der außerhalb der dialog. Irgendwie kann ich nicht öffnen, die anderen datepicker nicht mehr nach ich die eine im modal-dialog.
    • In diesem Fall müssen Sie wählerisch sein während der Anwendung ändern wie $("#datepicker.your-special-class").datepicker({ beforeShow: function(el, dp) { $(el).parent().append($('#ui-datepicker-div.your-special-class')); $('#ui-datepicker-div.your-special-class').hide(); }
    • Leider, es funktioniert immer noch nicht. Irgendwie $('#ui-datepicker-div.your-special-class') existiert nicht. Obwohl ich eingestellt habe das your-special-class Klasse zu meinem datepicker-input.
    • Ich habe auch versucht, es mit Ihrem angegebenen JsFiddle: jsfiddle.net/vdpgf3jm/1
    InformationsquelleAutor maximus ツ
  5. 1

    In der Neuzeit -- 2018, mit Bootstrap 4.1 -- ich war in der Lage, dies zu lösen, indem Sie einfach vorbei focus : false auf den modal-Konstruktor.

    InformationsquelleAutor David
  6. 0

    In meinem Fall, glaubte ich, der datepicker war ein Fehlschlag, aber was wirklich geschehen war, dass ein zuvor referenzierten datepicker (bootstrap-datepicker.js) genommen wurde, die Vorrang vor der jquery-ui-datepicker.

    InformationsquelleAutor Néstor Sánchez A.
Schreibe einen Kommentar