Now no matter what z-index is used the date pop up always pops up on top of the content:Īs I mentioned previously because there are a handful of common things I do to my date picker control I’ve wrapped this thing up into an ASP.NET server control that handles all of these configuration options. Because it’s so short here it is again inline: $.maxZIndex = $.fn.maxZIndex = function(opt) ).attachDatepickerInputKeys() I use this extensively in my draggable component as well as in the modal dialog and other components. The plug-in offers an easy way to find the max z-Index used in a page and also assign a new max z-Index to an element. I talked about this via a jQuery maxZIndex Plug-in a while ago. When it really comes down to it z-index needs to be managed slightly differently with an easy way to change the z-Index to the maximum value to guarantee that the item ends up on top – generically regardless of what else is on the page. Add to that a few draggable dialogs and the whole concept and you quickly run out of fixed values that work in multiple situations. Just consider the modal popup, the dialog and the date picker. ZOrder tracking can be a real bitch if you have multiple components or applications all trying to figure out the best way to pop to the top of the stack by utilizing some fixed z-Index value. For example, if you have multiple dialogs on a page that are draggable you probably want to have the ability to have dialogs dropped to automatically pop to the top of the zOrder. That solves the problem if your z-index values on pages are relatively fixed. The pop up window that the date picker uses is called ui-datepicker-div and so you can style the thing with a sufficiently high z-index value that it always pops up above anything else you might have configured. There’s a relatively easy fix for this which should work on a page or even application level in most cases:
Both the modal overlay and the dialog have higher z-Index values than the date picker popup. What’s happening in this example is that the date picker is hosted inside of a position absolute element (the dialog) which sits on top of a modal overlay. Ooops… not quite the expected behavior, huh? The control works great, but there’s one thing that a number of people using the control have run into: When the date picker is used with other controls that use z-Indexes extensively it’s quite easy to end up with a date picker that doesn’t pop up properly: I’ve used this control in many places and some time ago wrapped it into an ASP.NET server control to make it easier to work with yet. The jQuery date picker is a nice little date picking solution that’s easy to use and work with.