Problème d'index Z du sélecteur de date JQuery

J'ai un diaporama div, et j'ai un champ de sélection de date au-dessus de ce div.

Lorsque je clique dans le champ datepicker, le panneau datepicker s'affiche derrière le diaporama div.

Et j'ai mis le script comme suit:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js

Je ne peux donc pas changer le z-index de datepicker en CSS. Le z-index de datepicker que le script génère est 1 et mon diaporama div (appelant également via googleajaxapi) z-index est 5. Donc je suppose que je dois augmenter le z-index du sélecteur de date supérieur à 5. Alors y est un moyen de l'augmenter?

Quelqu'un peut m'aider?

Mettez le style suivant à l'élément de texte « entrée »: position: relative; z-index: 100000;.

Le div datepicker prend le z-index de l'entrée, mais cela ne fonctionne que si la position est relative.

En utilisant cette méthode, vous n'avez pas à modifier de javascript de l'interface utilisateur jQuery.

simplement dans votre utilisation css ' .ui-datepicker{ z-index: 9999 !important;}' Ici, 9999 peut être remplacé par la valeur de calque que vous voulez que votre datepicker soit disponible. Aucun code ne doit être commenté ni ajouter ' position:relative;' css sur les éléments d'entrée. Parce que l'augmentation du z-index des éléments d'entrée aura un effet sur tous les boutons de type d'entrée, ce qui peut ne pas être nécessaire dans certains cas.

travaillé pour moi

.hasDatepicker {
    position: relative;
    z-index: 9999;
}

Basé sur la réponse de marksyzm, cela a fonctionné pour moi:

$('input').datepicker({
    beforeShow:function(input) {
        $(input).css({
            "position": "relative",
            "z-index": 999999
        });
    }
});

En plus de la réponse de Justin, si vous vous inquiétez du balisage désordonné ou si vous ne voulez pas que cette valeur soit codée en dur dans CSS, vous pouvez définir l'entrée avant qu'elle ne soit affichée. Quelque chose comme ça:

$('input').datepicker({
    beforeShow:function(input){
        $(input).dialog("widget").css({
            "position": "relative",
            "z-index": 20
        });
    }
});

Notez que vous ne pouvez pas omettre la "position": "relative"règle, car le plugin recherche soit dans le style en ligne les deux règles, soit la feuille de style, mais pas les deux .

Le dialog("widget")est le datepicker réel qui apparaît.

J'ai eu ce problème que j'ai résolu en utilisant sur clic:

var checkin = $('.dpd1').datepicker()
.on('click', function (ev) {
        $('.datepicker').css("z-index", "999999999");
}).data('datepicker');

J'ai une boîte de dialogue qui utilise le datepicker dessus. C'était toujours caché. Lorsque j'ai ajusté le z-index, le champ du formulaire inférieur était toujours affiché dans la boîte de dialogue.

J'ai utilisé une combinaison de solutions que j'ai vues pour résoudre le problème.

$('.ui-datepicker', $form).datepicker({
                showButtonPanel: true,
                changeMonth: true,
                changeYear: true,
                dateFormat: "yy-M-dd",
                beforeShow: function (input) {
                    $(input).css({
                        "position": "relative",
                        "z-index": 999999
                    });
                },
                onClose: function () { $('.ui-datepicker').css({ 'z-index': 0  } ); }                    
            });

L'émission avant garantit que le sélecteur de date est toujours en haut lorsqu'il est sélectionné, mais onClose garantit que le z-index du champ est réinitialisé afin qu'il ne se chevauche pas sur les boîtes de dialogue ouvertes plus tard avec un autre sélecteur de date.

Voir ici: http://forum.jquery.com/topic/z-index-1-datepicker-1-8

J'ai une page où le sélecteur de date était au-dessus d'un bouton des outils de table datatables.net. Les boutons des tables de données avaient un z-index plus élevé que les boutons de date individuels du sélecteur de date. Grâce à la réponse de Ronye, ​​j'ai pu résoudre ce problème en utilisant position: relative; et z-index: 10000. Merci!

Cela m'est arrivé quand je manquais le thème. Assurez-vous que le thème existe, ou peut-être rechargez le thème et remettez-le en ligne sur votre serveur.

C'est ce qui a résolu mon problème:

 $( document ).ready(function() {   
    $('#datepickerid').datepicker({
     zIndexOffset: 1040 #or any number you want
     });
});

En fait, vous pouvez effectivement ajouter dans votre css .ui-datepicker{ z-index: 9999 !important;}mais vous pouvez modifier jquery-ui.cssou jquery-ui.min.csset ajouter à la fin de la classe ui-datepicker z-index: 9999 !important;. les deux choses fonctionnent pour moi (vous n'en avez besoin que d'un ;-))

J'ai également eu ce problème, puisque le sélecteur de date utilise le z-index de l'entrée, j'ai ajouté le css suivant

#dialogID input,.modal-dialog input, .modal-dialog .input-group .form-control{
  z-index:inherit;
}

Prenez simplement la règle qui s'applique à la vôtre, soit par id parent, classe, ou dans mon cas une boîte de dialogue d'amorçage, en utilisant leur groupe d'entrée et leur contrôle de formulaire.

j'ai dû

.datepicker.dropdown-menu {
    position: relative;
    z-index: 9999 !important;
}