jquery-ui datepicker change z-index
There is a more elegant way to do it. Add this CSS:
.date_field {position: relative; z-index:100;}
jQuery will set the calendar's z-index
to 101 (one more than the corresponding element). The position
field must be absolute
, relative
or fixed
. jQuery searches for the first element's parent, which is absolute/relative/fixed, and takes its' z-index
Your JS code in the question doesn't work because jQuery resets the style
attribute of the datepicker widget every time you call it.
An easy way to override its style
's z-index
is with a !important
CSS rule as already mentioned in another answer. Yet another answer suggests setting position: relative;
and z-index
on the input element itself which will be automatically copied over to the Datepicker widget.
But, as requested, if for whatever reason you really need to set it dynamically, adding more unnecessary code and processing to your page, you can try this:
$('.date_field').datepicker({
//comment the beforeShow handler if you want to see the ugly overlay
beforeShow: function() {
setTimeout(function(){
$('.ui-datepicker').css('z-index', 99999999999999);
}, 0);
}
});
Fiddle
I created a deferred function object to set the z-index
of the widget, after it gets reset'ed by the jQuery UI, every time you call it. It should suffice your needs.
The CSS hack is far less ugly IMO, I reserve a space in my CSS only for jQuery UI tweaks (that's right above the IE6 tweaks in my pages).
This worked for me when I was trying to use datepicker in conjunction with a bootstrap modal:
$('input[id^="txtDate"]').datepicker();
$('input[id^="txtDate"]').on('focus', function (e) {
e.preventDefault();
$(this).datepicker('show');
$(this).datepicker('widget').css('z-index', 1051);
});
Of course, change the selector to fit your own need. I set the "z-index" to 1051 because the z-index for the bootstrap modal was set to 1050.
You need to use !important
clause to force the in-line z-index
value using CSS.
.ui-datepicker{z-index: 99 !important};