Masalah indeks-z pemilih tanggal jquery

Saya memiliki div slideshow, dan saya memiliki bidang datepicker di atas div itu.

Ketika saya mengklik di bidang datepicker, panel datepicker ditampilkan di belakang div slideshow.

Dan saya telah menempatkan skrip sebagai:

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

Jadi saya tidak bisa mengubah z-index dari datepicker di CSS. Indeks-z datepicker yang dihasilkan skrip adalah 1 dan div slideshow saya (juga memanggil melalui googleajaxapi) z-index adalah 5. Jadi saya rasa saya harus meningkatkan indeks-z pemilih tanggal lebih besar dari 5. Jadi apakah ada ada cara untuk meningkatkannya?

Seseorang dapat membantu saya?

Masukan gaya berikut pada 'input' elemen teks: position: relative; z-index: 100000;.

Div datepicker mengambil indeks-z dari input, tetapi ini hanya berfungsi jika posisinya relatif.

Dengan cara ini Anda tidak perlu memodifikasi javascript apa pun dari jQuery UI.

cukup dalam penggunaan css Anda ' .ui-datepicker{ z-index: 9999 !important;}' Di sini 9999 dapat diganti ke nilai lapisan apa pun yang Anda inginkan agar datepicker Anda tersedia. Tidak ada kode yang akan dikomentari atau menambahkan ' position:relative;' css pada elemen masukan. Karena meningkatkan indeks-z elemen masukan akan berpengaruh pada semua tombol jenis masukan, yang mungkin tidak diperlukan untuk beberapa kasus.

bekerja untuk saya

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

Berdasarkan jawaban marksyzm, ini berhasil untuk saya:

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

Menambah jawaban Justin, jika Anda khawatir tentang markup yang tidak rapi atau Anda tidak ingin nilai ini dikodekan secara keras di CSS, Anda dapat mengatur input sebelum ditampilkan. Sesuatu seperti ini:

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

Perhatikan bahwa Anda tidak dapat menghilangkan "position": "relative"aturan, karena plugin terlihat dalam gaya sebaris untuk kedua aturan atau lembar gaya, tetapi tidak keduanya .

Ini dialog("widget")adalah datepicker sebenarnya yang muncul.

Saya memiliki masalah ini yang saya selesaikan dengan menggunakan klik:

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

Saya memiliki kotak dialog yang menggunakan datepicker di atasnya. Itu selalu tersembunyi. Saat saya menyesuaikan indeks-z, bidang di formulir bawah selalu muncul di dialog.

Saya menggunakan kombinasi solusi yang saya lihat untuk menyelesaikan masalah.

$('.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  } ); }                    
            });

Pertunjukan sebelum memastikan bahwa pemilih data selalu berada di atas saat dipilih, tetapi onClose memastikan bahwa indeks-z bidang disetel ulang sehingga tidak tumpang tindih pada dialog apa pun yang dibuka nanti dengan pemilih data yang berbeda.

Lihat di sini: http://forum.jquery.com/topic/z-index-1-datepicker-1-8

Saya memiliki halaman di mana pemilih data berada di atas tombol tabletools datatables.net. Tombol tabel data memiliki indeks-z yang lebih tinggi daripada tombol tanggal pemilih data individual. Berkat jawaban Ronye, ​​saya dapat menyelesaikan masalah ini dengan menggunakan posisi: relatif; dan z-index: 10000. Terima kasih!

Ini terjadi pada saya ketika saya kehilangan temanya. Pastikan tema tersebut ada, atau mungkin muat ulang tema, dan unggah ulang ke server Anda.

Itulah yang memecahkan masalah saya:

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

Sebenarnya Anda dapat secara efektif menambahkan css .ui-datepicker{ z-index: 9999 !important;}Anda tetapi Anda dapat memodifikasi jquery-ui.cssatau jquery-ui.min.cssdan menambahkan di akhir kelas ui-datepicker z-index: 9999 !important;. kedua hal itu bekerja untuk saya (Anda hanya perlu satu ;-))

Saya mengalami masalah ini juga, karena datepicker menggunakan input z-index, saya menambahkan css berikut

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

Ambil saja aturan yang berlaku untuk Anda, baik dengan id orang tua, kelas, atau dalam kasus saya dialog bootstrap, menggunakan input-group dan form-control.

saya harus

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