Contact   •   Articles   •   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  

The Voices of Reason


 

DotNetKicks.com
September 12, 2009

# jQuery UI Datepicker and z-Index

You've been kicked (a good thing) - Trackback from DotNetKicks.com

Jason Haley
September 13, 2009

# Interesting Finds: September 13, 2009

Interesting Finds: September 13, 2009

David Robbins
September 13, 2009

# re: jQuery UI Datepicker and z-Index

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!

Marv
September 14, 2009

# re: jQuery UI Datepicker and z-Index

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

Stan McGinnis
September 15, 2009

# re: jQuery UI Datepicker and z-Index

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

Jared Roberts
September 15, 2009

# re: jQuery UI Datepicker and z-Index

Very cool find. Did you write the maxZIndex plug-in? I am adding it to my script library. Thanks.

Rick Strahl
September 15, 2009

# re: jQuery UI Datepicker and z-Index

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

Rick Strahl
September 15, 2009

# re: jQuery UI Datepicker and z-Index

@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).

Imran Khatri
November 26, 2009

# re: jQuery UI Datepicker and z-Index

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.

Naveen
November 27, 2009

# re: jQuery UI Datepicker and z-Index

tHANKS a ton mate....it works for me

Robert Wafle
November 30, 2009

# re: jQuery UI Datepicker and z-Index

Hi Rick.

Thanks for the snippet. This worked!

Rob

Yi Wen
December 22, 2009

# re: jQuery UI Datepicker and z-Index

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?

Yi Wen
December 22, 2009

# re: jQuery UI Datepicker and z-Index

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

Rick Strahl
December 22, 2009

# re: jQuery UI Datepicker and z-Index

@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.

Travis
March 15, 2010

# re: jQuery UI Datepicker and z-Index

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!

paul
June 04, 2010

# re: jQuery UI Datepicker and z-Index

hi,

very helpful. thank you very much.

vk
June 07, 2010

# re: jQuery UI Datepicker and z-Index

Very helpful. Thanks man.

tanay
July 08, 2010

# re: jQuery UI Datepicker and z-Index

thanks

Jay
August 26, 2010

# re: jQuery UI Datepicker and z-Index

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.

Fayez Naccache
September 08, 2010

# beforeShow did not fix it

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

Teebes
September 15, 2010

# re: jQuery UI Datepicker and z-Index

@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.

Venkatesh
October 14, 2010

# re: jQuery UI Datepicker and z-Index

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.

Ignacio
October 20, 2010

# re: jQuery UI Datepicker and z-Index

Thank so much for your help, the relatively easy fix for this which show in the beginig work for me, thank a lot!

Volker
October 31, 2010

# re: jQuery UI Datepicker and z-Index

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

Stan
December 08, 2010

# re: jQuery UI Datepicker and z-Index


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

Erik
January 21, 2011

# re: jQuery UI Datepicker and z-Index

Thanks Stan, you put an end to that PITA.

shiv
January 21, 2011

# re: jQuery UI Datepicker and z-Index

@Stan Thank you :), your z-index:2500 !important; fix, fixed my problem.

Kacer
April 18, 2011

# re: jQuery UI Datepicker and z-Index

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 - 2015