今天用Javascript写了一个日历组件，添加少部分代码就可以在项目中使用了。
代码如下：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2<HTML>
3 <HEAD>
4 <TITLE>日历</TITLE>
5 <META NAME="Generator" CONTENT="EditPlus">
6 <META NAME="Author" CONTENT="">
7 <META NAME="Keywords" CONTENT="">
8 <META NAME="Description" CONTENT="">
9  <STYLE>
10  SELECT {}{BORDER:1 SOLID #FFFFFF;}
11 BUTTON {}{BORDER:1 SOLID #FFFFFF;BACKGROUND-COLOR:#8CF;COLOR:#FFF;FONT-WEIGHT:BOLD;}
12 </STYLE>
13 </HEAD>
14
15 <BODY>
16 <DIV STYLE = "width:100%;text-align:center;font-size:9pt">
17 <DIV style = "width:300px;border:1 solid #ADF;background-color:#AFDFFF">
18 <button onclick = "getCalendar(-1)"><<</button>
19 <select id = "syear" onchange = "Calendar.reload(getDateString());">
20 <script>
21 var dateTmp = new Date();
22 for(var i = 1980; i <= 2050; i++){
23 document.write("<option value = '" + i + "'" + (i == dateTmp.getYear()?" SELECTED ":" ") + ">" + i + "</option>")
24 }
25 </script>
26 </select>
27 年
28 <select id = "smonth" onchange = "Calendar.reload(getDateString());">
29 <script>
30 for(var j = 1; j <= 12; j++){
31 document.write("<option value = '" + j + "'" + (j == dateTmp.getMonth()+1?" SELECTED ":" ") + ">" + j + "</option>")
32 }
33 </script>
34 </select>
35 月
36 <button onclick = "getCalendar(1)">>></button>
37 <button onclick = "getCalendar(0)">今天</button>
38 <button onclick = "window.close()">关闭</button>
39 </DIV>
40 <DIV id = "ca">
41 <table style = "width:300px;height:200px;border:1 solid #ADF;font-size:9pt" cellpadding = "0" cellspacing = "1">
42 <thead style = "height:25px;background-color:#F0F0F0">
43 <tr>
44 <th>日</th>
45 <th>一</th>
46 <th>二</th>
47 <th>三</th>
48 <th>四</th>
49 <th>五</th>
50 <th>六</th>
51 </tr>
52 </thead>
53 <tbody>
54 <tr>
55 <td style = "text-align:center;background-color:#AADDFF;cursor:hand" onclick = "mouseclick()" onmouseover = "mouseover()" onmouseout = "mouseout()"></td>
56 </tr>
57 </tbody>
58 </table>
59 </DIV>
60 </DIV>
61
62 <script language = "javascript">
63/**//******************************************************************************
64** Calendar Tool Window
65** FGF (com.163.mail@163.com)
66** version 1.0
67**
68** Copyright (c) 2010 FGF. All rights reserved.
69** Created 2010/10/09
70** Last modified: 2010/10/09
71******************************************************************************/
72 //日历
73 Calendar = {
74 //返回日期年月日数组
75 getYMD : function(date){
76 if(!date){
77 date = new Date();
78 }
79 var year = date.getYear();
80 var month = date.getMonth() + 1;
81 var dd = date.getDate();
82 return [year,month,dd];
83 },
84 //将日期对象转换为日期字符串
85 getDateString : function(date){
86 if(!date){
87 date = new Date();
88 }
89 var year = date.getYear();
90 var month = /\d{2}$/.exec("0"+(date.getMonth() + 1));
91 //var dd = /\d{2}$/.exec("0"+(date.getDate()));
92 return year + month + "01";
93 },
94 //根据传入的日期字符串创建Date对象
95 getDate : function(dateString){
96 if(!dateString || dateString == ""){
97 return new Date();
98 }else if(typeof dateString == "object"){
99 dateString = this.getDateString(dateString);
100 }
101 var re = /(\d{4})(\-|\/)?(\d{2})(\-|\/)?(\d{2})/;
102 var arr = dateString.match(re);
103 var date = new Date();
104 date.setYear(+RegExp.$1);
105 date.setMonth(+RegExp.$3 - 1);
106 date.setDate(+RegExp.$5);
107 return date;
108 },
109 //根据日期对象参数获取当月日期数组 7*6
110 getDateArray : function(date){
111 if(!date){date = this.date}
112 var darr = [31,28,31,30,31,30,31,31,30,31,30,31];
113 var day = date.getDay();
114 var dd = date.getDate();
115 var month = date.getMonth();
116 var year = date.getYear();
117
118 if((month + 1) == 2 && (year % 400 == 0 || year % 4 == 0 && year % 100 != 0)){
119 darr[month] = darr[month] + 1;
120 }
121 var dateArray = [];
122 if(day !=0){
123 for(var i = day,j=0 ; i > -1; i--,j++){
124 dateArray[j] = [
125 (month==0?year-1:year),
126 (month==0?12:month),
127 (darr[month==0?11:month-1] - i + 1)
128 ];
129 }
130 }else{
131 day += 7;
132 for(var i = day,j=0 ; i > -1; i--,j++){
133 dateArray[j] = [
134 (month==0?year-1:year),
135 (month==0?12:month),
136 (darr[month==0?11:month-1] - i + 1)
137 ];
138 }
139 }
140
141 var offDay = 7;
142 if((day + darr[month]) / 7 < 5){
143 offDay = 14;
144 }
145
146 for(var i = 0; i < offDay - ((darr[month] + day) %7); i++){
147 dateArray[darr[month] + day + i] = [
148 (month==11?year+1:year),
149 (month==11?1:month+2),
150 (i + 1)
151 ];
152 }
153
154 for(var i = 1,j = day ; i <= darr[month] ; i++,j++){
155 dateArray[j] = [year,(month + 1),i];
156 }
157 return dateArray;
158 },
159 //载入
160 load : function(dateString,parent){
161 if(typeof dateString == "object" && !parent){
162 parent = dateString;
163 dateString = null;
164 }
165 this.createCalendarFrame(parent);
166 this.reload(dateString);
167 },
168 //重新载入
169 reload : function(dateString){
170 this.date = (dateString?this.getDate(dateString):this.getDate(new Date()));
171 var dateArray = this.getDateArray(this.date);
172 this.refreshCalendar(dateArray);
173 },
174 //创建日历视图
175 createCalendarFrame : function(parent){
176 //如果body中已定义<TABLE>则使用这个<TABLE>，否则动态创建<TABLE>
177 if(parent && parent.getElementsByTagName("TABLE").length > 0){
178 this.calendarFrame = parent;
179 }else{
180 this.calendarFrame = document.createElement("DIV");
181 var table = document.createElement("TABLE");
182 var thead = document.createElement("THEAD");
183 var tr = document.createElement("TR");
184 var tbody = document.createElement("TBODY");
185 var week = ["日","一","二","三","四","五","六"];
186 for(var i = 0 ; i < 7 ; i++){
187 var td = document.createElement("TH");
188 td.innerText = "星期" + week[i];
189 tr.appendChild(td);
190 }
191 thead.appendChild(tr);
192 table.appendChild(thead);
193 table.appendChild(tbody);
194 this.calendarFrame.appendChild(table);
195 if(parent){
196 parent.appendChild(this.calendarFrame);
197 }else{
198 document.body.appendChild(this.calendarFrame);
199 }
200 }
201 this.tbody = this.calendarFrame.getElementsByTagName("TBODY")[0];
202 var trs = this.tbody.getElementsByTagName("TR");
203 if(!this.trs){
204 if(trs.length > 0){
205 this.tr = trs[0];
206 }else{
207 this.tr = document.createElement("TR");
208 this.tbody.appendChild(this.tr);
209 }
210 }
211 var tds = this.tr.getElementsByTagName("TD");
212 if(!this.tds){
213 if(tds.length > 0){
214 this.td = tds[0];
215 }else{
216 this.td = document.createElement("TD");
217 this.td.style.textAlign = "center";
218 }
219 }
220 },
221 //刷新日历视图
222 refreshCalendar : function(dateArray){
223 var rows = this.tbody.rows;
224 for(var i = 0; i < rows.length;){
225 rows[i].removeNode(true);
226 }
227 for(var i = 0; i < Math.ceil(dateArray.length / 7)*7; i++){
228 if(i % 7 == 0){
229 trClone = this.tr.cloneNode();
230 this.tbody.appendChild(trClone);
231 }
232 tdClone = this.td.cloneNode();
233 if(i < dateArray.length){
234 tdClone.innerText = dateArray[i][2];
235 tdClone.setAttribute("date",dateArray[i])
236 if(this.getYMD()[0] == dateArray[i][0]
237 && this.getYMD()[1] == dateArray[i][1]
238 && this.getYMD()[2] == dateArray[i][2]){
239 tdClone.style.backgroundColor = "#FFDDAA";
240 tdClone.style.color = "#FF0000";
241 }else if(this.getYMD(this.date)[1] != dateArray[i][1]){
242 tdClone.style.color = "#AA8888";
243 }
244 }
245 trClone.appendChild(tdClone);
246 }
247 }
248 }
249 Calendar.load(document.all("ca"));
250 </script>
251 </BODY>
252</HTML>
253
254<script language = "javascript">
255 var getDateString = function(){
256 var year = document.all("syear").value;
257 var month = /\d{2}$/.exec(("0" + document.all("smonth").value));
258 var date = "01";
259 return year +"-"+ month +"-"+ date;
260 }
261
262 var getCalendar = function(flag){
263 if(flag == 1){
264 if(document.all("syear").value == 2050 && document.all("smonth").value == 12){
265 return;
266 }
267 if(parseInt(document.all("smonth").value) < 12){
268 document.all("smonth").value = parseInt(document.all("smonth").value) + 1;
269 }else{
270 document.all("syear").value = parseInt(document.all("syear").value) + 1;
271 document.all("smonth").value = 1;
272 }
273 }else if(flag == -1){
274 if(document.all("syear").value == 1980 && document.all("smonth").value == 1){
275 return;
276 }
277 if(parseInt(document.all("smonth").value) > 1){
278 document.all("smonth").value = parseInt(document.all("smonth").value) - 1;
279 }else{
280 document.all("syear").value = parseInt(document.all("syear").value) - 1;
281 document.all("smonth").value = 12;
282 }
283 }else if(flag == 0){
284 var dateTmp = new Date();
285 var year = dateTmp.getYear();
286 var month = dateTmp.getMonth() + 1;
287 document.all("syear").value = year;
288 document.all("smonth").value = month;
289 }
290
291 Calendar.reload(getDateString());
292 }
293
294 var mouseclick = function(){
295 da = event.srcElement.getAttribute('date');
296 if(da && da.length == 3){
297 if(da[1] != document.all("smonth").value){
298 var flag = 1;
299 var m = document.all("smonth").value;
300 if(da[1] == 12 && m == 1){
301 flag = -1;
302 }else if(da[1] == 1 && m == 12){
303 flag = 1;
304 }else{
305 flag = da[1] > document.all("smonth").value?1:-1;
306 }
307 getCalendar(flag);
308 }else{
309 //处理方法写在这里
310 alert(da[0] + /\d{2}$/.exec("0"+da[1]) + /\d{2}$/.exec("0"+da[2]))
311 }
312 }
313 }
314
315 var setCssText = function(obj,bgColor){
316 var bgColor = "#AADDFF";
317 if(obj.style.color.toUpperCase() == "#FF0000"){
318 var bgColor = "#FFDDAA";
319 }
320 obj.style.backgroundColor = bgColor;
321 }
322
323 var mouseover = function(){
324 var element = event.srcElement;
325 if(element.tagName == "TD"){
326 element.style.backgroundColor = "#DDEEFF";
327 }
328 }
329
330 var mouseout = function(){
331 var element = event.srcElement;
332 window.setTimeout(function(){eval("setCssText(element)")},200)
333 }
334</script>
335
|