Dynamic Drive DHTML Scripts- Jason's Date Input Calendar

Jason's Date Input Calendar

Description: 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.

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!

Other features of this script are:

Works around IE's bug of select-lists showing through layers.
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).

The script works in all modern browsers- IE5+, NS6/ Firefox, Opera 7+. Nice!

Demo:

Directions:

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

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>

The result is:

As you can see, simply by including function "DateInput()" in the desired place inside your form, the script will auto generate the appropriate HTML and corresponding popup calendar for it. It will also create a hidden field using your designated name (in this case, "orderdate") containing the selected date's value. Click on the form button to look inside this hidden field at any time.

Additional Information

Below describes function "DateInput()" in detail, which you need to understand to take full advantage of this script:

DateInput(DateName, Required*, DateFormat*, DefaultDate*)

All parameters with a * are optional, and if not passed in a value, the default value is used.

DateName	The name of the hidden form field that will contain the selected Date's value.
Required	"True or "false." Determines whether user is required to make a date selection. If set to false (default), an extra "blank" field appears at the top of the month select menu (above January), in which selecting it causes nothing to be passed to the form.
DateFormat	The format of the generated Date value. It can be one of the following: YYYYMMDD MM/DD/YYYY * DD/MM/YYYY * DD-MON-YYYY * MON-DD-YYYY * * Can specify a 2-digit year
DefaultDate	The default date displayed in the drop down menus. If none is specified, today's date is used.

With that in mind, here are a few examples:

<script>DateInput('birthdate')</script>

<script>DateInput('orderdate', true)</script>

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

<script>DateInput('todaydate', true, 'DD-MON-YYYY', '28-JUN-2003')</script>

-Customizable variables

Inside the .js file you downloaded, there are also a few variables at the top you can customize:

Default date format, if none is supplied in the call to the "DateInput" function
Number of seconds to wait before the calendar will disappear
The year at which to send 2-digit years to the 21st century
Calendar attributes
- Font size and style
- Background color
- Cell dimensions
- Top row background color
- Highlighted day background color
URL to calendar images.