The Calendar popup Goes Over Select Elements in IE

Notice in the example page for the calendar popup that when using Microsoft Internet Explorer 5.5 and above, the calendar does not go under the drop down list but goes over the drop down list.

If you look at Lea Smart's calendar popup, which is what I used as a basis for the Calendar popup, the calendar goes under the drop down list when using IE.

All you have to do to make an element go over instead of under a select element in IE is add an iframe in the containing element, absolute positioned, the same size as your element with a z-index less than your element.

Check out the code in calpopup.js to see how it works.


Gravatar Image1. Posted at 04/12/2006 10:20:32 by Tanny

What day is it

Gravatar Image2. Posted at 04/14/2006 15:26:46 by Chris Moorhouse

Very nifty! The iframe is a solution i've heard of before for the select issue, but this security problem is not:

{ Link }

At least, i think that's what's giving me the problems. At ant rate, I took the iframe out, and my problems disappeared.

Overall, it's a great datepicker, certainly worth having handy...

Gravatar Image3. Posted at 04/16/2006 22:55:17 by Tanny O'Haley

Hi Chris,

It's actually pretty easy to fix the security problem where you get a message that says:

This page contains both secure and nonsecure items.

Just create a blank page on your site to load in the iframe. Then change the iframe element to point to the blank page.

Gravatar Image4. Posted at 04/17/2006 15:44:16 by Chris Moorhouse

Yeah, that's what I did... but a number of other scripts on the same page still didn't seem to like it very much, particularly the ones used for navigation out of the encrypted area. It's a short term solution.

Now, the reason why our nav links are JS-only is another issue entirely!

Gravatar Image5. Posted at 04/18/2006 4:31:17 by Tommi Kivela

Thanks for the good calendar example. However when testing it I found 2 errors in it while testing it at your example site ({ Link }).

1st problem: If you go to the "A rolling 2 week period from today only" and press date selection picture and then select a date you get an error: "Invalid date string". Inspite this the correct date is then written to the textbox besides the dropdown icon.

2nd problem: If you go to the first "No date restrictions at all" and press date selection picture and then select a date you get an error: "months is not defined". Inspite this the correct date is then written to the textbox besides the dropdown icon.

I tested with both Firefox ( and IE (6.0.290) and with both resulted those two errors.

Is it possible for you to add 2 new date formats, and d.m.yyyy? Those formats are used in many european countries and would make the calendar even more usable.

Best regards from Finland


Gravatar Image6. Posted at 04/18/2006 11:01:46 by Tanny O'Haley


Wow, good find. Please try it again. If you are using a Windows computer press <ctrl-F5> to make sure that the files are not coming from your cache. I also added the period as a delimiter.

Gravatar Image7. Posted at 04/20/2006 13:47:34 by Tommi Kivela

Hello Tanny,

I tested the popups again and now they seem to be working fine. The new date format (d.m.yyyy) works also perfectly, thank you!

Best regards


Gravatar Image8. Posted at 08/01/2006 8:10:48 by stalin


i am using ur calendarexample code but it is not working in "MAC" in Mac i am able to open calendar but i am not able to click on calendar so, can u send me the solution to this... its very urgent..........

link ::

{ Link }

when i am tring to open this link in MAC i am able to open calendar but i am not able to click date's anything plz send me ....

Advance Thanx,


Gravatar Image9. Posted at 08/03/2006 11:41:25 by Tanny O'Haley

I have a work-around for this Safari bug. Apparently Safari doesn't like elements that have click events in them that have been created with createElement and insertBefore. These are the DOM methods I use to create the calendar container. The solution is to create the calendar container in your HTML. I know it's not a great solution, but it does work.

Just after the <body> tag add the following:

<div id="calcontainer"></div>

You can see a sample of this at dpsafaritest.htm

If anyone knows of a better solution, please tell me. In the mean time, I've reported this bug to Safari and I'm on the lookout for a permanent fix.

Gravatar Image10. Posted at 09/18/2006 21:45:27 by Ian Edmond

Whicked! You solution with cal popup going underneath select's in IE worked really well. Brilliant!!!



Gravatar Image11. Posted at 11/02/2006 3:43:01 by Daniel

I'm having a problem with the latest Javascript+CSS combination (downloaded today 02/11/2006).

In a HTTPS website if I go to a previous month and then either let the popup timeout or select a date the dark grey surrounding of the popup will remain.

This has been tested on both Internet Explorer 6.0.2800 and 6.0.2900.

Seems to work fine on a local machine though with or without HTTPS.

Javascript is slighlty modified by setting the IFRAME SRC to a blank.html file that only contains "<html><body></body></html>" to remove the IE security warning.

Gravatar Image12. Posted at 11/02/2006 13:10:58 by Tanny O'Haley


Thank you for your email, I'm glad you found the problem and it is working. I really do have to re-work the code for https so that users don't get the security warning. I need to add instructions to use blank.htm for the iframe src. I also have to provide instructions for the DOMContentLoaded event handler too.

Gravatar Image14. Posted at 07/16/2009 13:00:45 by vj

A rolling 2 week period from today only-display the calendar inline ,instead of popup

How to display lea smart's popup calendar inline, instead of clicking on the image, I need to display on the page as it loads, can anyone help me. thanks in advance.

Add a comment

Discussion for this entry is now closed.