 |
 |
Displaying Dates: Smart Calendar Components
Credit: Lea Smart,
Description
Putting in time and date calendar control greatly simplifies date entry
on forms..We examone 3 components for their ease of use and effectiveness.
Key features and JavaScript elements
Uses CSS and pop-up windows to build up calendar along with setTimeout()
JavaScript routine. The components are tied into form fields as popups
that fill in values automatically.
Lea Calendar Setup: To
use the calendar component you will need 3 subdirectories ( images,
javascript, styles) on your site where you will put the following files:
images <= calendar.gif, up.gif, down.gif; javascript <= simplecalendar.js;
styles <= calendar.css.
Next place the following two lines in the <head> block
of your html file:
<script language="JavaScript" src="javascript/simplecalendar.js" type="text/javascript"></script>
Finally add the following code to display a calendar:
<a href="javascript: void(0);"
onmouseover="if (timeoutId) clearTimeout(timeoutId);window.status='Show
Calendar';return true;"
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.
Usage
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,
dateFrom, dateTo)
event - never changes this; it is the onClick
object eventpointer;
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
up
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
from
the default is 01/01/1900 and must be specified in Javascript form
- new Date(2003, 2, 15)
dateTo - is also an optional parameter and sets theend
date
users can choose
from
the default is 01/01/3000 and must be specified in Javascript form
- 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 developers have some control through the CSS style sheets on the format and layout of the calendar.On the downside it is clumsy to setup the calls for the calendar - there are some tricky JavaScripting clashes if youuse other scripts. This calendar is strictly for simple, standalone applications.
Top of Page Tutorials Home JavaScript References JavaScript Books