How to change jQuery UI Datepicker Z-Index value?

user1732364 picture user1732364 · Dec 11, 2012 · Viewed 24.6k times · Source

I am forced to use an older version of jquery ui which is 1.8.10. The datepicker in this version had a bug inside of the z-index setting which at times made it appear under other controls. I am simply wanting to adjust the z-index of the dp so that it appears on top of the other controls. I attempted to change the z-index into the .js file but that failed. I'v read you have to set this value on the aftershow event because the value will get overwritten if its earlier(not sure if this is true). Here is an example of how im creating an instance of the dp...i also attached a timepicker to the datepicker.

        $(function () {
        $("input[id$='txtPreviousCutOff']").datetimepicker({
            timeFormat: "hh:mm tt",
            stepMinute: 5
        });
        $("#dpimage6").click(function () {
            $("input[id$='txtPreviousCutOff']").datepicker("show")
        });
    });

Answer

Magicmarkker picture Magicmarkker · Dec 11, 2012
.ui-datepicker-div { z-index: 999999; }

or with js:

$(function () {
    $("input[id$='txtPreviousCutOff']").datetimepicker({
        timeFormat: "hh:mm tt",
        stepMinute: 5
     });
     $("#dpimage6").click(function () {
        $("input[id$='txtPreviousCutOff']").datepicker("show")
    });
    $('.ui-datepicker-div').css('zIndex', 999999);
});