JavaScript & Calendar Components II
 


Displaying Dates: Smart Calendar Components
Credit: Soft Complex,

Description
Putting in time and date calendar control greatly simplifies date entry on forms. ..We examine a second componentthat does not have so many restrictions associated with working with other scripts. As well, the Tigra calendar control offers, a time stamp and some flexible year and month scrolling options.

Key features and JavaScript elements
Uses CSS and pop-up windows to build up calendar . The calendar components automatically fill in their associated form fields and the scrolling options are icon triggered. Tigra has a couple of options for scrolling either/or years and months.

Calendar Setup: To use the calendar component you will need 2 subdirectories ( images and javascript ) on your site where you will put the following files:

web page foler gets calendar.html
images folder gets tigracal.gif (I had to rename cal.gif due to name clash), next.gif, next_year.gif,
  prev.gif, prev_year.gif
javascript gets calendar2.js

Next place the following line in the <head> block of your html file:

  

  <script language="JavaScript" src="javascript/calendar2.js"

Next mke sure the form and input fields you want a calendar popup for have unique names. Then next to each input field requiring a calendar popup, add the following code:
<a href="javascript:cal5.popup();"><img src=images/tigracal.gif width="16" height="16" border="0" alt="Click Here to Pick up the date"></a>
Note that the icon is surrounded with an <a> tag which has a Javascript call on a routine which you will define as the last step in creating this popup calendar. To define the specific pop call with the exact parameetrs desired, go to the the end </form> tag and insert the following code:
<script language="JavaScript">
var cal5 = new calendar2(document.forms['tstest'].elements['input5']);
cal5.year_scroll = true; // year scrolling is enabled here
cal5.time_comp = false; //time display is disable
<script>
Now this Javascript must come right after the </form> closing tag. We tried moving it elsewhere and immediately broke the application. So without further to do, try the popup calendar.

Try outs the script with this demo form
  American Date Format (mm/dd/yyyy)
     Select Date (w. year scrl.):
Click Here to Pick up the date
Select Date (w/o year scrl.):
Click Here to Pick up the date
Select Timestamp (w. year scrl.):
Click Here to Pick up the date
Select Timestamp (w/o year scrl.):
Click Here to Pick up the date
      
Now the Tigra popup calendar has less restrictions than the Lea Smart calendar when working with other scripts but has less date formatting options and no way to control/offer only a restricted set of eligible dates for selection which the Smart popcalendar can do. But for $29US, a pro version of the Tigra calendar is available and it addresses many of these problems.
Top of Page  Tutorials Home  Javascript References  JavaScript Books