ejemplos - datetimepicker jquery

Jquery date picker z-index issue

Question

Tengo un div de diapositivas, y tengo un campo de marcador de fecha encima de ese div.

Cuando hago clic en el campo datepicker, el panel datepicker 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 z-index de datepicker que genera el script es 1 y el de mi presentación de diapositivas div (también llamado a través de googleajaxapi) z-index es 5. Así que supongo que tengo que aumentar el z-index del selector de fecha mayor que 5. Así que alguna forma de aumentarlo?

¿Puede ayudarme alguien?

Answer 1

Añadiendo a la respuesta de Justin, si le preocupa el marcado desordenado o si no desea que este valor sea codificado en CSS, puede establecer 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 regla "position": "relative" , ya que el complemento se ve en el estilo en línea para ambas reglas o en la hoja de estilo, pero no en ambas .

El dialog("widget") es el marcador de fecha real que aparece.

Answer 2

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

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

Answer 3

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

Answer 4

Eso que resolvió mi problema:

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

Answer 5

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

Answer 6

También tuve este problema, dado que datepicker 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 ID padre, clase, o en mi caso un diálogo de arranque, usando su grupo de entrada y control de formulario.

Answer 7

Tengo un cuadro de diálogo que usa el datepicker en él. Siempre estuvo escondido. Cuando ajusté el índice z, el campo en la forma inferior siempre aparecía en el 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 show anterior asegura que datepicker 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 datepicker diferente.

Answer 8

Tengo una página donde el marcador de fecha estaba en la parte superior del botón datatables.net tabletools. Los botones de tablas de datos tenían un índice Z más alto que los botones de fecha de marcador de fecha individuales. Gracias a la respuesta de Ronye pude resolver este problema usando position: relative; y z-index: 10000. ¡Gracias!

Answer 9

Tuve este problema que resolví al usar al hacer clic:

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

Answer 10

Tuve que

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

Answer 11

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

Answer 12

simplemente en su css use '' .ui-datepicker{ z-index: 9999 !important;} '' Aquí 9999 se puede reemplazar por el valor de capa que desee que tenga disponible su selector de fecha. Ni se debe comentar ningún código ni agregar '' position:relative; ''css en elementos de entrada. Debido a que 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.

Answer 13

trabajó para mi

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

Answer 14

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

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

De esta forma, no tiene que modificar ningún javascript de jQuery UI.