日历是更多了,练手作,IE下使用
HTML调用页代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" >
3 <head>
4 <title>测试日历</title>
5 <link href="Calendar.css" type="text/css" rel="Stylesheet" />
6 <script type="text/javascript" src="Calendar.js"></script>
7 </head>
8 <body>
9 <table>
10 <tr>
11 <td>这是测试:</td>
12 <td><input type="text" id="txtTest" onclick="test('txtTest');" /><input type="button" value ="日历" onclick="test('txtTest');" /></td>
13 </tr>
14 <tr>
15 <td> </td>
16 <td> </td>
17 </tr>
18 <tr>
19 <td> </td>
20 <td> </td>
21 </tr>
22 <tr>
23 <td> </td>
24 <td> </td>
25 </tr>
26 <tr>
27 <td><input type="text" id="txtTest0" onclick="test('txtTest0');" /></td>
28 <td> </td>
29 </tr>
30 </table>
31 <div id="abc"></div>
32 </body>
33 </html>
34 <script type="text/javascript">
35 /*
36 1. 标示星号的为必须提供的属性;
37 2. 在设置属性后调用 Apply 方法;
38 3. 注意属性 Format 与 StartDate,EndDate 的关系;
39 3. 日历固定格式: yyyy-MM-dd, dd-MM-yyyy, MM-dd-yyyy(中间的分隔符可用/和-,区分大小写);
40 4. 日历的起始时间的意思是日历显示的时候的初始化日期,当目标对象有值是无用;
41 5. 别忘记引用日历的 CSS 文件,当然你定义新样式后可删除原来的样式,节省空间嘛;
42 6. IE 6,7 测试通过;
43 6. 去用吧,哈哈!
44 */
45 function test(id) {
46 var c = new CalendarClass();
47 // 加入日期控件的对象 id *
48 c.Id = id;
49 // 皮肤编号(程序提供 1,2,3 种选择,可自行添加)
50 c.Css = 3;
51 // 语言(cn - 简体中文,hk - 繁体中文,en - 英文)
52 c.Lang = "en";
53 // 日历起始时间,如果是当前时间,请留空
54 c.Date = "";
55 // 选择年/月/日/时/分/日期("Year","Month","Day","Hour","Minute","All")
56 c.Type = "All";
57 // 格式化日历输出
58 c.Format = "yyyy-MM-dd";
59 // 起始日期/终止日期(格式要与 Format 的格式匹配)
60 // 如果 Format = "yyyy/MM/dd",则 StartDate = "2000/5/10"
61 c.StartDate = "1985-1-1";
62 c.EndDate = "2015-12-31";
63 // 是否显示底端的时/分/秒
64 c.Attach = true;
65 // 是否在文档其它地方单击隐藏
66 c.IsClick = true;
67 // 是否鼠标移出隐藏
68 c.IsOver = true;
69 // 清空操作后是否隐藏
70 c.IsClear = true;
71 // 日历显示位置(true 表示显示在触发事件的对象下面)
72 c.Position = true;
73 c.Apply(); // *
74 }
75 </script>
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" >
3 <head>
4 <title>测试日历</title>
5 <link href="Calendar.css" type="text/css" rel="Stylesheet" />
6 <script type="text/javascript" src="Calendar.js"></script>
7 </head>
8 <body>
9 <table>
10 <tr>
11 <td>这是测试:</td>
12 <td><input type="text" id="txtTest" onclick="test('txtTest');" /><input type="button" value ="日历" onclick="test('txtTest');" /></td>
13 </tr>
14 <tr>
15 <td> </td>
16 <td> </td>
17 </tr>
18 <tr>
19 <td> </td>
20 <td> </td>
21 </tr>
22 <tr>
23 <td> </td>
24 <td> </td>
25 </tr>
26 <tr>
27 <td><input type="text" id="txtTest0" onclick="test('txtTest0');" /></td>
28 <td> </td>
29 </tr>
30 </table>
31 <div id="abc"></div>
32 </body>
33 </html>
34 <script type="text/javascript">
35 /*
36 1. 标示星号的为必须提供的属性;
37 2. 在设置属性后调用 Apply 方法;
38 3. 注意属性 Format 与 StartDate,EndDate 的关系;
39 3. 日历固定格式: yyyy-MM-dd, dd-MM-yyyy, MM-dd-yyyy(中间的分隔符可用/和-,区分大小写);
40 4. 日历的起始时间的意思是日历显示的时候的初始化日期,当目标对象有值是无用;
41 5. 别忘记引用日历的 CSS 文件,当然你定义新样式后可删除原来的样式,节省空间嘛;
42 6. IE 6,7 测试通过;
43 6. 去用吧,哈哈!
44 */
45 function test(id) {
46 var c = new CalendarClass();
47 // 加入日期控件的对象 id *
48 c.Id = id;
49 // 皮肤编号(程序提供 1,2,3 种选择,可自行添加)
50 c.Css = 3;
51 // 语言(cn - 简体中文,hk - 繁体中文,en - 英文)
52 c.Lang = "en";
53 // 日历起始时间,如果是当前时间,请留空
54 c.Date = "";
55 // 选择年/月/日/时/分/日期("Year","Month","Day","Hour","Minute","All")
56 c.Type = "All";
57 // 格式化日历输出
58 c.Format = "yyyy-MM-dd";
59 // 起始日期/终止日期(格式要与 Format 的格式匹配)
60 // 如果 Format = "yyyy/MM/dd",则 StartDate = "2000/5/10"
61 c.StartDate = "1985-1-1";
62 c.EndDate = "2015-12-31";
63 // 是否显示底端的时/分/秒
64 c.Attach = true;
65 // 是否在文档其它地方单击隐藏
66 c.IsClick = true;
67 // 是否鼠标移出隐藏
68 c.IsOver = true;
69 // 清空操作后是否隐藏
70 c.IsClear = true;
71 // 日历显示位置(true 表示显示在触发事件的对象下面)
72 c.Position = true;
73 c.Apply(); // *
74 }
75 </script>
效果图:
下载链接:可定制样式日历
一起学习JS吧...