One of the most widely used (and oldest) javascript popup calendars on the web is Matt Kruse’s CalendarPopup, posted at http://www.mattkruse.com/javascript/calendarpopup/. Matt provides plenty of examples and different ways to use this handy script, which provides the user with a visual way to input a date into a form control.

However, the script hasn’t been updated in a long time, and has a long-running bug that shows up in Safari on Mac OS and Windows. The bug occurs when the user clicks to show the pop up calendar, and then clicks outside the calendar box (as if to cancel it) — the calendar is supposed to close, but it doesn’t.

Here is the solution to that bug to help all of you Google searchers out there trying to get the calendar div popup to hide when the user clicks somewhere else on the page.
In the “PopupWindow.js” file, on Line 240:

var t = e.originalTarget;

I do not think Safari supports “originalTarget” for an event, at least not in this case. In Safari ‘t’ will be undefined. After this line, add:

if(t===undefined){
t = e.target;
}

I don’t know if this works in browsers earlier than Safari 3.0, but I tested it in Firefox 3, IE 6, and Safari 3.

You can download the full combined JS source with the fix already included on my website here.

By the way, as a developer primarily working on Windows, I never thought there was a point in using the Safari browser on Windows. However, I had to test something recently in the browser so I installed it and started using it. I’m now glad I did, because it generates & logs strict HTML and Javascript errors in the error console that other browsers, like Firefox, just ignore.