JavaScript & Calendar Components

Displaying Dates: Smart Calendar Component
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.

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:

  <link rel="STYLESHEET" type="text/css" href="styles/calendar.css">
  <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=",'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, 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