Softricks.com: Javascript Popup Date Picker: Tutorial

Installation Instructions:

The download includes the following:
1. Main script file called Calendar1-x.js
2. (v1.9 onwards) a Stylesheet - Calendar.css - that lets you control the look-n-feel of your calendar.
3. HTML file - minCal1-x.html - which includes samples that use the script in various ways.

In your installation directory, you need the .js, .css file and your HTML file(s) that use the calendar.

How to set up the script in your HTML page?
Just add the following 2 lines in the HEAD section of your HTML:
<SCRIPT Language="Javascript" SRC="Calendar1-9.js"></SCRIPT>
<LINK REL="stylesheet" TYPE="text/css" HREF="Calendar.css">

If you are planning to use the Inline calendar, you will need the following lines somewhere in the body of your HTML:


<SCRIPT Language="Javascript" TYPE="text/javascript">
Calendar.CreateCalendarLayer(10, 275, "");
</SCRIPT>
This creates a calendar layer in which the calendar will be constructed.

How to invoke the calendar?

The Softricks Popup date picker script has the 'show_calendar' function which actually shows/pops-up the calendar.

Parameters to 'show_calendar' function:

Parameter #1: Fully qualified name of the item which gets the selected date back.
Parameter #2: null or the desired month. If null, current month is taken.
Parameter #3: null or the desired 4-digit year. If null, current year is assumed.
Parameter #4: null or the desired date format. If null, the date format 'MM/DD/YYYY' is assumed.
Parameter #5: null, 'POPUP' or 'INLINE'. If null, the calendar style assumed is 'POPUP'.
Parameter #6: v1.4 of the calendar script introduced a new parameter to the 'show_calendar' function. It is in the form of name/value pairs separated by a semicolon. Currently 18 such pairs are supported. More will be added as new features are included.

Parameter #6 Settings in detail: ("Name=Value;" type)
Default values highlighted below.

AppendOrReplace=[Append/Replace] option determines whether the date returned by the calendar is appended to the value of the destination item or replaces it. Valid values : ['Append' / 'Replace']

CloseOnSelect=[Yes/No] option determines whether the calendar window (browser window/layer) closes on selecting the date or stays open.

AppendChar=[character to append for multiple dates selection] determines the character which separates two date values that are returned in AppendOrReplace=Append mode. The default character which separates these values in the destination item is a semicolon ( ; ). Valid values : [Any character, For example ';' or ':']

ReturnData=[Date/DOW] indicates whether the calendar should return 'Date' - which is the default - or 'DOW' i.e Day-Of-Week.

InlineX=[x coord for inline calendar] specifies the X-position for the Inline calendar. Default is set when you call the Calendar_CreateCalendarLayer function to create the inline calendar layer.

InlineY=[y coord for inline calendar] specifies the Y-position for the Inline calendar. Default is set when you call the Calendar_CreateCalendarLayer function to create the inline calendar layer.

Title=[Title string] specifies the title text to be used for the Calendar window/layer. Default: Calendar.

CurrentDate=[Date/Today±x/<Form element>] specifies the starting date for the Calendar (this date will be highlighted and the Calendar will start from this month/year.

Effective v1.7, this can also take the form 'Today[±x]' where x is number of days.
Effective v1.9 this can also be a form item specified as CurrentDate=<myform.myelement>. The "<" and ">" characters are required. The calendar will try to start with the date that is in the specified form item.

Height ' / ' Width ' determine the height/width of the calendar respectively.

Resizable=[Yes/No] determines whether the calendar window (for POPUP calendar) will be made resizable or not.

NSHierarchy=[layer hierarchy] is required for Netscape if the calling form is inside an outer LAYER. You will set the layer hierarchy in this parameter.

SelectAfter=[Date] specifies the date AFTER which the selection of date will be enabled in the Calendar. For example, setting this to 02/16/2001 will mean that the users will only be able to select dates after 16th Feb 2001. Effective v1.7, this can also take the form 'Today[±x]' where x is number of days.

SelectBefore=[Date] specifies the date BEFORE which the selection of dates will be enabled in the Calendar. For example, setting this to 02/16/2001 will mean that the users will only be able to select dates before 16th Feb 2001. Effective v1.7, this can also take the form 'Today[±x]' where x is number of days.

CallFunction=[JS function name] specifies the function to be called after the user selects a date from the calendar. Just set this parameter to the name of the function.

PopupX=[x position] lets you set the X-position for the popup calendar window to position it wherever you want.

PopupY=[y position] lets you set the Y-position for the popup calendar window to position it wherever you want.

Nav=[Yes/No] lets you show/hide the standard navigation bar with next/prev month/year links.

SmartNav=[Yes/No] lets you show/hide the smart navigation bar with drop down for month selection and a text box for entering a year.

Fix=[Yes/No] lets you pin down an INLINE calendar to a fixed position on the page and thus effectively disable the dragging feature.

WeekStart=[0 -6] lets you specify the starting day for your calendar. The calendar week can even start from Wednesday if you wish...

Weekends={[0-9]+} lets you specify the weekend days. 0 for Sun, 1 for Mon and so on.. Setting this to '06' will mean that Sun and Sat are the weekends.

AllowWeekends=[Yes/No] determines whether weekend date selection should be allowed or not.

ShortNames=[Yes/No] indicates whether to use 1 letter short names for days (ex. M for Monday, T for Tuesday and so on) in the header.

ShowFix=[Yes/No] allows hiding/showing of the Fix checkbox.

Holidays=[MMDD1,MMDD2,..] allows you to specify specific dates as holidays. These will get highlighted in a different color. You can treat them like Weekends too using the 'AllowHolidays' parameter. Example, Holidays=0101,0704,1225 will set Jan 1st, July 4th, Dec 25th as holidays.

AllowHolidays=[Yes/No] determines whether holidays can be selected or not.

Language=[E/O] tells the calendar whether it should use the internally defined English text for Month and Day names or it should use externally defined language strings. 'E' stands for English and 'O' for Other.

In your HTML file, create a script block if you do not have one already and add the following lines there: Here we define 3 sets of names in your language. The full month name, the short month name and the weekdays.

// Month names in YOUR Language (French for example..)
Calendar.Months = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"];
// Short Month names in YOUR Language
Calendar.SMonths = ["Jan", "Fév", "Mar", "Avr", "Mai", "Jui", "Juill", "Aoû", "Sep", "Oct", "Nov", "Déc"];
// Weekdays in YOUR Language (French/Spanish..)
Calendar.DOW = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"];

If you specify Language=O, the calendar will use these sets instead of the default English strings.

Stylesheet={Calendar.css/[some-path]/[filename].css} tells the calendar to use the stylesheet at this location. Now you can place the stylesheet wherever you want even at some other web location and name it whatever you want (as long as the class names defined in it are not changed). Examples of this setting are : Stylesheet=../Calendar.css; or Stylesheet=http://www.softricks.com/products/calendar/Calendar.css; and so on..

CSS Support: (effective v1.9)

Effective v1.9, the script supports stylesheets. One needs to create a Calendar.css file with predefined style classes. A sample is provided with your download.

Effective v1.902, this stylesheet can be placed anywhere. See the documentation for 'Stylesheet' setting above.

The predefined classes and their use is explained below:

/* Calendar title */
.titleStyle

/* Month Year and Fix */
.headerStyle

/* Together these 2 define the color theme for the window */
.borderColor
.innerColor

/* Smart Nav Styles */
.monthEntryStyle
.yearEntryStyle
.yearArrowStyle

/* Nav Style */
.navStyle

.weekdayHeaderStyle

/* Calendar Data Styles */
.todayStyle

.normalStyle
.dimStyle
.linkStyle

/* Style for weekends */
.weekendStyle
.dimWeekendStyle

/* Style for holidays */
.holidayStyle
.holidayLinkStyle

Examples:

The simplest way to use the calendar is to call it as show_calendar("form.txt_item");

This will display the calendar for the current month with 'MM/DD/YYYY' as the default date format and the calendar will pop-up in a separate window. A date will be returned to the return item. The value of return item will always get replaced with the selected date and the calendar window will close on selecting a date.

Complex Scenarios:
Let us say, you have a HTML form called ' MForm ' on your page.
You also have a text item in it named as ' txtDate '.
And finally you have an image or an anchor or a button which will show the calendar when clicked.
Now when you click on the button and select a date from the popup calendar, that date will be returned in the text item 'txtDate' in the date format which you had specified.

1. To display a simple Monthly calendar, You can use the following HTML code (you may add other items which you need in the form) -

<FORM NAME="MForm">
<INPUT TYPE="TEXT" VALUE="" NAME="txtDate">
<INPUT TYPE="BUTTON" VALUE="Calendar"
onClick= "show_calendar('MForm.txtDate', [Month from 0 (Jan) to 11 (Dec)], [4-digit Year], [Format like 'MM/DD/YYYY']);">
</FORM>

Replace [Month from 0 (Jan) to 11 (Dec)], [4-digit Year] with month value and [4-digit Year] with the year and [Format like 'MM/DD/YYYY'] with the desired date format.

2. To display the Yearly calendar, You can use the following HTML code (you may add other items which you need in the form) -

<FORM NAME="MForm">
<INPUT TYPE=TEXT VALUE="" NAME="txtDate">
<input type="button" value="Calendar"
onClick= "show_yearly_calendar('MForm.txtDate', [4-digit Year], [Format like 'MM/DD/YYYY']);">
</FORM>
You can select a date from here too!

3. To get INLINE monthly calendar, You need to provide a CSS Layer in your HTML document. But don't worry. The Popup date picker script provides a function to create this layer in your HTML document. Just use the following in your HTML page -


<SCRIPT Language="Javascript" TYPE="text/javascript">
Calendar_CreateCalendarLayer([x-coord], [y-coord], "");
</SCRIPT>

You may have to play with the x-coord and y-coord in order to position the inline calendar on your HTML page.

After this is done, you can use the following HTML code (you may add other items which you need in the form) -

<FORM NAME="MForm">
<INPUT TYPE=TEXT VALUE="" NAME="txtDate">
<input type="button" value="Calendar"
onClick= "show_calendar('MForm.txtDate', [Month from 0 (Jan) to 11 (Dec)], [4-digit Year], [Format like 'MM/DD/YYYY'], 'INLINE');">
</FORM>

4. To get Multiple dates from the calendar, You can use the following HTML code (you may add other items which you need in the form) -

<FORM NAME="MForm">
<INPUT TYPE=TEXT VALUE="" NAME="txtDate">
<input type="button" value="Calendar"
onClick= "show_calendar('MForm.txtDate', [Month from 0 (Jan) to 11 (Dec)], [4-digit Year], [Format like 'MM/DD/YYYY'], [null or 'POPUP' or 'INLINE'], ['AppendOrReplace=Append;CloseOnSelect=No;AppendChar=\";\"']);">
</FORM>

Here we are going to keep the calendar open by setting CloseOnSelect to 'No' and we are going to append each date returned by setting AppendOrReplace to 'Append' and the character used to separate the dates returned is specified by setting the AppendChar to \";\".

5. To get Day of the week from the calendar, You can use the following HTML code (you may add other items which you need in the form) -

<FORM NAME="MForm">
<INPUT TYPE=TEXT VALUE="" NAME="txtDate">
<input type="button" value="Calendar"
onClick= "show_calendar('MForm.txtDate', [Month from 0 (Jan) to 11 (Dec)], [4-digit Year], [Format like 'MM/DD/YYYY'], [null or 'POPUP' or 'INLINE'], 'ReturnData=DOW');">
</FORM>

Here we have set ReturnData to 'DOW' and therefore when you click on the button and select a date from the popup calendar, that DAY OF WEEK will be returned by the Calendar.

6. To prevent a user from selecting a weekend date, You can use the following HTML code (you may add other items which you need in the form) -

<FORM NAME="MForm">
<INPUT TYPE=TEXT VALUE="" NAME="txtDate">
<input type="button" value="Calendar"
onClick= "show_calendar('MForm.txtDate', [Month from 0 (Jan) to 11 (Dec)], [4-digit Year], [Format like 'MM/DD/YYYY'], [null or 'POPUP' or 'INLINE'], 'AllowWeekends=No');">
</FORM>

Here we have set AllowWeekends to 'No'. This removes the links for weekend dates on the Calendar, so that the user can not click and select them.

7. To split the date returned into individual components. Create a function in your HTML page in the HEAD tag - (You can use your own name but make sure to pass that to 'show_calendar' function)

<SCRIPT Language="Javascript">
function SplitDate() {
var sd = document.MForm.mydate3.value.split("\/");
document.MForm.imonth.value = sd[0];
document.MForm.iday.value = sd[1];
document.MForm.iyear.value = sd[2];
}
</SCRIPT>

You can use the following HTML code (you may add other items which you need in the form) -

<FORM NAME="MForm">
<input type="hidden" name="mydate3" value="">
<input type="text" name="imonth" value="Month">
<input type="text" name="iday" value="Day">
<input type="text" name="iyear" value="Year">
<input type="button" value="Popup Calendar" name="calbutton"
onClick=
"show_calendar('MForm.mydate3', 4, 2001, 'MM/DD/YYYY', null, 'CallFunction=SplitDate')">
</form>

Here we pass the name of the function 'SplitDate' to show_calendar. This function will get executed after the user selects a date from the calendar window. This date is returned to the hidden text item 'mydate3' and the function 'SplitDate' splits it into 3 components which get assigned to the corresponding text items for month, day and year. Make sure you know which date format you are using and split the date accordingly.

8. To give a dynamic selection window centered on Today, Use the new support for 'Today' and 'Today±x' for input dates. Up until this version, you could only give static date values to 'CurrentDate', 'SelectAfter' and 'SelectBefore' settings.
You can use the following HTML code (you may add other items which you need in the form) -

<FORM NAME="MForm">
<INPUT TYPE=TEXT VALUE="" NAME="txtDate">
<input type="button" value="Calendar"
onClick= "show_calendar('MForm.txtDate', [Month from 0 (Jan) to 11 (Dec)], [4-digit Year], [Format like 'MM/DD/YYYY'], [null or 'POPUP' or 'INLINE'], 'CurrentDate=Today;SelectAfter=Today-15;SelectBefore=Today+15;');">
</FORM>

Here we have set CurrentDate to 'Today'. This will be the Today's date everyday. Specifying 'SelectAfter' as 'Today-15' and 'SelectBefore' as 'Today+15' will restrict the users to select dates in the range of 15 days before and after Today.

9. How to PIN down an INLINE calendar and/or disable dragging? Use the new setting 'Fix' in the 6th parameter of 'show_calendar' function. Setting it to 'Yes' will disable dragging. This can be set even while the calendar is open! So the users can just click on the checkbox to fix the calendar position once they have moved it to wherever they want on the page.
You can use the following HTML code (you may add other items which you need in the form) -

<FORM NAME="MForm">
<INPUT TYPE=TEXT VALUE="" NAME="txtDate">
<input type="button" value="Calendar"
onClick= "show_calendar('MForm.txtDate', [Month from 0 (Jan) to 11 (Dec)], [4-digit Year], [Format like 'MM/DD/YYYY'], 'POPUP', 'Fix=Yes');">
</FORM>

Here we have set 'Fix' to 'Yes'. This will disable the dragging BUT NOT PERMANENTLY. Users can always uncheck the box and make it movable.

10. How to Show/Hide Navigation bars? Use the new settings 'Nav' and 'SmartNav' in the 6th parameter of 'show_calendar' function for Standard and Smart navigation bars. Setting these to 'Yes' will show them while setting them to 'No' will hide them.
You can use the following HTML code (you may add other items which you need in the form) -

<FORM NAME="MForm">
<INPUT TYPE=TEXT VALUE="" NAME="txtDate">
<input type="button" value="Calendar"
onClick= "show_calendar('MForm.txtDate', [Month from 0 (Jan) to 11 (Dec)], [4-digit Year], [Format like 'MM/DD/YYYY'], 'POPUP', 'Nav=Yes;SmartNav=No');">
</FORM>

This code will display the standard navigation bar that has been in the script right from the beginning and hide the new smart navigation bar that lets you jump to any month/year without going month-by-month or year-by-year.