ตัวเลือกวันที่ jquery ปัญหา z-index

ฉันมี div สไลด์โชว์และฉันมีฟิลด์ datepicker เหนือ div นั้น

เมื่อฉันคลิกในช่อง datepicker พาเนล datepicker จะแสดงด้านหลัง div สไลด์โชว์

และฉันได้วางสคริปต์เป็น:

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

ดังนั้นฉันจึงไม่สามารถเปลี่ยน z-index ของ datepicker ใน CSS ได้ z-index ของ datepicker ที่สคริปต์สร้างคือ 1 และสไลด์โชว์ div ของฉัน (เรียกผ่าน googleajaxapi ด้วย) z-index คือ 5 ดังนั้นฉันเดาว่าฉันต้องเพิ่ม z-index ของตัวเลือกวันที่มากกว่า 5 จึงมี วิธีใดที่จะเพิ่มได้?

ใครสามารถช่วยฉัน?

ใส่รูปแบบต่อไปนี้ที่ 'ป้อนข้อมูล' position: relative; z-index: 100000;องค์ประกอบข้อความ:

datepicker div รับดัชนี z จากอินพุต แต่จะใช้ได้เฉพาะเมื่อตำแหน่งสัมพันธ์กัน

ใช้วิธีนี้คุณไม่ต้องแก้ไขจาวาสคริปต์ใด ๆ จาก jQuery UI

เพียงแค่ใน css ของคุณใช้ ' .ui-datepicker{ z-index: 9999 !important;}' ที่นี่ 9999 สามารถแทนที่เป็นค่าเลเยอร์ใดก็ได้ที่คุณต้องการให้ datepicker ของคุณพร้อมใช้งาน ไม่ต้องใส่รหัสใด ๆ ที่จะแสดงความคิดเห็นหรือเพิ่ม ' position:relative;' css ในองค์ประกอบอินพุต เนื่องจากการเพิ่ม z-index ขององค์ประกอบอินพุตจะมีผลกับปุ่มประเภทอินพุตทั้งหมดซึ่งอาจไม่จำเป็นสำหรับบางกรณี

ทำงานให้ฉัน

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

จากคำตอบ markyzm สิ่งนี้ใช้ได้กับฉัน:

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

การเพิ่มคำตอบของจัสตินหากคุณกังวลเกี่ยวกับมาร์กอัปที่ไม่เป็นระเบียบหรือคุณไม่ต้องการให้ค่านี้ฮาร์ดโค้ดใน CSS คุณสามารถตั้งค่าอินพุตก่อนที่จะแสดง สิ่งนี้:

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

โปรดทราบว่าคุณไม่สามารถละเว้น"position": "relative"กฎได้เนื่องจากปลั๊กอินมีลักษณะอินไลน์สำหรับทั้งสองกฎหรือสไตล์ชีท แต่ไม่ใช่ทั้งสองอย่าง

dialog("widget")เป็น datepicker ที่เกิดขึ้นจริงที่ปรากฏขึ้น

ฉันมีปัญหานี้ฉันแก้ไขได้โดยใช้เมื่อคลิก:

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

ฉันมีกล่องโต้ตอบที่ใช้ datepicker อยู่ มันถูกซ่อนไว้เสมอ เมื่อฉันปรับดัชนี z ฟิลด์ในรูปแบบล่างจะปรากฏในกล่องโต้ตอบเสมอ

ฉันใช้วิธีแก้ปัญหาหลายอย่างที่เห็นเพื่อแก้ไขปัญหา

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

การแสดงก่อนหน้าทำให้แน่ใจว่า datepicker จะอยู่ด้านบนเสมอเมื่อเลือก แต่ onClose ช่วยให้แน่ใจว่าดัชนี z ของฟิลด์ได้รับการรีเซ็ตเพื่อไม่ให้ทับซ้อนกันในกล่องโต้ตอบใด ๆ ที่เปิดในภายหลังด้วย datepicker อื่น

ดูที่นี่: http://forum.jquery.com/topic/z-index-1-datepicker-1-8

ฉันมีหน้าที่มี datepicker อยู่ด้านบนของปุ่ม datatables.net tabletools ปุ่มข้อมูลมีดัชนี z สูงกว่าปุ่ม datepicker แต่ละปุ่ม ขอบคุณคำตอบของ Ronye ฉันสามารถแก้ไขปัญหานี้ได้โดยใช้ position: relative; และ z-index: 10,000 ขอบคุณ!

สิ่งนี้เกิดขึ้นกับฉันเมื่อฉันพลาดธีม ตรวจสอบให้แน่ใจว่ามีธีมอยู่หรืออาจโหลดธีมซ้ำแล้วอัปโหลดใหม่ไปยังเซิร์ฟเวอร์ของคุณ

สิ่งที่แก้ปัญหาของฉัน:

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

ในความเป็นจริงคุณมีประสิทธิภาพสามารถเพิ่มใน CSS ของคุณ.ui-datepicker{ z-index: 9999 !important;}แต่คุณสามารถปรับเปลี่ยนjquery-ui.cssหรือและเพิ่มในตอนท้ายของการเรียนjquery-ui.min.css UI-datepicker ที่ z-index: 9999 !important;ทั้งสองสิ่งใช้ได้ผลสำหรับฉัน (คุณต้องการเพียงสิ่งเดียวเท่านั้น ;-))

ฉันมีปัญหานี้เช่นกันเนื่องจาก datepicker ใช้ z-index ของอินพุตฉันจึงเพิ่ม css ต่อไปนี้

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

เพียงแค่ใช้กฎที่ใช้กับของคุณไม่ว่าจะโดยรหัสหลักคลาสหรือในกรณีของฉันคือกล่องโต้ตอบ bootstrap โดยใช้กลุ่มอินพุตและการควบคุมแบบฟอร์ม

ฉันต้อง

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