Popup Calendar 1.0 - DHTML Lab | 3

The old <select> element problem is still not completely resolved.

For a full discussion of the problem, see our old article: Positioned Elements and OS Controls, Applets and Plug-ins.

Internet Explorer ( all versions ) and Netscape ( up to version 7.0 ) have the problem, whereas Opera does not.

	Here is an example of a popup calendar link next to a select element.
	Internet Explorer ( all versions ) behaviour: The <select> element is not obscured by the calendar. This behaviour applies to both drop-down <select size="1">, and multiple-option-display <select size="2+"> elements.
	Netscape ( up to version 7.0 ) behaviour: The scrollbar of a multiple-option-display <select> element is not obscured by the calendar. Drop-down <select size="1"> elements are not affected. The problem was finally fixed in Netscape 7.1
	If hide_selects is set to true, the script temporarily hides any <select> element that occupies the same screen real estate as a popup calendar, for those browsers that have the problem.

The script provides a default hide_selects value of true.

Usage Suggestion:
Set to true if there are <select> elements in your pages. If you are unsure, then set to true to avoid future display problems.

Defines the display behavior of the calendar once a user has made a valid date selection.

If hide_onselection is set to true then the calendar is hidden immediately upon date selection.

If hide_onselection is set to false then the calendar remains visible upon date selection. The user must click outside the calendar to hide it.

The script provides a default hide_onselection value of true.

In an application, the user's date choice may need to be processed by custom JavaScript of your own.

The script can call any custom function upon user selection. It passes the function five arguments which you can then use as required:

1. a JavaScript Date object reflecting the user's choice.
2. a 4-digit number representing the year chosen the user.
3. a number between 1 and 12 representing the month chosen the user.
4. a number representing the date chosen the user.
5. a number between 1 and 7 representing the day of the week chosen the user,
   with Sunday being 1 and Saturday being 7.

Let's take as an example the case where you want to load a new page relevant to the date chosen, and you have no <form> in your page. You want to pass the chosen date as a formatted query string. In this case you could do the following:

1. Create a custom function anywhere in your page that the calendar will call:

   function processUserSelection( dDate, nYear, nMonth, nDate, nDay )
   {
       var sDateString = ( nYear + "-" + nMonth + "-" + nDate );
       var sNewURL = ( "displayflights.html?departure=" + sDateString );
       window.location = sNewURL;
   }

2. Set the callfunction_onselection attribute in your <DLCALENDAR> tag:

   <DLCALENDAR start_date = "2004,7,30"
               end_date = "2004,12,31"
               click_element_id = "img_flightdeparture"
               tool_tip = "Click to choose flight departure"
               callfunction_onselection = "processUserSelection"></DLCALENDAR>

Of course, the script does not provide a default callfunction_onselection value.