Masalah indeks-z pemilih tanggal jquery


106

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?


Jawaban:


176

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.


8
Masalah dengan ini adalah bahwa input Anda akan ditampilkan di atas elemen lain, ini jarang merupakan efek yang diinginkan
Serj Sagan

1
Apakah itu seharusnya berfungsi ketika datepicker terikat pada suatu rentang ?
rmoestl

10
position : relativetidak dapat diterima dan tidak berfungsi dalam situasi saya. solusi di bawah ini berfungsi dengan baik.
Kiwy

1
ini tidak berfungsi pada browser IE 11. Apakah browser ini khusus?
Ashwini Maddala

3
Solusi ini, meskipun berhasil, tidak valid untuk semua situasi. Yang terbaik adalah menggantinya dengan satu baris CSS '.ui-datepicker {z-index: 9999! Important;}'
Daniel Tung

154

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.


Saya harus menggunakan datepickerdaripadaui-datepicker
M Smith

JavaScript masih menggunakan indeks-z terputus-putus, konteks penumpukan arbitrer, dan memiliki masalah kompatibilitas lintas-browser pada tahun 2016? ActionScript 3 FTW (satu dekade lalu, dan masih hari ini).
Triynko


14

Berdasarkan jawaban marksyzm, ini berhasil untuk saya:

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

1
Tapi ini hanya mempengaruhi input dan bukan tampilan datepicker?
marksyzm

2
Saya menggunakan contoh jqueryui.com/datepicker ini yang tidak menggunakan ikon untuk datepicker. Dengan solusi ini saya tidak mengalami masalah dengan komponen web lainnya.
Lucas

5

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.


1
Masalah ini harus diatasi dalam skrip JqueryUI dan diatur untuk mencegah overlay secara default. Mayoritas kasus penggunaan tidak ingin ada masukan yang menutupi kemampuan masukan kalender. Jika ada kebutuhan untuk memasukkan input (atau elemen lain) ke kalender, maka solusi seperti ini harus digunakan. Karena itu, @marksyzm akan menjadi solusi terbaik IMO karena Anda hanya akan menerapkannya saat diperlukan.
FrankO

5

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');

Solusi ini bekerja dengan sempurna di jendela popup untuk saya. Terima kasih!
wanita gelap

5

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.


Solusi ini hebat dan memecahkan masalah saya. Tapi edit sedikit di bagian "onClose". Saya menempatkan $(this)sebagai ganti $('.ui-datepicker'). Jadi, ini akan disetel z-index:0ke "input ini" alih-alih semua input dengan kelas ui-datepicker.
Asuka165


1

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!


1

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


1

Itulah yang memecahkan masalah saya:

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

1

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


0

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.


0

saya harus

.datepicker.dropdown-menu {
    position: relative;
    z-index: 9999 !important;
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.