jquery-ui datepicker change z-index

Question

El problema es bastante directo, aunque me está costando trabajo encontrar la manera de resolverlo.

Estoy usando un marcador de fecha jQuery-ui junto con un "encendido/apagado al estilo ios personalizado". Esta palanca utiliza algunos elementos posicionados de manera absoluta que se muestran actualmente en la parte superior de mi selector de fecha.

ver el círculo fea comprendido entre julio de sexto a continuación ...

la manera sucia para hacer esto (al menos OMI) es escribir un estilo en una de mis hojas de estilo, pero me más bien, use algo de javascript cuando el selector se lance para hacer esto.

He intentado ya

$('.date_field').datepicker(); 
$('.date_field').datepicker("widget").css({"z-index":100}); 

y

$('.date_field').datepicker({ 
    beforeShow: function(input, inst) { 
     inst.dpDiv.css({"z-index":100}); 
    } 
}); 

pero parece que el índice z se sobreescriben cada vez que se inicia el selector de fechas.

¡se agradece cualquier ayuda!

Answer 1

Su código JS en la pregunta no funciona porque jQuery restablece el atributo style del widget datepicker cada vez que lo llama.

Una manera fácil de anular su style 's z-index es con una regla CSS !important como ya se ha mencionado en another answer. Sin embargo, otro answer sugiere configurar position: relative; y z-index en el elemento de entrada, que se copiará automáticamente en el widget Datepicker.

Pero, conforme a lo solicitado, si por cualquier razón que realmente necesita para ajustar de forma dinámica, añadiendo un código más innecesario y de proceso a su página, puede intentar esto:

$('.date_field').datepicker({ 
    //comment the beforeShow handler if you want to see the ugly overlay 
    beforeShow: function() { 
     setTimeout(function(){ 
      $('.ui-datepicker').css('z-index', 99999999999999); 
     }, 0); 
    } 
}); 

Fiddle

I creó un objeto de función diferida para establecer el z-index del widget, después de que lo restablezca la jQuery UI, cada vez que lo llame. Debería ser suficiente para sus necesidades.

El hack de CSS es mucho menos feo OMI, reservo un espacio en mi CSS solo para los ajustes de jQuery UI (eso está justo encima de los ajustes de IE6 en mis páginas).

Answer 2

Hay una forma más elegante de hacerlo. Añadir este CSS:

.date_field {position: relative; z-index:100;} 

jQuery fijará el calendario de z-index a 101 (uno más que el elemento correspondiente). El campo position debe ser absolute, relative o fixed. jQuery busca para los padres del primer elemento, que es absoluta/relativa/fijo, y toma su z-index

Answer 3

El selector de fechas establece ahora la ventana emergente z-index a uno más que su campo asociado, para mantenerlo en frente de ese campo, incluso si ese campo está en un cuadro de diálogo emergente. Por defecto, el índice z es 0, por lo que datepicker termina con 1.¿Hay algún caso en el que esto no muestre correctamente el datepicker? JQuery Forum Post

Para obtener un índice z de 100. Es necesario una entrada con z-index:99; y jQueryUI actualizará el selector de fecha para ser z-index:100

<input style="z-index:99;"> o <input class="high-z-index"> y CSS .high-z-index { z-index: 99; }

También puede especificar el z-index para heredar, que debe heredar de su cuadro de diálogo y hacer que jQueryUI detecte correctamente el z-index.

<input style="z-index:inherit;"> o <input class="inhert-z-index"> y CSS .inherit-z-index { z-index: inherit; }

Answer 4

Es necesario utilizar !important cláusula para forzar el valor z-index en línea usando CSS.

.ui-datepicker{z-index: 99 !important}; 

Answer 5

Esto funcionó para mí cuando yo estaba tratando de usar selector de fechas en conjunción con un modal de arranque:

$('input[id^="txtDate"]').datepicker(); 
$('input[id^="txtDate"]').on('focus', function (e) { 
    e.preventDefault(); 
    $(this).datepicker('show'); 
    $(this).datepicker('widget').css('z-index', 1051); 
}); 

Por supuesto, cambiar el selector para adaptarse a su propia necesidad. Establecí el "índice z" en 1051 porque el índice z para el modo de arranque estaba configurado en 1050.

Answer 6

La MEJOR manera NATURAL es simplemente poner el elemento selector de fecha en una "plataforma" que tiene un " "posición relativa" y tiene un "índice Z" más alto que el elemento que se muestra arriba de su control ...