Displaying Dates: Smart Calendar Components
Credit: Lea Smart,
Putting in time and date calendar control greatly simplifies date entry
on forms..We examone 3 components for their ease of use and effectiveness.
Uses CSS and pop-up windows to build up calendar along with setTimeout()
that fill in values automatically.
Lea Calendar Setup: To
use the calendar component you will need 3 subdirectories ( images,
styles <= calendar.css.
<link rel="STYLESHEET" type="text/css" href="styles/calendar.css">
Next place the following two lines in the <head> block
of your html file:
Finally add the following code to display a calendar:
onmouseover="if (timeoutId) clearTimeout(timeoutId);window.status='Show
onmouseout="if (timeoutDelay) calendarTimeout();window.status='';"
onclick="g_Calendar.show(event,'form1.ex1',true, 'mm/dd/yyyy', new Date(2003,2,15),new Date(2003,3,25)); return false;">
<img src="images/calendar.gif" name="imgCalendar" width="34" height="21" border="0" alt=""></a>
It is the
third line, the onClick event handler that is of importance and which we shall
cover the Usage section just below.
The calendar component is controlled primarily through the show(..) method.
Users can make other adjustments in the simplecalendar.js routine directly
and particulary the timeout for how long a calendar stays displayed may be
useful. But controlling how the calendar displays is done as follows:
function show(event, target, bHasDropDown, dateFormat,
event - never changes this; it is the onClick
target - this is the name of the form element
to receive the date - form1.readonlyDate in the example below;
bHasDropDown - is a boolean, true = months
are in a dropdown while year is in a text field,
false = months and years are both controlled by
and down icons;
dateFormat - allows for six possible date display formats:
'yyyy-mm-dd' displays as 2004-06-23 and works in MySQL
'dd-mm-yyyy' displays as 23-06-2004
'dd-mmm-yyyy' displays as 23-Jun-2004
'mm/dd/yyyy' displays as 06/23/2004
'dd/mm/yyyy' displays as 23/06/2004
'dd/mmm/yyyy' displays as 23/Jun/2004
dateFrom - is an optional parameter and sets the start
date users can choose
- new Date(2003, 2, 15)
dateTo - is also an optional parameter and sets theend
users can choose
- new Date(2003, 11, 11)
In our last example we shall use a read-only input field, MySQL compatible
date format, pulldown months and allow for dates within a week of now.
This example demonstrates how to make sure dates input are in the proper
format and cannot be erroneously entered by the user. This
dramatically simplifies date validations.
The advantages of the Lea calendar component are the the ability
to customize exactly what days are available for access/input. In addition
have some control through the CSS style sheets on the format and layout
calendar.On the downside it is clumsy to setup the calls for the calendar
calendar is strictly for simple, standalone applications.