jQuery DatePicker Plugin and Facebox Gotcha

On June 22, 2010, in Javascript, by Anuj Gakhar

I have been using the excellent Datepicker Plugin by Keith Wood in one of my projects, along with Facebox and came across a gotcha today.

The Situation :-

I am basically using a link on the main page to open up a popup style window using Facebox. This main page itself is loaded via an AJAX call as one of the tabbed page content, not that it matters but I thought I would mention it. And in the Facebox window, I have a form which has some Date fields in it. I am using the mentioned Datepicker plugin to bring up a nice looking calendar for those fields.

The Problem :-

The DatePicker calendar popup doesn’t show up when you click on one of the Date fields, as it should. But when you close the window, you can see the remnants of the popup calendar, implying that it indeed opened up but was below the Facebox popup window, therefore, not visible.

The Solution :-

I used Firebug to see if the DatePicker was actually being written to the DOM. It was, indeed. I tried changing the z-index property to something high such as 9999 and it started appearing on the Facebox window form fields. So, I checked the jquery.datepick.js file to see how it was calculating the z-index. At line 980, it says :-

var zIndex = $target.css(‘zIndex’);
zIndex = (zIndex == ‘auto’ ? 0 : parseInt(zIndex, 10)) + 1;

So, it is basically picking the z-index of the target element and adding 1 to it. Therefore, I went ahead and added the z-index style to my form elements :-

<input type="text" style="z-index:9999;" id="startDatepicker" name="arrivaldate" />


And now the Datepicker works fine. I must admit I did spend more than an hour trying to find this solution, which is why I thought I should blog it.

Tagged with:  

One Response to jQuery DatePicker Plugin and Facebox Gotcha

  1. rashmi says:

    not working for me

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2011 Anuj Gakhar
%d bloggers like this: