Popup Calendar 1.0 - DHTML Lab | 3
Pop-up Calendar 1.0
The Calendar Attributes, Part 7
||hide_selects = "true"
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.
Set to true if there are <select> elements in your pages.
If you are unsure, then set to true to avoid future display problems.
||hide_onselection = "true"
Defines the display behavior of the calendar once a user has made a valid date selection.
hide_onselection is set to true then the calendar is hidden immediately upon date selection.
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.
The script can call any custom function upon user selection. It passes the function five arguments which you can then use as required:
- a 4-digit number representing the year chosen the user.
- a number between 1 and 12 representing the month chosen the user.
- a number representing the date chosen the user.
- 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:
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;
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.
Finally, we wrap up.
Send a comment or suggestion to Peter Belesis
Created: July 20, 2004
Revised: July 20, 2004