现在的位置: 首页 > 综合 > 正文

DateTimePicker

2012年04月21日 ⁄ 综合 ⁄ 共 2296字 ⁄ 字号 评论关闭

From:http://www.javascriptkit.com/script/script2/tengcalendar.shtml

----------------------------------------------------

1) Date (MM-dd-yyyy) Pick a date

HTML code: <input id="demo1" type="text" size="25"><a href="javascript:NewCal('demo1','ddmmyyyy')"><img src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a>

2) Date & Time(12-Hour) (dd-MMM-yyyy hh:mm:ss) Pick a date

HTML code: <input id="demo2" type="text" size="25"><a href="javascript:NewCal('demo2','ddmmmyyyy',true,12)"><img src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a>

3) Date & Time(24-Hour) (dd-MM-yyyy HH:mm:ss) Pick a date

HTML code: <input id="demo3" type="text" size="25"><a href="javascript:NewCal('demo3','ddmmmyyyy',true,24)"><img src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a>

-----------------------------------------------

Directions

1. Download the following zip file, which contains the necessary files plus a demo.

2. Upload "DateTimePicker.js" and "cal.gif" contained within the above zip file to your web site.

3. In the <head> section of your webpage that will display the Date Picker, insert the below code:

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

//Date Time Picker script- by TengYong Ng of http://www.rainforestnet.com
//Script featured on JavaScript Kit (http://www.javascriptkit.com)
//For this script, visit http://www.javascriptkit.com

</script>

4. Create the desired textboxes that will use the Date Time Picker. A sample textbox looks like:

<input id="demo1" type="text" size="25"><a href="javascript:NewCal('demo1','ddmmyyyy')"><img src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date"></a>

As seen above, enter a unique ID into each <input> tag (in this case, "demo1"), and inside function "NewCal()", pass this ID as its first parameter. Below describes NewCal() in detail:

NewCal([textbox id],[date format],[show time in calendar?],[time mode (12,24)?])

a. You must enclose textbox id and date format with single quotes (').
b. Don't insert date separator in between of date format such as dd-MM-yyyy.
c. Parameters for "NewCal" function:

  • Textbox id (Mandatory)
  • Date format (optional) - If you don't specify date format, the default date format will be "dd-MM-yyyy". Other valid date formats for My Date Time Picker are: ddMMyyyy,MMddyyyy,ddMMMyyyy,MMMddyyyy.
  • Show time in calendar? (optional) [true or false] - Specify "true" if you would like to let user to pick a time. Default value is "false".
  • Time Mode (optional) [12 or 24] - Time shown in 12-hour or 24-hour format. Default is 24-hour format.
【上篇】
【下篇】

抱歉!评论已关闭.