Problema de índice z do seletor de data Jquery

Eu tenho um div de apresentação de slides e um campo selecionador de data acima desse div.

Quando clico no campo do selecionador de data, o painel do selecionador de data aparece atrás do div da apresentação de slides.

E eu coloquei o script como:

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

Portanto, não posso alterar o Z-index do datepicker no CSS. O z-index do selecionador de data que o script está gerando é 1 e meu div da apresentação de slides (também chamando através de googleajaxapi) z-index é 5. Então, acho que tenho que aumentar o z-index do selecionador de data para mais de 5. Então, alguma maneira de aumentá-lo?

Alguém pode me ajudar?

Coloque o seguinte estilo no elemento de texto 'input': position: relative; z-index: 100000;.

O div datepicker obtém o z-index da entrada, mas isso funciona apenas se a posição for relativa.

Usando desta forma, você não precisa modificar nenhum javascript do jQuery UI.

simplesmente em seu css use ' .ui-datepicker{ z-index: 9999 !important;}' Aqui 9999 pode ser substituído por qualquer valor de camada que você deseja que seu selecionador de data esteja disponível. Nenhum código deve ser comentado, nem a adição de ' position:relative;' css aos elementos de entrada. Porque o aumento do índice z dos elementos de entrada afetará todos os botões de tipo de entrada, o que pode não ser necessário em alguns casos.

trabalhou para mim

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

Com base na resposta do marksyzm, funcionou para mim:

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

Acrescentando à resposta de Justin, se você está preocupado com a marcação desordenada ou não quer este valor codificado em CSS, você pode definir a entrada antes que seja mostrado. Algo assim:

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

Observe que você não pode omitir a "position": "relative"regra, já que o plug-in ou parece no estilo embutido para ambas as regras ou a folha de estilo, mas não para ambos .

O dialog("widget")é o selecionador de data real que aparece.

Eu tive esse problema que resolvi usando no clique:

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

Tenho uma caixa de diálogo que usa o selecionador de data. Sempre esteve escondido. Quando ajustei o Z-index, o campo no formulário inferior sempre apareceu na caixa de diálogo.

Usei uma combinação de soluções que vi para resolver o 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  } ); }                    
            });

A exibição anterior garante que o selecionador de data esteja sempre no topo quando selecionado, mas o onClose garante que o índice z do campo seja redefinido para que não se sobreponha em quaisquer caixas de diálogo abertas posteriormente com um selecionador de data diferente.

Veja aqui: http://forum.jquery.com/topic/z-index-1-datepicker-1-8

Eu tenho uma página onde o selecionador de data estava no topo de um botão tabletools datatables.net. Os botões de tabelas de dados tinham um índice z maior do que os botões de data individuais do selecionador de data. Graças à resposta de Ronye, ​​consegui resolver esse problema usando posição: relativa; e Z-index: 10000. Obrigado!

Isso aconteceu comigo quando estava faltando o tema. Certifique-se de que o tema existe ou talvez recarregue o tema e carregue-o novamente no servidor.

Foi isso que resolveu meu problema:

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

Na verdade, você pode adicionar efetivamente em seu css, .ui-datepicker{ z-index: 9999 !important;}mas pode modificar jquery-ui.cssou jquery-ui.min.csse adicionar no final da classe ui-datepicker z-index: 9999 !important;. ambas as coisas funcionam para mim (você só precisa de um ;-))

Eu também tive esse problema, já que o selecionador de data usa o z-index da entrada, adicionei o seguinte css

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

Basta seguir a regra que se aplica ao seu, por id pai, classe ou, no meu caso, uma caixa de diálogo de bootstrap, usando seu grupo de entrada e controle de formulário.

Eu precisei

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