Update: Now you can restrict users to select future date so now user can select date only with in range specified by you. Please review the Advance Customization section for further details.
This Calendar control is so self explanatory as you can see in the picture below. Selected Year & Month are always visible and clear color differences in different portions of the calendar to make it more eye catching and user friendly. Tooltips are also given to improve its usability.
One of the most useful feature of this calendar controls is that you can instantiate multiple instances at a time and every instance is completely independent from another instances.
That's all, after putting just only 4 lines of code and a very decent Calendar control is active on your webpage.
Now let's take a closer look on the code we used so far.
First line of the <HEAD> section is calling an external Style Sheet file named "calendar.css". This CSS file manages the Look & Feel of the Calendar control.
Similarly the second line of the <HEAD> section is responsible to call an external JavaScript file named "calendar.js". This file is responsible for creating Calendar control.
First line of the <BODY> section is a text box with a unique ID which catches the Date value selected on Calendar control by user.
Finally the second line and most tricky part of the <BODY> section so far is an image object which initiates the Calendar control. This image object holds a function named "fnInitCalendar()" which takes two parameters. First parameter is "this" keyword which representing the current image object and the second and most important parameter is the ID of the text box which catches the Date value. We used 'idCalendar' in our example.
Different Databases accepts different formats of Date value. If you want to change the date format according to your requirements then this section belongs to you. With the function below you can customize date format as per your requirements. You can find all useful variables in this function, now you have to concatenate your required date format and pass this string to the sDateString variable.
<script language="javascript">
//***** Function formating the Date for inputbox *****
function fnSetDateFormat(oDateFormat)
{
oDateFormat['FullYear']; //Example = 2007
oDateFormat['Year']; //Example = 07
oDateFormat['FullMonthName']; //Example = January
oDateFormat['MonthName']; //Example = Jan
oDateFormat['Month']; //Example = 01
oDateFormat['Date']; //Example = 01
oDateFormat['FullDay']; //Example = Sunday
oDateFormat['Day']; //Example = Sun
oDateFormat['Hours']; //Example = 01
oDateFormat['Minutes']; //Example = 01
oDateFormat['Seconds']; //Example = 01
var sDateString;
//Example = 01/01/00 dd/mm/yy
//sDateString = oDateFormat['Date']+"/"+oDateFormat['Month']+"/"+oDateFormat['Year'];
//Example = 01/01/0000 dd/mm/yyyy
//sDateString = oDateFormat['Date']+"/"+oDateFormat['Month']+"/"+oDateFormat['FullYear'];
//Example = Jan-01-0000 Mmm/dd/yyyy
sDateString = oDateFormat['MonthName']+"-"+oDateFormat['Date']+"-"+oDateFormat['FullYear'];
return sDateString;
}
</script>
There are number of other customizations from which you can make this calendar control to match your exact requirements. This is where the third and optional parameter of fnInitCalendar function comes in action. Below is the list of all name value pairs of third parameter.
Name
Default Value
Valid Value
Example
year
Current year
Any 4 digits number
year=2007
If you want to start your calendar control from specific year then you can define the third parameter of fnInitCalendar function like this fnInitCalendar(this, 'idCalendar', 'year=2007').
(see Demo section for running example)
Name
Default Value
Valid Value
Example
month
Current month
1 to 12
month=12 (for Dec)
Lets suppose you want to start your calendar control from the month of December of current year then you can define the third parameter of fnInitCalendar function like this fnInitCalendar(this, 'idCalendar', 'month=12'). Please note that only 1 to 12 digits are valid values. Where 1 represents January, 2 represents February and so on.
(see Demo section for running example)
Name
Default Value
Valid Value
Example
drag
true
true or false
drag=false
Currently this calendar control is drag able by default and in any case you don't want its dragging functionality then you can define the third parameter of fnInitCalendar function like this fnInitCalendar(this, 'idCalendar', 'drag=false').
(see Demo section for running example)
Name
Default Value
Valid Value
Example
top
5
any number
top=10
This represents the vertical space between your mouse cursor and calendar control when you click on calendar image. You can assign positive or negative numbers to increase or decrease vertical space between cursor and your calendar control by specify the third parameter of fnInitCalendar function like this fnInitCalendar(this, 'idCalendar', 'top=10').
(see Demo section for running example)
Name
Default Value
Valid Value
Example
left
5
any number
left=10
Similarly this represents the horizontal space between your mouse cursor and calendar control when you click on calendar image. You can assign positive or negative numbers to increase or decrease horizontal space between cursor and your calendar control by specify the third parameter of fnInitCalendar function like this fnInitCalendar(this, 'idCalendar', 'left=10').
(see Demo section for running example)
Name
Default Value
Valid Value
Example
close
false
true or false
close=true
If you want to close this calendar control automatically after selecting date then just specify the third parameter of fnInitCalendar function like this fnInitCalendar(this, 'idCalendar', 'close=true').
(see Demo section for running example)
Name
Default Value
Valid Value
Example
instance
-
single
instance=single
If your requirements says that only one calendar control shows at a time then just specify the third parameter of fnInitCalendar function like this fnInitCalendar(this, 'idCalendar', 'instance=single'). It will close all other calendar instances before launch itself otherwise simply omit this parameter to turn on multiple instances functionality.
(see Demo section for running example)
Name
Default Value
Valid Value
Example
dropdown
-
hide
dropdown=hide
if you are using Internet Explorer and your calendar control hides below any Dropdown/Select box then specify the third parameter of fnInitCalendar function like this fnInitCalendar(this, 'idCalendar', 'dropdown=hide'). It will hide all dropdowns temporarily and shows back after selecting date.
Name
Default Value
Valid Value
Example
style
-
any css file name
style=calendar_blue.css
If you want to use your own style sheet (.css file) to change the look and feel of caldenar control then specify the third parameter of fnInitCalendar function like this fnInitCalendar(this, 'idCalendar', 'style=calendar_blue.css'). It will apply your css file to calendar control.
(see Demo section for running example)
Name
Default Value
Valid Value
Example
expiry
false
true or false
expiry=true
If you want to use this caldenar control for expiry dates then just specify the third parameter of fnInitCalendar function like this fnInitCalendar(this, 'idCalendar', 'expiry=true'). It will disabled all the previous dates from calendar control.
(see Demo section for running example)
Name
Default Value
Valid Value
Example
elapse
0
any whole number
elapse=5
Elapse indicates that how much days elapse you want to set for expiry date. This works in conjunction with expiry date feature and very usefull if you to set expiry date from perticular date. Lets say you want to set expiry date 2 days from today then you simple set the third parameter of fnInitCalendar function like this fnInitCalendar(this, 'idCalendar', 'expiry=true,elapse=2'). It will allow to select users to date 2 days from today's date. You can set negative values as well.
(see Demo section for running example)
Name
Default Value
Valid Value
Example
restrict
false
true or false
restrict=true
If you want to use this caldenar control for restrict users to select future dates then just specify the third parameter of fnInitCalendar function like this fnInitCalendar(this, 'idCalendar', 'restrict=true'). It will disabled all the future dates from calendar control.
(see Demo section for running example)
Name
Default Value
Valid Value
Example
limit
0
any whole number
limit=7
Limit indicates that how much days limit you want to restrict users for selecting future date. This works in conjunction with restrict date feature and very usefull if you to set future date from perticular date. Lets say you want to set expiry date 7 days from today then you simple set the third parameter of fnInitCalendar function like this fnInitCalendar(this, 'idCalendar', 'restrict=true,limit=7'). It will allow to select users to date 2 days from today's date. You can set negative values as well.
(see Demo section for running example)
Note that you can also use multiple name value pairs as third parameter of fnInitCalendar function by saparating them with comma like this fnInitCalendar(this, 'idCalendar', 'year=2007,month=12').
Internet Explorer(6, 7 & 8)
Mozilla Firefox
Google Chrome
Opera
Apple Safari
Netscape Navigator
fnInitCalendar(this, 'txtCalendarFirst', 'close=true')
