How to change jQuery UI Datepicker Z-Index value?

Question

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 1

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

Answer 2

You would need to apply styles to the ui-widget-content class

.ui-widget-content
{
    z-index: 100; 
}

Make sure to have the class added with better specificity so that it overrides the UI styles

#datepicker.ui-widget-content {}