Contact   •   Products   •   Search

Rick Strahl's Web Log

Wind, waves, code and everything in between...
ASP.NET • C# • HTML5 • JavaScript • AngularJs

jQuery UI Datepicker and z-Index


The jQuery date picker is a nice little date picking solution that’s easy to use and work with. 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 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:

DatePickerPopup

Ooops… not quite the expected behavior, huh?

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. Both the modal overlay and the dialog have higher z-Index values than the date picker popup.

There’s a relatively easy fix for this which should work on a page or even application level in most cases:

<style type="text/css">
    #ui-datepicker-div
    {
        z-index: 9999999;
    }
</style>

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.

Fixed z-Index will cause Problems

That solves the problem if your z-index values on pages are relatively fixed. But this may not always be the case. 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.

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. Just consider the modal popup, the dialog and the date picker. Add to that a few draggable dialogs and the whole concept and you quickly run out of fixed values that work in multiple situations.

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.

I talked about this via a jQuery maxZIndex Plug-in a while ago. 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 use this extensively in my draggable component as well as in the modal dialog and other components. Because it’s so short here it is again inline:

$.maxZIndex = $.fn.maxZIndex = function(opt) {
    /// <summary>
    /// Returns the max zOrder in the document (no parameter)
    /// Sets max zOrder by passing a non-zero number
    /// which gets added to the highest zOrder.
    /// </summary>    
    /// <param name="opt" type="object">
    /// inc: increment value, 
    /// group: selector for zIndex elements to find max for
    /// </param>
    /// <returns type="jQuery" />
    var def = { inc: 10, group: "*" };
    $.extend(def, opt);
    var zmax = 0;
    $(def.group).each(function() {
        var cur = parseInt($(this).css('z-index'));
        zmax = cur > zmax ? cur : zmax;
    });
    if (!this.jquery)
        return zmax;

    return this.each(function() {
        zmax += def.inc;
        $(this).css("z-index", zmax);
    });
}

So… this can also be applied to the date picker. Ideally something like this should be used internally by the date picker, but well, we don’t live in an ideal world. The next best thing is that we can hook the datepicker in initialization and use the max zindex plug in to assign the high zindex:

jQuery('#txtDate').datepicker({ showButtonPanel: true, 
showOn: 'button',
buttonImageOnly: true,
buttonImage: '/wconnect/images/calendar.gif',
beforeShow: function() {$('#ui-datepicker-div').maxZIndex(); },
dateFormat: 'mm/dd/yy' }).attachDatepickerInputKeys();

Now no matter what z-index is used the date pop up always pops up on top of the content:

DatePopupGood

As 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. You can find this control as part of the West Wind Web Toolkit in the Westwind.Web project if you’re curious.

I suppose the same thing could also be done in JavaScript with some sort of factory function that sets all your default options on the date control. Certainly you don’t want to set those 6 or 7 common settings on each instance.

Make Donation
Posted in jQuery  HTML  JavaScript  


Feedback for this Post

 
# jQuery UI Datepicker and z-Index
by DotNetKicks.com September 12, 2009 @ 8:45pm
You've been kicked (a good thing) - Trackback from DotNetKicks.com
# Interesting Finds: September 13, 2009
by Jason Haley September 13, 2009 @ 6:29am
Interesting Finds: September 13, 2009
# re: jQuery UI Datepicker and z-Index
by David Robbins September 13, 2009 @ 5:09pm
Awesome - I've been struggling with z-order and and a form validation plugin. My interface has div where the overflow needs to scroll and your post will help re-work the ugly hack I was playing with. Good stuff!
# re: jQuery UI Datepicker and z-Index
by Marv September 14, 2009 @ 4:29am
Rick,

Have you tried using the datepicker in Google Chrome? And/or with the blockUI plug-in. Seems to be problems that render datepicker not-too-usable and I haven't been able to figure out what's going on. The datepicker calender renders on top BUT the month and year dropdowns don't dropdown.

Marv
# re: jQuery UI Datepicker and z-Index
by Stan McGinnis September 15, 2009 @ 8:05am
Has anyone experienced issues with the calendar control missing after loading other control files? It works great for me on pages that I do not add controls.

Example: Pages that have this in the Code Behind, it does not display the ImageButton.

CS:
PlaceHolder1.Controls.Add(LoadControl("~/Controls/control1.ascx"));

ASPX:
<asp:jQueryDatePicker runat="server" id="TextBox_DateNeeded"
DisplayMode="ImageButton" DateFormat="MM/dd/yyyy" Width="80px" />

Web.config:
<system.web>
<pages>
<controls>
<add tagPrefix="asp"
namespace="Westwind.Web.Controls"
assembly="jQueryDatePicker" />
</controls>
</pages>

Thanks for any suggestions.
- Stan
# re: jQuery UI Datepicker and z-Index
by Jared Roberts September 15, 2009 @ 4:46pm
Very cool find. Did you write the maxZIndex plug-in? I am adding it to my script library. Thanks.
# re: jQuery UI Datepicker and z-Index
by Rick Strahl September 15, 2009 @ 5:53pm
Yes and feel free to use it. It's part of ww.jquery.js which includes a host of common functionality that I use in almost every client app. http://www.west-wind.com:8080/svn/WestwindWebToolkit/trunk/Westwind.Web/Resources/ww.jquery.js
# re: jQuery UI Datepicker and z-Index
by Rick Strahl September 15, 2009 @ 5:55pm
@Stan - make sure the controls you are loading aren't breaking your HTML. If you have mismatched tags in those user controls it could break your page and the date picker in particular.

To test you might want to move the date picker towards the top of the page and see if the problem goes away (although it may still occur depending on how bad the page breaks).
# re: jQuery UI Datepicker and z-Index
by Imran Khatri November 26, 2009 @ 4:57am
Awesome!!!
This is really a great code snippet. I was struggle to solve the z-index order issues and this code really solved it. Thanks a ton.
# re: jQuery UI Datepicker and z-Index
by Naveen November 27, 2009 @ 2:22am
tHANKS a ton mate....it works for me
# re: jQuery UI Datepicker and z-Index
by Robert Wafle November 30, 2009 @ 8:59am
Hi Rick.

Thanks for the snippet. This worked!

Rob
# re: jQuery UI Datepicker and z-Index
by Yi Wen December 22, 2009 @ 5:53pm
Good plugin, thanks. I got a question, everything is fine after the plugin. But I cannot select a month or year. click on either dropdown list has absolutely no effect. Do you know why? And what does attachDatepickerInputKeys() function do?
# re: jQuery UI Datepicker and z-Index
by Yi Wen December 22, 2009 @ 6:34pm
Sorry for the spam. Just want to add some details: it is actually not working with webkit based browsers such as chrome and safari. But works fine for Firefox
# re: jQuery UI Datepicker and z-Index
by Rick Strahl December 22, 2009 @ 11:46pm
@Yi - not sure what the problem is on your end. Can you visit: http://www.west-wind.com/WestwindWebToolkit/samples/Ajax/jQueryDatePicker.aspx and see if this works with Safari or Chrome? It works for me and is using this same codebase.
# re: jQuery UI Datepicker and z-Index
by Travis March 15, 2010 @ 10:26am
Great stuff. This was the problam and I assumed it waas so I typed in z index datepicker and you poped up first. simple solution! thanks!
# re: jQuery UI Datepicker and z-Index
by paul June 04, 2010 @ 5:57am
hi,

very helpful. thank you very much.
# re: jQuery UI Datepicker and z-Index
by vk June 07, 2010 @ 10:41am
Very helpful. Thanks man.
# re: jQuery UI Datepicker and z-Index
by tanay July 08, 2010 @ 11:23pm
thanks
# re: jQuery UI Datepicker and z-Index
by Jay August 26, 2010 @ 12:59pm
Thank you so much. I was using 1000 as zIndex and thought it's high enough. The much larger zIndex is definitely a safe way to make sure the popup is always shown properly.
# beforeShow did not fix it
by Fayez Naccache September 08, 2010 @ 5:21am
Hello,
the event beforeShow did not fix the z-index for me.
I think because the datepicker div is created with the input z-index+1.
You can easily hack your Datepicker like this :)

in the compressed version you can find this instruction
b.dpDiv.zIndex(d(a).zIndex()+1);

or this instruction the development bundle
inst.dpDiv.zIndex($(input).zIndex()+1);


Just change 1 to your preferred z-index
b.dpDiv.zIndex(d(a).zIndex()+9999);


Hope it will help someone
Regards
# re: jQuery UI Datepicker and z-Index
by Teebes September 15, 2010 @ 9:59am
@Fayez Naccache thanks your solution worked great. Using beforeShow was not working for me either as it seems that jQuery UI overwrites the z-index after that. But hacking the code did do the trick. Hopefully jQuery UI will provide some sort of 'afterShow' event at some point so that the z-index can be set there.
# re: jQuery UI Datepicker and z-Index
by Venkatesh October 14, 2010 @ 11:57pm
This did not work for me. I am using jquery to popup an div, inside popup div there is another div along with some input fields. When I key in something in the input field it is showing the div with related stuff in it by putting scroll bar to popup div.
But my requirement is, the div inside popup should show on top of popup div.
I tried your method to set z-index with position:relative but no use.
Any help is appreciated.
# re: jQuery UI Datepicker and z-Index
by Ignacio October 20, 2010 @ 5:19pm
Thank so much for your help, the relatively easy fix for this which show in the beginig work for me, thank a lot!
# re: jQuery UI Datepicker and z-Index
by Volker October 31, 2010 @ 8:56pm
THANKs

Fayez Naccache September 08, 2010 @ 5:21 am

This fixed the issue easily for for all browser...started already going insane over this and nobody else posted this easy fix...

All best
# re: jQuery UI Datepicker and z-Index
by Stan December 08, 2010 @ 2:38pm

For those of you that simply want to set the z-index of the style... you may need to add the !important keyword to the style definition for it to take affect.

#ui-datepicker-div {z-index:2500 !important;}
# re: jQuery UI Datepicker and z-Index
by Erik January 21, 2011 @ 2:07pm
Thanks Stan, you put an end to that PITA.
# re: jQuery UI Datepicker and z-Index
by shiv January 21, 2011 @ 6:52pm
@Stan Thank you :), your z-index:2500 !important; fix, fixed my problem.
# re: jQuery UI Datepicker and z-Index
by Kacer April 18, 2011 @ 12:09pm
Just change line, where maxZindex set z-index to this
return this.each(function() {
        zmax += def.inc;
        $(this).css("z-index", zmax +' !important');
    });

This is better than set it in <style> because, what is some element will have z-index bigger than your value (more that for example 2500) ?
 


West Wind  © Rick Strahl, West Wind Technologies, 2005 - 2014