Come cambiare il valore dell'indice Z di jQuery UI Datepicker?

Question

Sono costretto a utilizzare una versione precedente di jquery ui che è 1.8.10. Il datepicker in questa versione aveva un bug all'interno dell'impostazione z-index che a volte lo faceva apparire sotto altri controlli. Sto semplicemente volendo regolare lo z-index del dp in modo che appaia sopra gli altri controlli. Ho provato a cambiare lo z-index nel file .js ma non è riuscito. Ho letto che devi impostare questo valore sull'evento aftershow perché il valore verrà sovrascritto se precedente (non è sicuro che sia vero). Ecco un esempio di come creare un'istanza del dp ... ho anche aggiunto un timepicker al 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; } 

o con 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

si avrebbe bisogno di applicare stili alla classe ui-widget-content

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

assicurarsi di avere la classe ha aggiunto con meglio specificità in modo che ignori lo UI styles

#datepicker.ui-widget-content {} 

Answer 3

Consente di impostare il vostro datepicker z-index: (non testato, ma dovrebbe funzionare)

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

Answer 4

Sembra copie DatePicker qualsiasi valore z-index vostro elemento di input originale ha. Posso pensare di 2 modi per risolvere questo:

non-JS Basta aggiungere z-index:1051; per l'attributo di stile del vostro elemento di input. Questo si basa sull'osservazione che bootstrap .modal classe utilizza un z-index del 1050.

soluzione dinamica con JS Quando si dichiara la tua datepicker, aggiungere un gestore beforeShow che recupera il z-index di .modal e z set di datepicker -index a 1 superiore a quello:

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

Answer 5

Questo codice funziona per me. Supponiamo che io abbia un nome div di data-picker "ui-datepicker-div" e che la classe apply sia "ui-datepicker". Quindi do il css come, il suo lavoro per me.

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

Answer 6

semplicemente cambiare il CSS:

Come prima fare questo:

/* Original */ 
.ui-datepicker { width: 17em; padding: .2em .2em 0 } 
/* Modify */ 
.ui-datepicker { width: 17em; padding: .2em .2em 0; z-index:9999 !important; } 

Non dimenticare di aggiungere !Important.

Questo sostituisce qualsiasi stile in linea aggiunto da javascript.

speranza che questo lavoro :)

Felice Coding

Answer 7

Ho chiamato questa funzione quando l'utente fa clic nella casella di testo utilizzato per controllare il DatePicker

function textboxWhenClicked(){ 
    $("#textboxid").datepicker(); 
    $("#ui-datepicker-div").css("z-index", 999999); 
} 

Ha lavorato molto

-M