Cannot Get A Calendar To Respond To OnBlur Event Without Side-Effect

I am using a calendar that I have downloaded from a web site. I use this to provide a way for the user to choose a date from the calendar to fill in some date fields. Overall, the calendar works fine except for one problem that I cannot fix: When I add OnBlur event handler to the calendar, the calendar loses its capability to handle OnClick event -- therefore, the user cannot click a day from the calendar. I am trying to use the OnBlur event to hide the calendar as soon as the user clicks outside the calendar. Currently the user can click at a "Cancel" button on the calendar to hide the calendar, or the user can hit <Esc> key to hide it. But I think the calendar will work better if the user can click outside the calendar to hide it.

Attached please find a simplified version of the program that can show this problem. It has one single text field to put date on it. When you click at the text field, the calendar will pop up. This version has the OnBlur event handler commented out. Therefore, you should be able to choose a date from the calendar. But you cannot click outside the calendar to hide it. In order to show the problem, you need to go to the bottom of the program and uncomment this line:

Code:
//div.onblur = function() { calendar.hideCalendar(); };

After you have uncommented that line, you will find that you can click outside the calendar to hide it. Unfortunately, you will also find that choosing a date from the calendar only hides the calendar; the date is not being placed into the text field.