Problema z-index del selettore di date Jquery

Ho un div presentazione e ho un campo datepicker sopra quel div.

Quando faccio clic nel campo datepicker, il pannello datepicker viene visualizzato dietro il div presentazione.

E ho inserito lo script come:

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

Quindi non posso cambiare lo z-index di datepicker in CSS. Lo z-index del datepicker che lo script sta generando è 1 e il mio div per la presentazione (chiamato anche tramite googleajaxapi) z-index è 5. Quindi immagino di dover aumentare lo z-index del date picker maggiore di 5. Quindi c'è qualche modo per aumentarlo?

Qualcuno può aiutarmi?

Inserire il seguente stile presso l'elemento di testo 'input': position: relative; z-index: 100000;.

Il div datepicker prende lo z-index dall'input, ma funziona solo se la posizione è relativa.

In questo modo non è necessario modificare alcun javascript dall'interfaccia utente di jQuery.

semplicemente nel tuo css usa ' .ui-datepicker{ z-index: 9999 !important;}' Qui 9999 può essere sostituito con qualsiasi valore di livello tu voglia che il tuo datepicker sia disponibile. Né il codice deve essere commentato né l'aggiunta di position:relative;"css" sugli elementi di input. Perché l'aumento dello z-index degli elementi di input avrà effetto su tutti i pulsanti del tipo di input, che potrebbe non essere necessario in alcuni casi.

ha funzionato per me

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

Basato nella risposta Marksyzm, questo ha funzionato per me:

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

Aggiungendo alla risposta di Justin, se sei preoccupato per il markup disordinato o non vuoi che questo valore sia codificato in CSS, puoi impostare l'input prima che venga mostrato. Qualcosa come questo:

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

Nota che non puoi omettere la "position": "relative"regola, poiché il plug-in cerca nello stile inline entrambe le regole o il foglio di stile, ma non entrambi .

Il dialog("widget")è il DatePicker effettivo che si apre.

Ho avuto questo problema che ho risolto utilizzando al clic:

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

Ho una finestra di dialogo che utilizza il datepicker su di essa. Era sempre nascosto. Quando ho regolato lo z-index, il campo nella forma inferiore veniva sempre visualizzato nella finestra di dialogo.

Ho utilizzato una combinazione di soluzioni che ho visto per risolvere il problema.

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

Lo spettacolo prima assicura che il datepicker sia sempre in primo piano quando selezionato, ma onClose assicura che lo z-index del campo venga ripristinato in modo che non si sovrapponga a nessuna finestra di dialogo aperta successivamente con un diverso datepicker.

Vedi qui: http://forum.jquery.com/topic/z-index-1-datepicker-1-8

Ho una pagina in cui il datepicker era in cima a un pulsante tabletools di datatables.net. I pulsanti dei datatables avevano uno z-index più alto rispetto ai singoli pulsanti di datepicker. Grazie alla risposta di Ronye sono stato in grado di risolvere questo problema utilizzando position: relative; e z-index: 10000. Grazie!

Questo è successo a me quando mi mancava il tema. Assicurati che il tema esista, o magari ricaricalo e ricaricalo sul tuo server.

Quello che ha risolto il mio problema:

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

In effetti puoi effettivamente aggiungere nel tuo css .ui-datepicker{ z-index: 9999 !important;}ma puoi modificare jquery-ui.csso jquery-ui.min.csse aggiungere alla fine della classe ui-datepicker z-index: 9999 !important;. entrambe le cose funzionano per me (te ne serve solo una ;-))

Ho avuto anche questo problema, poiché il datepicker utilizza lo z-index dell'input, ho aggiunto il seguente css

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

Prendi la regola che si applica al tuo, o per id genitore, classe o nel mio caso una finestra di dialogo di bootstrap, usando il loro gruppo di input e il controllo del modulo.

Dovevo

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