D
ate Input Calendar is designed specifically to make entering date values into forms as easy as can be! It's different from most other similar scripts in the following two ways:
I
n other words, this script takes the hassle out of not only selecting a date inside forms, but creating the appropriate HTML and packaging that value for easy passing as well! The script works in all modern browsers- IE5+, NS6/, Firefox and Opera 7+. W
e have tested the code in IE6.0, Firefox1.5.0.1, Opera8.52, Netscape7.02, Netscape8.0.4 and AOL Explorer1.2. This script worked well in all platforms with no variations observed.
Note of Importance ~ Before we begin, we feel obligated to advise you that this is a stand alone* function and needs to be incorporated within a form. This is not for anyone who is not proficient with HTML, javascript and forms. You need to have a working knowledge in this field in order to incorporate this into a form.
* What this means is that by being a "Stand Alone" function it has no purpose or function other that what it does by itself. It needs to be incorporated into a working form in order to have an actual function.
D epending on your knowledge of HTML and javascripts, this is an easy four part copy and paste code that goes in both the <HEAD> and <BODY> sections of your document. This effect makes use of an external .js script (calendarDateInput.js) that you need to upload into your directory. The last part is to upload three(3) images into your web page directory. We will take this "Stand Alone" script and break in down into steps to make it easier to follow.
Step One is to insert part of the code (which will call the external .js script) into the <HEAD> section of your document.
Step Two
is to download to somewhere convenient (like your desktop) on your computer the external script "calendarDateInput.js". Once to have it on your pc it should look something like the below:
Step Three
is to download three images then upload them into your directory. Depending on where you keep your images, you need to make a reconfiguration within the external .js file to reflect where your images reside. If you do not know howto open the external .js file to reconfigure, it is quite simple. Just right click on the icon and when a menu appears, select "Open With". Then Select "Choose Program". Now another box will appear that you need to "hightlight and select" what program to open the external .js file with. The easiest to open these type of files is "Notepad". Once you made your choice and selected it, the external script will open for you do make your reconfigurations. If this is slightly confusing, grab the below link to see a little slideshow to clarify what we are explaining;
[ Slideshow on Howto Open .js File ]
Default With Images In Top directory
/***********************************************
Fool-Proof Date Input Script with DHTML Calendar
by Jason Moon - calendar@moonscript.com
************************************************/
// Customizable variables
var DefaultDateFormat = 'MM/DD/YYYY'; // If no date format is supplied, this will be used instead
var HideWait = 3; // Number of seconds before the calendar will disappear
var Y2kPivotPoint = 76; // 2-digit years before this point will be created in the 21st century
var UnselectedMonthText = ''; // Text to display in the 1st month list item when the date isn't required
var FontSize = 11; // In pixels
var FontFamily = 'Tahoma';
var CellWidth = 18;
var CellHeight = 16;
var ImageURL = 'calendar.jpg';
var NextURL = 'next.gif';
var PrevURL = 'prev.gif';
var CalBGColor = 'white';
var TopRowBGColor = 'buttonface';
var DayBGColor = 'lightgrey';
Reconfigured With Images In /Images Directory
/***********************************************
Fool-Proof Date Input Script with DHTML Calendar
by Jason Moon - calendar@moonscript.com
************************************************/
// Customizable variables
var DefaultDateFormat = 'MM/DD/YYYY'; // If no date format is supplied, this will be used instead
var HideWait = 3; // Number of seconds before the calendar will disappear
var Y2kPivotPoint = 76; // 2-digit years before this point will be created in the 21st century
var UnselectedMonthText = ''; // Text to display in the 1st month list item when the date isn't required
var FontSize = 11; // In pixels
var FontFamily = 'Tahoma';
var CellWidth = 18;
var CellHeight = 16;
var ImageURL = 'images/calendar.jpg';
var NextURL = 'images/next.gif';
var PrevURL = 'images/prev.gif';
var CalBGColor = 'white';
var TopRowBGColor = 'buttonface';
var DayBGColor = 'lightgrey';
A ll of the above variables can be reconfigured to fit your form. Just play around with them until it works for you. You can leave everything as is except if your images are not in your top directory, then you do need to make that change to reflect what directory to call them images.
Step Four Once you have all the reconfigurations done, you can now upload the external .js script into your directory*.
* If you are going to upload the calendarDateInput.js into a different directory than where this effect will be, then you need to reconfigure the below part of the code to reflect where this external script needs to be called. For example, if you upload this .js script into a directory called "my_js_scripts", then the below code would have to reflect this change.Default
<script src="calendarDateInput.js" language="javascript" type="text/javascript"></script>
Reconfigured
<script src="my_js_scripts/calendarDateInput.js" language="javascript" type="text/javascript"></script>
Step Five Once all your reconfigurations have been done, your .js file has been uploaded etc., now you can upload your three (3) images into your directory.
Step Six Is to paste the <BODY> section of code into a functional form.
W
e hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ]. The site you get the code also has an excellent tutorial on this effect with much more technical data than we have covered.
[ Get Code Here ]
[ Rate This Page ]