PopUp Calendar readme file

Site hosted by Angelfire.com: Build your free website today!

PopUp Calendar has been designed as a part of our data software (DataShell Software). It provides a user friendly and flexible way to choose dates and insert them in form fields. You need only one instance of PopUp Calendar on your page to attach it to an unlimited amount of form fields.
As this calendar has been made first as an interactive date selector for online orders, it differs of decorative calendars: it displays only 13 months starting the current one and including the same month of the next year. This range is enough for dates of orders/enrollments (unless you collect orders for 2 years in advance or from the past :-)
To see if it can be of any use for you please check any form field below. Have a nice one!

Place the script file pupdate.js in a directory on you server.
Open the page where you want to use the PopUp Calendar and insert the following instruction in the header section of the page (before the closing </head> tag):
<script language="JavaScript" src="[path_to_file/]pupdate.js"></script>
(If the page and the script file are located in the the same directory, your instruction should simply be: <script language="JavaScript" src="pupdate.js"></script>)
Open the file pupdate.txt, select all text inside, copy it and past at the bottom of your page (before the closing </body> tag).
Now you have to attach the calendar to form elements on your page.
The syntax to run the calendar is: on[Event]="getCalendarFor(target[,pattern])"
target is the target form field where the chosen date has to be inserted
pattern is an optional date pattern there you can limit user's choice by dates and days of week. (To know more about the pattern syntax please see the topic "Date Pattern").
Here there are several code samples (form name is sample):

1. Button
<input type="button" value="Choose one..." onClick="getCalendarFor(document.sample.choice2)">
Starting date:

2. Text field
Option 1: User can insert date manually or via the popup calendar:
<input type="text" name="choice1_1" onFocus="getCalendarFor(this)">
Starting date:

Option 2: Users can insert date only via the popup calendar:
<input type="text" name="choice1_2" onFocus="getCalendarFor(this); this.blur()">
Starting date:
Because of some defaults in Netscape's event model the location where the calendar appears may differ of the click coordinates.

3. Link
<a href="javascript://" onClick="getCalendarFor(document.sample.choice3)">Choose one...</a>
Starting date: Choose one...
Please note a special link syntax used to compensate some defaults in Explorer's & Netscape's behavior.

4. Image
<img src="arrow.gif" onMouseUp="getCalendarFor(document.sample.choice4)">
Starting date:

Date Pattern
You can limit user's choice. For this you have to use the 2nd argument in getCalendarFor() function.
This argument is a text string and it has the following format:
mode:range:key

mode
[]	limit choice by the following range
[^]	lock the following range (user cannot choose these dates)
range
a number with key d[ate]	this particular day of the month
a number with other keys	this day of the week in the standard JavaScript numeration: 0 - Sunday ... 6 - Saturday
key (you can use the whole words or first letters)
d[ate]	Pattern applies for a day of the month
o[dd]	Pattern applies for 1st and 3rd days of the week
e[ven]	Pattern applies for 2nd and 4th days of the week
a[ll]	Pattern applies for all days of the week

Date Format
By default the date format is m/d/Y (like 08/23/2000)
You can choose any desired format by editing ppcDF variable in the script. Open pupdate.js and find this variable in the Settings section. The keys are:

m	Month number (01 - January, etc.)
M	Month name
d	Date
y	Last two digits of the year
Y	All four digits of the year
W	Name of the day of the week (Monday, etc.)
Besides these keys you can use any dividers and additional text that will be inserted "as it is". Important: you cannot directly use letters reserved for keys (m,M,d,y,Y,W) as they will be parsed to date components. Instead you have to use the corresponding escape sequences:
d	%64
m	%6D
M	%4D
W	%57
y	%79
Y	%59
Thus instead of "Month M" you have to type "%4Donth M"

Examples:
m/d/y = 10/02/00
M d, Y = October 2, 2000
W M d, Y = Monday October 2, 2000

Localization
Default language is English. To use any other language open pupdate.js and edit text variables in the Settings section.

Netscape Navigator specific issues
PopUp Calendar is as compatible as it possible with both main browsers. Nevertheless we could not completely eliminate the two main defaults in Netscape DHTML models:
1) "Incontinence of layers". On resize the content of layers falls out at the bottom of the page. The reload method cannot be used here as it resets the form. So we have used a tricky method that works most of the time but fails if the reviewing page is the first during the current session.
[Note] Netscape 6 (at least pre-releases) seems to be stronger.
2) "Super Z of form element". All form elements (fields, buttons, etc.) in Netscape are placed in some kind of "super layer" and cannot be overlapped but other layers, no matter what z-index do they have. It may produce problems on a page with a lot of form elements: the calendar may be covered by them and not easy to use.
If it's your case the only solution is to use ppcUC variable. Open pupdate.js and find this variable in the Settings section. The default value is false. If set it to true, the calendar will appear on the same place, indicated by variables ppcUX (x of the left corner) and ppcUY (y of the left corner). Select coordinates of a free place on your page and use them. Another solution is not care of Netscape's users...
[Note] This default is the same in Netscape 6 (at least pre-releases).

Contact us
We do not provide any kind of official support for PopUp Calendar as a separate product. We do not hold any responsibility that may arise of its use.
Nevertheless you can contact Sev Kotchnev with your opinions and suggestions at: webmaster@personal-connections.com

< >