jquery-ui datepicker cambiar índice z

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 ...

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!

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).

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

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

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

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.

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; }

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 ...

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">

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;
}