Problema del índice z del selector de fechas de jquery

Tengo un div de presentación de diapositivas y un campo de selector de fecha encima de ese div.

Cuando hago clic en el campo selector de fecha, el panel selector de fecha se muestra detrás de la presentación de diapositivas div.

Y he puesto el guión como:

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

Entonces no puedo cambiar el índice z de datepicker en CSS. El índice z de datepicker que genera el script es 1 y mi div de presentación de diapositivas (también llamando a través de googleajaxapi) z-index es 5. Así que supongo que tengo que aumentar el índice z del selector de fecha mayor que 5. alguna forma de aumentarlo?

¿Puede ayudarme alguien?

Ponga el siguiente estilo en el elemento de texto 'de entrada': position: relative; z-index: 100000;.

El div del selector de fechas toma el índice z de la entrada, pero esto solo funciona si la posición es relativa.

De esta manera, no tiene que modificar ningún javascript de la interfaz de usuario de jQuery.

simplemente en su uso de CSS ' .ui-datepicker{ z-index: 9999 !important;}' Aquí 9999 se puede reemplazar por cualquier valor de capa que desee que su selector de fechas esté disponible. No se debe comentar ningún código ni agregar ' position:relative;' css en los elementos de entrada. Porque aumentar el índice Z de los elementos de entrada tendrá efecto en todos los botones de tipo de entrada, lo que puede no ser necesario en algunos casos.

trabajó para mi

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

Basado en la respuesta de marksyzm, esto funcionó para mí:

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

Agregando a la respuesta de Justin, si le preocupa el marcado desordenado o no desea que este valor esté codificado en CSS, puede configurar la entrada antes de que se muestre. Algo como esto:

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

Tenga en cuenta que no puede omitir la "position": "relative"regla, ya que el complemento se ve en el estilo en línea para ambas reglas o la hoja de estilo, pero no para ambas .

El dialog("widget")es el selector de fechas real que aparece.

Tuve este problema que resolví usando al hacer clic:

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

Tengo un cuadro de diálogo que usa el selector de fecha. Siempre estuvo oculto. Cuando ajusté el índice z, el campo del formulario inferior siempre aparecía en el cuadro de diálogo.

Usé una combinación de soluciones que vi para resolver el 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  } ); }                    
            });

El espectáculo anterior asegura que el selector de fechas siempre esté en la parte superior cuando se selecciona, pero onClose asegura que el índice Z del campo se restablezca para que no se superponga en ningún cuadro de diálogo abierto más tarde con un selector de fechas diferente.

Vea aquí: http://forum.jquery.com/topic/z-index-1-datepicker-1-8

Tengo una página donde el selector de fechas estaba encima de un botón de herramientas de tabla de datatables.net. Los botones de tablas de datos tenían un índice Z más alto que los botones de fecha individuales del selector de fechas. Gracias a la respuesta de Ronye, ​​pude resolver este problema usando position: related; e índice z: 10000. ¡Gracias!

Esto me pasó cuando me faltaba el tema. Asegúrese de que el tema exista, o tal vez vuelva a descargar el tema y vuelva a cargarlo en su servidor.

Eso fue lo que resolvió mi problema:

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

De hecho, puede agregar efectivamente en su css .ui-datepicker{ z-index: 9999 !important;}pero puede modificar jquery-ui.csso jquery-ui.min.cssy agregar al final de la clase ui-datepicker z-index: 9999 !important;. ambas cosas funcionan para mí (solo necesitas una ;-))

También tuve este problema, ya que el selector de fechas usa el índice z de la entrada, agregué el siguiente CSS

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

Simplemente tome la regla que se aplica a la suya, ya sea por identificación principal, clase o, en mi caso, un cuadro de diálogo de arranque, usando su grupo de entrada y control de formulario.

Tuve que

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