web-dev-qa-db-fra.com

La liste déroulante/année de Jquery Ui Datepicker ne fonctionne pas dans la fenêtre contextuelle du dernier firefox

D'une manière ou d'une autre, ma liste déroulante DatePicker UI jQuery Month/Year ne fonctionne pas dans les popups de la dernière version de Firefox.

Lorsque je clique sur le menu déroulant Mois ou Année, la liste des options ne s'affiche pas.

Voici mon code Popup & Datepicker:

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

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

J'ai aussi préparé une démo sur JSfiddle:

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

javascriptjqueryhtmljquery-uidatepicker
11
StormTrooper

En effet, le mode modal oblige à se concentrer sur lui-même. Voici une solution pour cela comme mentionné ici . Ajoutez le script ci-dessous à votre fichier js. C'est tout.

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

Réf: 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 });
16
Vijay

Je devais utiliser 

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

afin de limiter la focalisation à l'intérieur du modèle lorsque nous utilisons Tab pour focaliser des éléments (Got from GIT).

essayé ceci >>

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

Maintenant je peux choisir l'année :)

8
ShAkKiR

Magnifique popup avec jquery ui datepicker (changemonth et changeyear sont activés)  

Essayez ce 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);
};
1
Vasant Rajput

La solution idéale consiste à déplacer le sélecteur de date popup div dans la boîte de dialogue modale. 

$("#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 : Il faudra mettre à jour le css un peu. Vérifiez le lien jsfiddle pour la démo réelle. 

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

1
maximus ツ

Dans les temps modernes - 2018, avec Bootstrap 4.1 - j'ai pu résoudre ce problème en passant simplement focus : false au constructeur modal.

1
David

Dans mon cas, je pensais que le sélecteur de date échouait, mais ce qui s'est réellement passé, c'est qu'un sélecteur de date précédemment référencé (bootstrap-datepicker.js) avait priorité sur le sélecteur de date jquery-ui.

0
Néstor Sánchez A.