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 :-
1var zIndex = $target.css('zIndex');
2zIndex = (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 :-
1<input type="text" style="z-index:9999;" id="startDatepicker" name="arrivaldate"