Jason’s Date 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:

* The script generates not only the popup calendar to easily select a date, but the corresponding form field as well, made up of select menus and text boxes.
* The script then creates a corresponding hidden field containing the actual chosen date for easy passing along with the rest of your form.
* Supports multiple calendar inputs in the same form/page.
* Allows date input either via the popup calendar, or by the user directly inputting the desired date (via select menu and text box).
* More supported date formates, including the popular mySQL YYYY-MM-DD New!
* Wider browser support, including the IE on the Mac. New!
* Works around IE’s bug of select-lists showing through layers.

In 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, Opera 7+. Nice!

Usage:
Step 1: Insert the below into the HEAD section of your page:

<script type="text/javascript" src="calendarDateInput.js">
</script>

The above references an external .js file. Download calendarDateInput.js (by right clicking, and selecting “Save As”), and upload to your webpage directory. It also uses 3 images, which you should download by right clicking, and selecting “Save As”:

Step 2: Once the above script is added, adding a popup Calendar field to your form is a one step process. Take a look at the below example:

<form>

<script>DateInput('orderdate', true, 'DD-MON-YYYY')</script>

<input type="button" onClick="alert(this.form.orderdate.value)" value="Show date value passed"/>

</form>

Demo: http://www.dynamicdrive.com/dynamicindex7/jasoncalendar.htm
Download: http://www.dynamicdrive.com/dynamicindex7/calendarDateInput.js
Source: http://www.dynamicdrive.com/dynamicindex7/jasoncalendar.htm

Related Listings:

1. jQuery Date Picker Script This is an clean, unobtrusive plugin for jQuery which allows...
2. Week Calendar using Jquery A jquery plugin providing a weekly view of calendar events....

Do you like this post?

Email: