Jason's Date Input Calendar (JavaScript)

demo · 发表于 2013-7-3 12:36:18

本帖最后由 demo 于 2013-7-4 06:33 编辑

Note: Updated Sept 20th, 05' for various improvements.

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.
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!

Demo:

[url=]

[/url]

Directions:

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

<script type="text/javascript" src="calendarDateInput.js">
/***********************************************
* Jason's Date Input Calendar- By Jason Moon http://calendar.moonscript.com/dateinput.cfm
* Script featured on and available at http://www.dynamicdrive.com
* Keep this notice intact for use.
***********************************************/
</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>

复制代码

The result is:

[url=]

[/url]

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.

Author: Jason Moon

demo · 发表于 2013-7-3 12:36:45

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	STRING - required. Name of the hidden form element to store the selected, formatted date You do NOT need to create this field manually in your form.
Required	BOOLEAN - optional. Default = FALSE (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	STRING- optional. Default is set as a global variable in the script (MM/DD/YYYY on this page). The format of the generated Date value. It can be one of the following: YYYYMMDD YYYY-MM-DD * YYYY-DD-MM * YYYY/MM/DD * YYYY/DD/MM * YYYY-DD-MON * ** YYYY-MON-DD * ** MM-DD-YYYY * DD-MM-YYYY * MM/DD/YYYY * DD/MM/YYYY * DD-MON-YYYY * ** MON-DD-YYYY * ** * 2-digit year can be used instead of 4-digit year ** 3-character month name abbreviation can also be specified as MMM.
DefaultDate	STRING- optional. 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:

[url=]

[/url]

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

[url=]

[/url]

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

[url=]

[/url]

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

[url=]

[/url]

Code: <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
Text to display in the 1st month list item when the date isn't required.
Calendar attributes
- Font size and style
- Background color
- Cell dimensions
- Top row background color
- Highlighted day background color
URL to calendar images.

账号		自动登录	找回密码
密码			注册

Jason's Date Input Calendar (JavaScript)

本帖子中包含更多资源