JQuery Ui Datepicker mois/année dropdown ne fonctionne pas dans popup dans le dernier firefox

en quelque sorte mon jQuery UI Datepicker mois / an Dropdown ne travaillant pas dans n'importe quel popup dans la dernière firefox .

quand je clique sur le mois ou L'année, la liste des options n'apparaît pas.

Voici mon code Popup & Datepicker:

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

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

j'ai préparé une démo sur JSfiddle trop:

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

10
demandé sur StormTrooper 2015-04-27 08:28:06

6 réponses

c'est parce que le modal renforce se concentre 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 plusieurs modal erreur

// 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
répondu Vijay 2017-05-23 10:30:45

j'ai eu à 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 restreindre la mise au point à l'intérieur du modèle lorsque nous utilisons Tab pour mettre au point des éléments (Got from GIT).

essayé ce>>

    $("#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 sélectionner l'année :)

7
répondu ShAkKiR 2016-05-05 09:19:33

popup magnifique avec jQuery ui datepicker (changemonth et changeyear est activé)

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
répondu Vasant Rajput 2016-08-23 13:28:27

dans mon cas, je croyais que le correcteur de données était défaillant, mais ce qui s'est réellement passé c'est qu'un correcteur de données (bootstrap-datepicker.js) a eu la priorité sur le jquery-ui datepicker.

0
répondu Néstor Sánchez A. 2016-11-17 19:01:48

la solution idéale est de déplacer date picker popup div dans le Dialogue modal. 

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

Remarque:: devra mettre à jour un peu css. Vérifiez le lien jsfiddle pour la démo réelle.

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

0
répondu maximus ツ 2017-11-03 14:36:13

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

0
répondu David 2018-09-07 14:07:58