jquery-ui datepicker cambiar índice z

83

El problema es bastante sencillo, aunque estoy teniendo dificultades para averiguar cómo resolverlo.

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

vea el círculo feo que cubre el 6 de julio a continuación ...

ingrese la descripción de la imagen aquí

la forma sucia de hacer esto (al menos en mi opinión) es escribir un estilo en una de mis hojas de estilo, pero prefiero usar algo de javascript cuando se inicia el selector para hacer esto.

Ya lo intenté

$('.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 sobrescribe cada vez que se inicia el selector de fecha.

¡Se agradece cualquier ayuda!

Greg Guida
fuente
3
Considero que una regla css! Importante en el css de su página es mucho más limpia que javascript, ya que el índice z es una propiedad de CSS y está ahí para diseñar. Si tuviera que hacer una solución JS, agregaría una styleetiqueta al encabezado; no solo tenerla en CSS mantiene su código JS más corto y limpio, sino que también se aplica a todas las instancias de selector de fechas sin problemas.
Fabrício Matté
1
Posible duplicado de stackoverflow.com/questions/715677/…
Lance
@Lance no es un engaño porque estoy preguntando cómo se puede hacer dinámicamente sin agregar una línea al CSS
Greg Guida
@ FabrícioMatté Supongo que no quiero estropear mi css con una estúpida anulación de un caso de borde jquery-ui. La styleetiqueta en la cabeza está un poco más cerca de lo que estoy buscando, pero lo que realmente quiero hacer es cambiar el atributo de estilo en el elemento selector de fecha.
Greg Guida
Ya reservo un espacio en la parte inferior del archivo CSS solo para los trucos de jQuery UI en cada proyecto que comienzo, pero sí, envié una respuesta con una solución pura de jQuery explicando por qué CSS sería una solución más limpia, ahora puedes elegir cuál usar. =]
Fabrício Matté

Respuestas:

142

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

Una forma fácil de anular stylela suya z-indexes con una !importantregla CSS como ya se mencionó en otra respuesta . Sin embargo, otra respuesta sugiere la configuración position: relative;y z-indexen el elemento de entrada en sí, que se copiará automáticamente en el widget Datepicker.

Pero, según lo solicitado, si por alguna razón realmente necesita configurarlo dinámicamente, agregando más código y procesamiento innecesarios 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);
    }
});

Violín

z-indexCreé un objeto de función diferida para configurar el widget, después de que jQuery UI lo reinicia, cada vez que lo llamas. Debería ser suficiente para sus necesidades.

El truco de CSS es mucho menos feo en mi opinión, reservo un espacio en mi CSS solo para los ajustes de jQuery UI (que está justo encima de los ajustes de IE6 en mis páginas).

Fabrício Matté
fuente
5
¿Puedo decirte cuánto te mueves? Primero probé una gran cantidad de otras cosas. ¡Gracias!
Bretticus
gracias por su respuesta, funciona, sin embargo, tan pronto como se actualiza el selector de fecha (por ejemplo, cambia el mes), el índice z vuelve a ser predeterminado, así que creo que esta respuesta necesitaría un pequeño ajuste, es decir, agregar lo siguiente onChangeMonthYear: function () {setTimeout (function () {$ ('. ui-datepicker'). css ('z-index', 99999999999999);}, 0); }
Gombo
@Gombo Creo que es más fácil si usa uno de los enfoques de CSS (descrito arriba del JS) ya que son mucho menos pirateados. ;)
Fabrício Matté
Al menos en FF, el número máximo tiene 10 dígitos, por lo que nueve 9 podrían ser más mejores (aunque FF se complace en convertir a 2147483647 sin errores).
Campbeln
+1 para señalar para establecer z-indexen la entrada DOM. Eso fue lo único que funcionó para mí:<input .... style="z-index: 9999;"/>
Sebastian
88

Hay una forma más elegante de hacerlo. Agregue este CSS:

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

jQuery establecerá el calendario z-indexen 101 (uno más que el elemento correspondiente). El positioncampo debe ser absolute, relativeo fixed. jQuery busca el padre del primer elemento, que es absoluto / relativo / fijo, y toma su 'z-index

Marek Roj
fuente
2
Esta es definitivamente la mejor solución. +1
Paul Chamberlain
¡Trabajado como un encanto! Gracias
brando
Perfecto, pero en mi caso: .datepicker-dropdown {z-index: 999999! Important;}
ujjaval
Casi perfecto, pero no funciona si no conoce el valor máximo de zindex para el que quiere que se imponga el selector de fechas.
MFAL
21

Necesita usar una !importantcláusula para forzar el z-indexvalor en línea usando CSS.

.ui-datepicker{z-index: 99 !important};
Emanuele Greco
fuente
Lo siento, no funciona para mí: jQuery establece el índice z en el elemento, que tiene una prioridad más alta que el! Importante
Dylan Hamilton-Foster
1
@ DylanHamilton-Foster, ¿estás seguro? ¿Puede agregar alguna otra etiqueta, es decir, BackgroundColor, para ver si el estilo se aplica realmente?
Emanuele Greco
7

Esto funcionó para mí cuando estaba tratando de usar datepicker junto 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, cambie el selector para adaptarlo a sus propias necesidades. Establecí el "índice z" en 1051 porque el índice z para el modal de arranque se estableció en 1050.

David Hicks
fuente
5

El selector de fechas ahora establece el índice z emergente en uno más que su campo asociado, para mantenerlo delante de ese campo, incluso si ese campo está en un cuadro de diálogo emergente. De forma predeterminada, el índice z es 0, por lo que el selector de fechas termina en 1. ¿Hay algún caso en el que no se muestre correctamente el selector de fechas? Publicación del foro de JQuery

Para obtener un índice z de 100. Necesita una entrada con z-index:99;y JQueryUI actualizará el selector de fechas para que seaz-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 índice z para heredar, que debería heredar de su cuadro de diálogo y hacer que jQueryUI detecte correctamente el índice z.

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

Loren
fuente
1

La MEJOR forma NATURAL es simplemente poner el elemento selector de fecha en una "plataforma" que tiene una posición "relativa" y tiene un "índice z" más alto que el elemento que aparece por encima de su control ...

Clinton
fuente
4
Agregue un código significativo y describa más suBEST NATURAL way
Peter
1

En mi caso nada funcionó. Necesitaba agregar el índice z al tipo de entrada que tiene el selector de fecha.

<input type="text" class="datepicker form-control" datatype="date" style="z-index: 10000;" id="txtModalDate">
Francisco G
fuente
0

Esto es para Bootstrap datetimepicker

Si su selector de fechas se oculta debido a que aparece un desplazamiento en su div, use:

overflow-x: visible !important;
overflow-y: visible !important;

en CSS de todo el div que contiene su selector de fecha y otro elemento como

.dialogModel{
    overflow-x: visible !important;
    overflow-y: visible !important;
}
Shubham Kumar
fuente