Problème z-index du sélecteur de date de jquery

J’ai un diaporama div, et j’ai un champ datepicker au-dessus de cette div.

Lorsque je clique dans le champ Datepicker, le panneau Datepicker apparaît derrière le diaporama div.

Et j’ai mis le script en tant que:

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

Je ne peux donc pas changer l’index z de datepicker en CSS. Le z-index de datepicker généré par le script est 1 et mon div diviseur de z (aussi appelé via googleajaxapi) z-index. un moyen de l’augmenter?

Quelqu’un peut m’aider?

    Mettez le style suivant à l’élément de texte ‘input’: position: relative; z-index: 100000; position: relative; z-index: 100000; .

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

    De cette façon, vous n’avez pas à modifier le javascript de l’interface utilisateur jQuery.

    simplement dans votre css, utilisez ” .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 ajouté « position:relative; ‘CSS sur les éléments d’entrée. Parce que l’augmentation de l’index z 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 marksyzm répondre, cela a fonctionné pour moi:

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

    En ajoutant à la réponse de Justin, si vous vous inquiétez du balisage ou si vous ne voulez pas que cette valeur soit codée en dur, 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 règle "position": "relative" , car le plug-in recherche le style en ligne pour les deux règles ou la feuille de style, mais pas les deux .

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

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

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

    J’ai une page où le datpicker était en haut d’un bouton de tablettes datatables.net. Les boutons de datatables avaient un index z plus élevé que les boutons de date individuels de datepicker. Grâce à la réponse de Ronye, ​​j’ai pu résoudre ce problème en utilisant la position: relative; et z-index: 10000. Merci!

    J’ai une boîte de dialog qui utilise le datepicker. C’était toujours caché. Lorsque j’ai ajusté l’index z, le champ de la forme inférieure apparaissait toujours dans la boîte de dialog.

    J’ai utilisé une combinaison de solutions 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’avant-show garantit que datepicker est toujours au premier plan lorsqu’il est sélectionné, mais que onClose s’assure que l’index-z du champ est réinitialisé pour qu’il ne se chevauche pas dans les dialogs ouverts ultérieurement avec un autre facteur de date.

    Cela m’est arrivé quand le thème me manquait. Assurez-vous que le thème existe ou, éventuellement, rechargez le thème et relancez-le 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 }); }); 

    J’ai eu ce problème aussi, puisque le datpicker 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; } 

    Il suffit de prendre la règle qui s’applique à la vôtre, soit par l’ID parent, la classe ou, dans mon cas, un dialog bootstrap, en utilisant leur groupe d’entrée et leur contrôle de formulaire.

    En fait, vous pouvez effectivement append votre css .ui-datepicker{ z-index: 9999 !important;} mais vous pouvez modifier jquery-ui.css ou jquery-ui.min.css et append à la fin du ui-datepicker classe z-index: 9999 !important; . les deux choses fonctionnent pour moi (vous en avez seulement besoin ;-))

    j’ai dû

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