Comment modifier la valeur de l'index Z du Datepicker de jQuery UI ?

Question

Je suis obligé d'utiliser une ancienne version de jquery ui qui est 1.8.10. Le datepicker dans cette version avait un bug dans le réglage du z-index qui le faisait parfois apparaître sous d'autres contrôles. Je veux simplement ajuster le z-index du dp pour qu'il apparaisse au-dessus des autres contrôles. J'ai essayé de modifier l'index z dans le fichier .js mais cela n'a pas fonctionné. J'ai lu qu'il fallait définir cette valeur lors de l'événement aftershow car la valeur sera écrasée si elle est antérieure (je ne suis pas sûr que ce soit vrai). Je ne sais pas si c'est vrai. Voici un exemple de création d'une instance du dp... j'ai aussi attaché un timepicker au datepicker.

        $(function () {
        $("input[id$='txtPreviousCutOff']").datetimepicker({
            timeFormat: "hh:mm tt",
            stepMinute: 5
        });
        $("#dpimage6").click(function () {
            $("input[id$='txtPreviousCutOff']").datepicker("show")
        });
    });

Answer 1

.ui-datepicker-div { z-index: 999999; }

ou avec js :

$(function () {
    $("input[id$='txtPreviousCutOff']").datetimepicker({
        timeFormat: "hh:mm tt",
        stepMinute: 5
     });
     $("#dpimage6").click(function () {
        $("input[id$='txtPreviousCutOff']").datepicker("show")
    });
    $('.ui-datepicker-div').css('zIndex', 999999);
});

Answer 2

Vous devez appliquer des styles à l'élément ui-widget-content classe

.ui-widget-content
{
    z-index: 100; 
}

Veillez à ce que la classe soit ajoutée avec une meilleure spécificité de manière à ce qu'il remplace le UI styles

#datepicker.ui-widget-content {}

Answer 3

Ce code fonctionne pour moi. Supposons que j'ai une div date-picker nommée "ui-datepicker-div" et que la classe apply est "ui-datepicker". Je donne donc le code css comme, il fonctionne pour moi.

#ui-datepicker-div ,.ui-datepicker { z-index: 99999 !important; }

Answer 4

Il semble que datepicker copie la valeur z-index de l'élément d'entrée d'origine. Je vois deux façons de résoudre ce problème :

Non-JS Il suffit d'ajouter z-index:1051; à l'attribut style de votre élément de saisie. Ceci est basé sur l'observation que bootstrap .modal utilise un indice z de 1050.

Solution dynamique utilisant JS Lors de la déclaration de votre datepicker, ajoutez un gestionnaire beforeShow qui récupère l'index z de l'élément .modal et fixer le z-index du datepicker à 1 de plus :

datepicker({beforeShow: function(inputElem, inst) {
          var zi = Number($(inputElem).closest('.modal').css('z-index'));
          $(inputElem).css('z-index',zi+1);
          }});

Answer 5

Utilisez ceci pour définir le z-index de votre datepicker : (non testé mais devrait fonctionner)

$("input[id$='txtPreviousCutOff']").datetimepicker({
            timeFormat: "hh:mm tt",
            stepMinute: 5,
            beforeShow: function() {$('#ui-datepicker-div').css('z-index',++$.ui.dialog.maxZ); }
        });