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<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
4<title>日历演示</title>
5
<script language="javascript">
6
/****************
7
8* 由于字数限制，请下载附件看使用说明．
9*******如果您使用本日历控件 请保留该信息 谢谢! ***********
10* http://2lin.net
11* Email:caoailin@gmail.com
12* QQ:38062022
13* Creation date: 2006-11-22
14
******************/
15
16function Calendar(objName)
17{
18this.style = {
19
20borderColor : "#909eff", //边框颜色
21headerBackColor : "#909EFF", //表头背景颜色
22headerFontColor : "#ffffff", //表头字体颜色
23bodyBarBackColor : "#f4f4f4", //日历标题背景色
24bodyBarFontColor : "#000000", //日历标题字体色
25bodyBackColor : "#ffffff", //日历背景色
26bodyFontColor : "#000000", //日历字体色
27bodyHolidayFontColor : "#ff0000", //假日字体色
28watermarkColor : "#d4d4d4", //背景水印色
29moreDayColor : "#cccccc"
30
31};
32
33this.showMoreDay = false; //是否显示上月和下月的日期
34
35this.Obj = objName;
36this.date = null;
37
38this.mouseOffset = null;
39this.dateInput = null;
40this.timer = null;
41
42};
43
44Calendar.prototype.toString = function()
45{
46var str = this.getStyle();
47str += '<div Author="alin" class="calendar" style="display:none;" onselectstart="return false" oncontextmenu="return false" id="Calendar">\n';
48str += '<div Author="alin" class="cdrWatermark" id="cdrWatermark"></div><div id="cdrBody" style="position:absolute;left:0px;top:0px;z-index:2;width:140px;">';
49str += this.getHeader();
50str += this.getBody();
51str += '</div><div Author="alin" id="cdrMenu" style="position:absolute;left:0px;top:0px;z-index:3;display:none;" onmouseover="' + this.Obj + '.showMenu(null);" onmouseout="' + this.Obj + '.hideMenu();"></div></div>';
52return str;
53};
54
55Calendar.prototype.getStyle = function()
56{
57var str = '<style type="text/css">\n';
58str += '.calendar{position:absolute;width:140px!important;width /**/:142px;height:184px!important;height /**/:174px;background-color:'+this.style.bodyBackColor+';border:1px solid ' + this.style.borderColor + ';left:0px;top:0px;z-index:9999;}\n';
59str += '.cdrHeader{background-color:'+ this.style.headerBackColor +';width:140px;height:22px;font-size:12px;color:'+this.style.headerFontColor+';}\n';
60str += '.cdrWatermark{position:absolute;left:0px;top:55px;width:140px;font-family: Arial Black;font-size:50px;color:'+this.style.watermarkColor+';z-index:1;text-align:center;}\n';
61str += '.cdrBodyBar{background-color:' + this.style.bodyBarBackColor + ';font-size:12px;color:' + this.style.bodyBarFontColor + ';width:140px;height:20px;}\n';
62str += '.cdrBody{width:140px;height:122px!important; height /**/:110px;font-size:12px;cursor:pointer;color:' + this.style.bodyFontColor + ';}\n';
63str += '.dayOver{height:16px;padding:0px;border:1px solid black;background-color:#f4f4f4;}\n';
64str += '.dayOut{padding:1px;border:none;height:16px;}\n';
65str += '.menuOver{background-color:'+this.style.headerBackColor+';color:'+this.style.headerFontColor+';font-size:12px;}\n';
66str += '.headerOver{border:1px solid black;background-color:#f4f4f4;color:black;cursor:default;}\n';
67str += '.cdrMenu{font-size:12px;border:1px solid #000000;background-color:#ffffff;cursor:default;width:100%}\n';
68str += 'html>body #Calendar{width:142px;174px;}';
69str += '</style>\n';
70return str;
71
72};
73
74Calendar.prototype.getHeader = function()
75{
76var str = '<table Author="alin" class="cdrHeader" cellSpacing="2" cellPadding="0"><tr Author="alin" align="center">\n';
77str += '<td Author="alin" onmouseover="this.className=\'headerOver\'" onmouseout="this.className=\'\'" id="previousYear" title="上一年份" style="cursor:pointer;width:10px;" onclick="'+this.Obj+'.onChangeYear(false);"><<</td>\n';
78str += '<td Author="alin" onmouseover="this.className=\'headerOver\'" onmouseout="this.className=\'\'" id="previousMonth" title="上一月份" style="cursor:pointer;width:10px;" onclick="'+this.Obj+'.onChangeMonth(false);"><</td>\n';
79str += '<td Author="alin" onmouseover="this.className=\'headerOver\'" id="currentYear" style="width:50px;" onclick="' + this.Obj + '.showMenu(true);" onmouseout="' + this.Obj + '.hideMenu();this.className=\'\';">0</td>\n';
80str += '<td Author="alin" onmouseover="this.className=\'headerOver\'" id="currentMonth" onclick="' + this.Obj + '.showMenu(false);" onmouseout="' + this.Obj + '.hideMenu();this.className=\'\';">0</td>\n';
81str += '<td Author="alin" onmouseover="this.className=\'headerOver\'" onmouseout="this.className=\'\'" id="nextMonth" title="下一月份" style="cursor:pointer;width:10px;" onclick="'+this.Obj+'.onChangeMonth(true);">></td>\n';
82str += '<td Author="alin" onmouseover="this.className=\'headerOver\'" onmouseout="this.className=\'\'" id="nextYear" title="下一年份" style="cursor:pointer;width:10px;" onclick="'+this.Obj+'.onChangeYear(true);">>></td></tr>\n';
83str += '</table>\n';
84return str;
85};
86
87Calendar.prototype.getBody = function()
88{
89var n = 0;
90var str = this.getBodyBar();
91str += '<table Author="alin" class="cdrBody" cellSpacing="2" cellPadding="0">\n';
92for(i = 0; i < 6; i++)
93{
94str += '<tr Author="alin" align="center">';
95for(j = 0; j < 7; j++)
96{
97str += '<td Author="alin" class="dayOut" id="cdrDay'+(n++)+'" width="13%"></td>\n';
98}
99str += '</tr>';
100}
101str += '</table>\n';
102str += '<table Author="alin" class="cdrBodyBar" cellSpacing="2" cellPadding="0"><tr align="center" Author="alin"><td Author="alin" style="cursor:pointer;" onclick="'+this.Obj+'.getToday();">今天：'+new Date().toFormatString("yyyy年mm月dd日")+'</td></tr></table>\n';
103return str;
104};
105
106Calendar.prototype.getBodyBar = function()
107{
108var str = '<table Author="alin_bar" id="cdrBodyBar" class="cdrBodyBar" style="cursor:move;" cellSpacing="2" cellPadding="0"><tr Author="alin_bar" align="center">\n';
109var day = new Array('日','一','二','三','四','五','六');
110for(i = 0; i < 7; i++)
111{
112str += '<td Author="alin_bar">' + day[i] + '</td>\n';
113}
114str += '</tr></table>';
115return str;
116}
117
118Calendar.prototype.getYearMenu = function(year)
119{
120
121var str = '<table Author="alin" cellSpacing="0" class="cdrMenu" cellPadding="0">\n';
122for(i = 0; i < 10; i++)
123{
124var _year = year + i;
125var _date = new Date(_year,this.date.getMonth(),this.date.getDate());
126
127str += '<tr Author="alin" align="center"><td Author="alin" width="13%" height="16" ';
128if(this.date.getFullYear() != _year)
129{
130str += 'onmouseover="this.className=\'menuOver\'" onmouseout="this.className=\'\'" ';
131}
132else
133{
134str += 'class="menuOver"';
135}
136str += 'onclick="' + this.Obj + '.bindDate(\'' + _date.toFormatString("-") + '\')">' + _year + '年</td>\n';
137str += '</tr>';
138}
139
140str += '<tr Author="alin" align="center"><td Author="alin"><table Author="alin" style="font-size:12px;width:100%;" cellSpacing="0" cellPadding="0">\n';
141str += '<tr Author="alin" align="center"><td Author="alin" onmouseover="this.className=\'menuOver\'" onmouseout="this.className=\'\'" onclick="'+this.Obj+'.getYearMenu('+ (year - 10) + ')"><<</td>\n';
142str += '<td Author="alin" onmouseover="this.className=\'menuOver\'" onmouseout="this.className=\'\'" onclick="'+this.Obj+'.getYearMenu('+ (year + 10) +')">>></td><tr>\n';
143str += '</table></td></tr>\n';
144str += '</table>';
145
146var _menu = getObjById("cdrMenu");
147_menu.innerHTML = str;
148
149};
150
151Calendar.prototype.getMonthMenu = function()
152{
153
154var str = '<table Author="alin" cellSpacing="0" class="cdrMenu" cellPadding="0">\n';
155for(i = 1; i <= 12; i++)
156{
157var _date = new Date(this.date.getFullYear(),i-1,this.date.getDate());
158
159str += '</tr><tr Author="alin" align="center"><td Author="alin" height="16" ';
160if(this.date.getMonth() + 1 != i)
161{
162str += 'onmouseover="this.className=\'menuOver\'" onmouseout="this.className=\'\'" ';
163}
164else
165{
166str += 'class="menuOver"';
167}
168str += 'onclick="' + this.Obj + '.bindDate(\'' + _date.toFormatString("-") + '\')">'+i+'月</td></tr>\n';
169}
170str += '</table>';
171
172var _menu = getObjById("cdrMenu");
173_menu.innerHTML = str;
174};
175
176Calendar.prototype.show = function()
177{
178if (arguments.length > 3 || arguments.length == 0)
179{
180alert("对不起！传入参数不对！" );
181return;
182}
183
184var _date = null;
185var _evObj = null;
186var _initValue = null
187
188for(i = 0; i < arguments.length; i++)
189{
190if(typeof(arguments[i]) == "object" && arguments[i].type == "text")
191{_date = arguments[i];}
192else if(typeof(arguments[i]) == "object")
193{_evObj = arguments[i];}
194else if(typeof(arguments[i]) == "string")
195{_initValue = arguments[i];}
196}
197_evObj = _evObj || _date;
198inputObj = _date;
199targetObj = _evObj
200
201if(!_date){alert("传入参数错误!"); return;}
202
203this.dateInput = _date;
204
205_date = _date.value;
206
207if(_date == "" && _initValue) _date = _initValue;
208
209this.bindDate(_date);
210
211var _target = getPosition(_evObj);
212var _obj = getObjById("Calendar");
213_obj.style.display = "";
214
215
216_obj.style.left = _target.x + 'px';
217if((document.body.clientHeight - (_target.y + _evObj.clientHeight)) >= _obj.clientHeight)
218{
219_obj.style.top = (_target.y + _evObj.clientHeight) + 'px';
220}
221else
222{
223_obj.style.top = (_target.y - _obj.clientHeight) + 'px';
224}
225
226};
227
228Calendar.prototype.hide = function()
229{
230var obj = getObjById("Calendar");
231obj.style.display = "none";
232};
233
234Calendar.prototype.bindDate = function(date)
235{
236
237var _monthDays = new Array(31,30,31,30,31,30,31,31,30,31,30,31);
238var _arr = date.split('-');
239var _date = new Date(_arr[0],_arr[1]-1,_arr[2]);
240if(isNaN(_date)) _date = new Date();
241this.date = _date;
242this.bindHeader();
243
244var _year = _date.getFullYear();
245var _month = _date.getMonth();
246var _day = 1;
247
248var _startDay = new Date(_year,_month,1).getDay();
249var _previYear = _month == 0 ? _year - 1 : _year;
250var _previMonth = _month == 0 ? 11 : _month - 1;
251var _previDay = _monthDays[_previMonth];
252if (_previMonth == 1) _previDay =((_previYear%4==0)&&(_previYear%100!=0)||(_previYear%400==0))?29:28;
253_previDay -= _startDay - 1;
254var _nextDay = 1;
255
256_monthDays[1] = ((_year%4==0)&&(_year%100!=0)||(_year%400==0))?29:28;
257
258for(i = 0; i < 40; i++)
259{
260var _dayElement = getObjById("cdrDay" + i);
261
262_dayElement.onmouseover = Function(this.Obj + ".onMouseOver(this)");
263_dayElement.onmouseout = Function(this.Obj + ".onMouseOut(this)");
264_dayElement.onclick = Function(this.Obj + ".onClick(this)");
265this.onMouseOut(_dayElement);
266_dayElement.style.color = "";
267
268if(i < _startDay)
269{
270//获取上一个月的日期
271if(this.showMoreDay)
272{
273var _previDate = new Date(_year,_month - 1,_previDay);
274_dayElement.innerHTML = _previDay;
275_dayElement.title = _previDate.toFormatString("yyyy年mm月dd日");
276_dayElement.value = _previDate.toFormatString("-");
277_dayElement.style.color = this.style.moreDayColor;
278
279_previDay++;
280
281}else
282{
283_dayElement.innerHTML = "";
284_dayElement.title = "";
285}
286
287}
288else if(_day > _monthDays[_month])
289{
290//获取下个月的日期
291if(this.showMoreDay)
292{
293var _nextDate = new Date(_year,_month + 1,_nextDay);
294_dayElement.innerHTML = _nextDay;
295_dayElement.title = _nextDate.toFormatString("yyyy年mm月dd日");
296_dayElement.value = _nextDate.toFormatString("-");
297_dayElement.style.color = this.style.moreDayColor;
298
299_nextDay++;
300}else
301{
302_dayElement.innerHTML = "";
303_dayElement.title = "";
304}
305}
306else if(i >= new Date(_year,_month,1).getDay() && _day <= _monthDays[_month])
307{
308//获取本月日期
309_dayElement.innerHTML = _day;
310
311if(_day == _date.getDate())
312{
313this.onMouseOver(_dayElement);
314_dayElement.onmouseover = Function("");
315_dayElement.onmouseout = Function("");
316}
317
318
319if(this.isHoliday(_year,_month,_day))
320{
321_dayElement.style.color = this.style.bodyHolidayFontColor;
322}
323var _curDate = new Date(_year, _month, _day);
324_dayElement.title = _curDate.toFormatString("yyyy年mm月dd日");
325_dayElement.value = _curDate.toFormatString("-");
326
327_day++;
328
329}
330else
331{
332_dayElement.innerHTML = "";
333_dayElement.title = "";
334}
335
336}
337
338var _menu = getObjById("cdrMenu");
339_menu.style.display = "none";
340
341};
342
343
344Calendar.prototype.bindHeader = function()
345{
346var _curYear = getObjById("currentYear");
347var _curMonth = getObjById("currentMonth");
348var _watermark = getObjById("cdrWatermark");
349
350_curYear.innerHTML = this.date.toFormatString("yyyy年");
351_curMonth.innerHTML = this.date.toFormatString("mm月");
352_watermark.innerHTML = this.date.getFullYear();
353
354};
355
356Calendar.prototype.getToday = function()
357{
358var _date = new Date();
359this.bindDate(_date.toFormatString("-"));
360};
361
362Calendar.prototype.isHoliday = function(year,month,date)
363{
364var _date = new Date(year,month,date);
365return (_date.getDay() == 6 || _date.getDay() == 0);
366};
367
368Calendar.prototype.onMouseOver = function(obj)
369{
370obj.className = "dayOver";
371};
372
373
374Calendar.prototype.onMouseOut = function(obj)
375{
376obj.className = "dayOut";
377};
378
379Calendar.prototype.onClick = function(obj)
380{
381if(obj.innerHTML != "") this.dateInput.value = obj.value;
382this.hide();
383};
384
385Calendar.prototype.onChangeYear = function(isnext)
386{
387var _year = this.date.getFullYear();
388var _month = this.date.getMonth() + 1;
389var _date = this.date.getDate();
390
391if(_year > 999 && _year <10000)
392{
393if(isnext){_year++;}else{ _year --;}
394}
395else
396{
397alert("年份超出范围（1000-9999）!");
398}
399this.bindDate(_year + '-' + _month + '-' + _date);
400};
401
402Calendar.prototype.onChangeMonth = function(isnext)
403{
404var _year = this.date.getFullYear();
405var _month = this.date.getMonth() + 1;
406var _date = this.date.getDate();
407
408if(isnext){ _month ++;} else {_month--;}
409
410if(_year > 999 && _year <10000)
411{
412if(_month < 1) {_month = 12; _year--;}
413if(_month > 12) {_month = 1; _year++;}
414}
415else
416{
417alert("年份超出范围（1000-9999）!");
418}
419
420this.bindDate(_year + '-' + _month + '-' + _date);
421};
422
423Calendar.prototype.showMenu = function(isyear)
424{
425var _menu = getObjById("cdrMenu");
426
427if(isyear != null)
428{
429var _obj = (isyear)? getObjById("currentYear") : getObjById("currentMonth");
430
431if(isyear)
432{
433this.getYearMenu(this.date.getFullYear() - 5);
434}
435else
436{
437this.getMonthMenu();
438}
439
440_menu.style.top = (_obj.offsetTop + _obj.offsetHeight) + 'px';
441_menu.style.left = _obj.offsetLeft + 'px';
442_menu.style.width = _obj.offsetWidth + 'px';
443
444}
445
446if (this.timer != null) clearTimeout(this.timer);
447
448_menu.style.display="";
449
450}
451Calendar.prototype.hideMenu = function()
452{
453var _obj = getObjById("cdrMenu");
454this.timer = window.setTimeout(function(){_obj.style.display='none';},500);
455}
456
457Number.prototype.NaN0 = function()
458{
459return isNaN(this) ? 0 : this;
460}
461
462Date.prototype.toFormatString = function(fs)
463{
464if(fs.length == 1)
465{
466return this.getFullYear() + fs + (this.getMonth() + 1) + fs + this.getDate();
467}
468fs = fs.replace("yyyy",this.getFullYear());
469fs = fs.replace("mm",(this.getMonth() + 1));
470fs = fs.replace("dd",this.getDate());
471return fs;
472}
473
474/************公用方法及变量**************/
475var inputObj = null;
476var targetObj = null;
477var dragObj = null;
478var mouseOffset = null;
479
480function getObjById(obj)
481{
482if(document.getElementById)
483{
484return document.getElementById(obj);
485}
486else
487{
488alert("浏览器不支持!");
489}
490}
491
492function mouseCoords(ev)
493{
494if(ev.pageX || ev.pageY){
495return {x:ev.pageX, y:ev.pageY};
496}
497return {
498x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
499y:ev.clientY + document.body.scrollTop - document.body.clientTop
500};
501}
502
503
504function getPosition(e)
505{
506var left = 0;
507var top = 0;
508while (e.offsetParent){
509left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
510top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
511e = e.offsetParent;
512}
513
514left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
515top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
516
517return {x:left, y:top};
518}
519function getMouseOffset(target, ev)
520{
521ev = ev || window.event;
522var docPos = getPosition(target);
523var mousePos = mouseCoords(ev);
524return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
525}
526
527function closeCalendar(evt){
528
529evt = evt || window.event;
530var _target= evt.target || evt.srcElement;
531
532if(!_target.getAttribute("Author") && _target != inputObj && _target != targetObj)
533{
534getObjById("Calendar").style.display = "none";
535}
536}
537
538function dragStart(evt){
539
540evt = evt || window.event;
541var _target= evt.target || evt.srcElement;
542
543if(_target.getAttribute("Author") == "alin_bar")
544{
545dragObj = getObjById("Calendar");
546mouseOffset = getMouseOffset(dragObj, evt);
547
548}
549}
550function drag(evt)
551{
552evt = evt || window.event;
553if(dragObj)
554{
555var mousePos = mouseCoords(evt);
556dragObj.style.left = (mousePos.x - mouseOffset.x) + 'px';
557dragObj.style.top = (mousePos.y - mouseOffset.y) + 'px';
558}
559}
560//拖动结束
561function dragEnd(evt)
562{
563dragObj = null;
564}
565/***********End 公用方法*********/
566document.onclick = closeCalendar;
567document.onmousedown = dragStart;
568document.onmousemove = drag;
569document.onmouseup = dragEnd;
570/*********结束**********/
571</script>
572</head>
573<body>
574<form id="Form1">
575<script>
576var c = new Calendar("c");
577
document.write(c);
578</script>
579普通调用:<input type="text" name="txt" onfocus="c.showMoreDay = false;c.show(this,'1980-01-01');"/><input type="text" name="txt1" onfocus="c.showMoreDay = false;c.show('1981-01-01',this);"/><input type="text" name="txt2" onfocus="c.showMoreDay = false;c.show(this);"/><br /><div style="height:300px"></div> 按钮调用:<input type="text" name="btntxt" id="btntxt" /><input name="button" value="*" id="button" type="button" onclick="c.showMoreDay = true;c.show(getObjById('btntxt'),'1982-1-1',this)"/> <input type="text" name="btntxt1" id="btntxt1" /><input name="button1" value="*" id="button1" type="button" onclick="c.showMoreDay = true;c.show(getObjById('btntxt1'),this,'1983-1-1')"/><br /><br /><br /> <input type="text" name="btntxt3" id="btntxt3" /><input name="button3" value="*" id="button3" type="button" onclick="c.showMoreDay = true;c.show(this,getObjById('btntxt3'))"/></form></body>
580</html>
<!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
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />4
<title>日历演示</title>5
<script language="javascript">
6
/****************
7
8
* 由于字数限制，请下载附件看使用说明．9
*******如果您使用本日历控件 请保留该信息 谢谢! *********** 10
* http://2lin.net11
* Email:caoailin@gmail.com 12
* QQ:38062022 13
* Creation date: 2006-11-22 14
******************/15
16
function Calendar(objName) 17
{ 18
this.style = {19
20
borderColor : "#909eff", //边框颜色21
headerBackColor : "#909EFF", //表头背景颜色22
headerFontColor : "#ffffff", //表头字体颜色23
bodyBarBackColor : "#f4f4f4", //日历标题背景色24
bodyBarFontColor : "#000000", //日历标题字体色25
bodyBackColor : "#ffffff", //日历背景色26
bodyFontColor : "#000000", //日历字体色 27
bodyHolidayFontColor : "#ff0000", //假日字体色28
watermarkColor : "#d4d4d4", //背景水印色29
moreDayColor : "#cccccc" 30
31
};32
33
this.showMoreDay = false; //是否显示上月和下月的日期34
35
this.Obj = objName; 36
this.date = null;37
38
this.mouseOffset = null;39
this.dateInput = null;40
this.timer = null; 41
42
};43
44
Calendar.prototype.toString = function()45
{ 46
var str = this.getStyle();47
str += '<div Author="alin" class="calendar" style="display:none;" onselectstart="return false" oncontextmenu="return false" id="Calendar">\n';48
str += '<div Author="alin" class="cdrWatermark" id="cdrWatermark"></div><div id="cdrBody" style="position:absolute;left:0px;top:0px;z-index:2;width:140px;">';49
str += this.getHeader();50
str += this.getBody(); 51
str += '</div><div Author="alin" id="cdrMenu" style="position:absolute;left:0px;top:0px;z-index:3;display:none;" onmouseover="' + this.Obj + '.showMenu(null);" onmouseout="' + this.Obj + '.hideMenu();"></div></div>';52
return str;53
};54
55
Calendar.prototype.getStyle = function()56
{57
var str = '<style type="text/css">\n';58
str += '.calendar{position:absolute;width:140px!important;width /**/:142px;height:184px!important;height /**/:174px;background-color:'+this.style.bodyBackColor+';border:1px solid ' + this.style.borderColor + ';left:0px;top:0px;z-index:9999;}\n';59
str += '.cdrHeader{background-color:'+ this.style.headerBackColor +';width:140px;height:22px;font-size:12px;color:'+this.style.headerFontColor+';}\n';60
str += '.cdrWatermark{position:absolute;left:0px;top:55px;width:140px;font-family: Arial Black;font-size:50px;color:'+this.style.watermarkColor+';z-index:1;text-align:center;}\n';61
str += '.cdrBodyBar{background-color:' + this.style.bodyBarBackColor + ';font-size:12px;color:' + this.style.bodyBarFontColor + ';width:140px;height:20px;}\n';62
str += '.cdrBody{width:140px;height:122px!important; height /**/:110px;font-size:12px;cursor:pointer;color:' + this.style.bodyFontColor + ';}\n';63
str += '.dayOver{height:16px;padding:0px;border:1px solid black;background-color:#f4f4f4;}\n';64
str += '.dayOut{padding:1px;border:none;height:16px;}\n';65
str += '.menuOver{background-color:'+this.style.headerBackColor+';color:'+this.style.headerFontColor+';font-size:12px;}\n';66
str += '.headerOver{border:1px solid black;background-color:#f4f4f4;color:black;cursor:default;}\n';67
str += '.cdrMenu{font-size:12px;border:1px solid #000000;background-color:#ffffff;cursor:default;width:100%}\n';68
str += 'html>body #Calendar{width:142px;174px;}';69
str += '</style>\n'; 70
return str;71
72
};73
74
Calendar.prototype.getHeader = function()75
{76
var str = '<table Author="alin" class="cdrHeader" cellSpacing="2" cellPadding="0"><tr Author="alin" align="center">\n';77
str += '<td Author="alin" onmouseover="this.className=\'headerOver\'" onmouseout="this.className=\'\'" id="previousYear" title="上一年份" style="cursor:pointer;width:10px;" onclick="'+this.Obj+'.onChangeYear(false);"><<</td>\n';78
str += '<td Author="alin" onmouseover="this.className=\'headerOver\'" onmouseout="this.className=\'\'" id="previousMonth" title="上一月份" style="cursor:pointer;width:10px;" onclick="'+this.Obj+'.onChangeMonth(false);"><</td>\n';79
str += '<td Author="alin" onmouseover="this.className=\'headerOver\'" id="currentYear" style="width:50px;" onclick="' + this.Obj + '.showMenu(true);" onmouseout="' + this.Obj + '.hideMenu();this.className=\'\';">0</td>\n';80
str += '<td Author="alin" onmouseover="this.className=\'headerOver\'" id="currentMonth" onclick="' + this.Obj + '.showMenu(false);" onmouseout="' + this.Obj + '.hideMenu();this.className=\'\';">0</td>\n';81
str += '<td Author="alin" onmouseover="this.className=\'headerOver\'" onmouseout="this.className=\'\'" id="nextMonth" title="下一月份" style="cursor:pointer;width:10px;" onclick="'+this.Obj+'.onChangeMonth(true);">></td>\n';82
str += '<td Author="alin" onmouseover="this.className=\'headerOver\'" onmouseout="this.className=\'\'" id="nextYear" title="下一年份" style="cursor:pointer;width:10px;" onclick="'+this.Obj+'.onChangeYear(true);">>></td></tr>\n';83
str += '</table>\n';84
return str;85
};86
87
Calendar.prototype.getBody = function()88
{89
var n = 0;90
var str = this.getBodyBar();91
str += '<table Author="alin" class="cdrBody" cellSpacing="2" cellPadding="0">\n'; 92
for(i = 0; i < 6; i++)93
{ 94
str += '<tr Author="alin" align="center">';95
for(j = 0; j < 7; j++)96
{97
str += '<td Author="alin" class="dayOut" id="cdrDay'+(n++)+'" width="13%"></td>\n';98
}99
str += '</tr>';100
}101
str += '</table>\n';102
str += '<table Author="alin" class="cdrBodyBar" cellSpacing="2" cellPadding="0"><tr align="center" Author="alin"><td Author="alin" style="cursor:pointer;" onclick="'+this.Obj+'.getToday();">今天：'+new Date().toFormatString("yyyy年mm月dd日")+'</td></tr></table>\n';103
return str;104
};105
106
Calendar.prototype.getBodyBar = function()107
{108
var str = '<table Author="alin_bar" id="cdrBodyBar" class="cdrBodyBar" style="cursor:move;" cellSpacing="2" cellPadding="0"><tr Author="alin_bar" align="center">\n';109
var day = new Array('日','一','二','三','四','五','六');110
for(i = 0; i < 7; i++)111
{112
str += '<td Author="alin_bar">' + day[i] + '</td>\n'; 113
}114
str += '</tr></table>';115
return str; 116
}117
118
Calendar.prototype.getYearMenu = function(year)119
{120
121
var str = '<table Author="alin" cellSpacing="0" class="cdrMenu" cellPadding="0">\n';122
for(i = 0; i < 10; i++)123
{ 124
var _year = year + i;125
var _date = new Date(_year,this.date.getMonth(),this.date.getDate());126
127
str += '<tr Author="alin" align="center"><td Author="alin" width="13%" height="16" ';128
if(this.date.getFullYear() != _year)129
{130
str += 'onmouseover="this.className=\'menuOver\'" onmouseout="this.className=\'\'" ';131
}132
else133
{134
str += 'class="menuOver"';135
}136
str += 'onclick="' + this.Obj + '.bindDate(\'' + _date.toFormatString("-") + '\')">' + _year + '年</td>\n'; 137
str += '</tr>';138
}139
140
str += '<tr Author="alin" align="center"><td Author="alin"><table Author="alin" style="font-size:12px;width:100%;" cellSpacing="0" cellPadding="0">\n';141
str += '<tr Author="alin" align="center"><td Author="alin" onmouseover="this.className=\'menuOver\'" onmouseout="this.className=\'\'" onclick="'+this.Obj+'.getYearMenu('+ (year - 10) + ')"><<</td>\n';142
str += '<td Author="alin" onmouseover="this.className=\'menuOver\'" onmouseout="this.className=\'\'" onclick="'+this.Obj+'.getYearMenu('+ (year + 10) +')">>></td><tr>\n';143
str += '</table></td></tr>\n';144
str += '</table>';145
146
var _menu = getObjById("cdrMenu");147
_menu.innerHTML = str;148
149
};150
151
Calendar.prototype.getMonthMenu = function()152
{153
154
var str = '<table Author="alin" cellSpacing="0" class="cdrMenu" cellPadding="0">\n';155
for(i = 1; i <= 12; i++)156
{ 157
var _date = new Date(this.date.getFullYear(),i-1,this.date.getDate()); 158
159
str += '</tr><tr Author="alin" align="center"><td Author="alin" height="16" ';160
if(this.date.getMonth() + 1 != i)161
{162
str += 'onmouseover="this.className=\'menuOver\'" onmouseout="this.className=\'\'" ';163
}164
else165
{166
str += 'class="menuOver"';167
}168
str += 'onclick="' + this.Obj + '.bindDate(\'' + _date.toFormatString("-") + '\')">'+i+'月</td></tr>\n';169
}170
str += '</table>';171
172
var _menu = getObjById("cdrMenu");173
_menu.innerHTML = str; 174
};175
176
Calendar.prototype.show = function()177
{178
if (arguments.length > 3 || arguments.length == 0)179
{180
alert("对不起！传入参数不对！" );181
return;182
} 183
184
var _date = null;185
var _evObj = null;186
var _initValue = null 187
188
for(i = 0; i < arguments.length; i++)189
{190
if(typeof(arguments[i]) == "object" && arguments[i].type == "text")191
{_date = arguments[i];}192
else if(typeof(arguments[i]) == "object")193
{_evObj = arguments[i];}194
else if(typeof(arguments[i]) == "string")195
{_initValue = arguments[i];} 196
}197
_evObj = _evObj || _date;198
inputObj = _date;199
targetObj = _evObj200
201
if(!_date){alert("传入参数错误!"); return;}202
203
this.dateInput = _date;204
205
_date = _date.value;206
207
if(_date == "" && _initValue) _date = _initValue; 208
209
this.bindDate(_date); 210
211
var _target = getPosition(_evObj); 212
var _obj = getObjById("Calendar");213
_obj.style.display = ""; 214
215
216
_obj.style.left = _target.x + 'px';217
if((document.body.clientHeight - (_target.y + _evObj.clientHeight)) >= _obj.clientHeight)218
{ 219
_obj.style.top = (_target.y + _evObj.clientHeight) + 'px';220
}221
else222
{ 223
_obj.style.top = (_target.y - _obj.clientHeight) + 'px';224
}225
226
};227
228
Calendar.prototype.hide = function()229
{230
var obj = getObjById("Calendar");231
obj.style.display = "none"; 232
};233
234
Calendar.prototype.bindDate = function(date)235
{236
237
var _monthDays = new Array(31,30,31,30,31,30,31,31,30,31,30,31); 238
var _arr = date.split('-'); 239
var _date = new Date(_arr[0],_arr[1]-1,_arr[2]); 240
if(isNaN(_date)) _date = new Date(); 241
this.date = _date;242
this.bindHeader(); 243
244
var _year = _date.getFullYear();245
var _month = _date.getMonth();246
var _day = 1; 247
248
var _startDay = new Date(_year,_month,1).getDay();249
var _previYear = _month == 0 ? _year - 1 : _year;250
var _previMonth = _month == 0 ? 11 : _month - 1;251
var _previDay = _monthDays[_previMonth];252
if (_previMonth == 1) _previDay =((_previYear%4==0)&&(_previYear%100!=0)||(_previYear%400==0))?29:28; 253
_previDay -= _startDay - 1;254
var _nextDay = 1;255
256
_monthDays[1] = ((_year%4==0)&&(_year%100!=0)||(_year%400==0))?29:28;257
258
for(i = 0; i < 40; i++)259
{ 260
var _dayElement = getObjById("cdrDay" + i);261
262
_dayElement.onmouseover = Function(this.Obj + ".onMouseOver(this)");263
_dayElement.onmouseout = Function(this.Obj + ".onMouseOut(this)");264
_dayElement.onclick = Function(this.Obj + ".onClick(this)");265
this.onMouseOut(_dayElement); 266
_dayElement.style.color = "";267
268
if(i < _startDay)269
{270
//获取上一个月的日期271
if(this.showMoreDay)272
{273
var _previDate = new Date(_year,_month - 1,_previDay);274
_dayElement.innerHTML = _previDay;275
_dayElement.title = _previDate.toFormatString("yyyy年mm月dd日");276
_dayElement.value = _previDate.toFormatString("-"); 277
_dayElement.style.color = this.style.moreDayColor; 278
279
_previDay++;280
281
}else282
{283
_dayElement.innerHTML = "";284
_dayElement.title = "";285
}286
287
}288
else if(_day > _monthDays[_month])289
{290
//获取下个月的日期291
if(this.showMoreDay)292
{293
var _nextDate = new Date(_year,_month + 1,_nextDay);294
_dayElement.innerHTML = _nextDay;295
_dayElement.title = _nextDate.toFormatString("yyyy年mm月dd日");296
_dayElement.value = _nextDate.toFormatString("-");297
_dayElement.style.color = this.style.moreDayColor; 298
299
_nextDay++; 300
}else301
{302
_dayElement.innerHTML = "";303
_dayElement.title = "";304
}305
}306
else if(i >= new Date(_year,_month,1).getDay() && _day <= _monthDays[_month])307
{308
//获取本月日期309
_dayElement.innerHTML = _day;310
311
if(_day == _date.getDate())312
{313
this.onMouseOver(_dayElement);314
_dayElement.onmouseover = Function(""); 315
_dayElement.onmouseout = Function(""); 316
}317
318
319
if(this.isHoliday(_year,_month,_day))320
{321
_dayElement.style.color = this.style.bodyHolidayFontColor; 322
}323
var _curDate = new Date(_year, _month, _day);324
_dayElement.title = _curDate.toFormatString("yyyy年mm月dd日");325
_dayElement.value = _curDate.toFormatString("-");326
327
_day++;328
329
}330
else331
{332
_dayElement.innerHTML = "";333
_dayElement.title = "";334
} 335
336
}337
338
var _menu = getObjById("cdrMenu");339
_menu.style.display = "none"; 340
341
};342
343
344
Calendar.prototype.bindHeader = function()345
{346
var _curYear = getObjById("currentYear");347
var _curMonth = getObjById("currentMonth");348
var _watermark = getObjById("cdrWatermark");349
350
_curYear.innerHTML = this.date.toFormatString("yyyy年");351
_curMonth.innerHTML = this.date.toFormatString("mm月");352
_watermark.innerHTML = this.date.getFullYear(); 353
354
}; 355
356
Calendar.prototype.getToday = function()357
{358
var _date = new Date();359
this.bindDate(_date.toFormatString("-"));360
}; 361
362
Calendar.prototype.isHoliday = function(year,month,date)363
{364
var _date = new Date(year,month,date);365
return (_date.getDay() == 6 || _date.getDay() == 0);366
};367
368
Calendar.prototype.onMouseOver = function(obj)369
{370
obj.className = "dayOver";371
};372
373
374
Calendar.prototype.onMouseOut = function(obj)375
{376
obj.className = "dayOut";377
}; 378
379
Calendar.prototype.onClick = function(obj)380
{ 381
if(obj.innerHTML != "") this.dateInput.value = obj.value;382
this.hide();383
};384
385
Calendar.prototype.onChangeYear = function(isnext)386
{387
var _year = this.date.getFullYear();388
var _month = this.date.getMonth() + 1;389
var _date = this.date.getDate();390
391
if(_year > 999 && _year <10000)392
{393
if(isnext){_year++;}else{ _year --;}394
}395
else396
{397
alert("年份超出范围（1000-9999）!");398
}399
this.bindDate(_year + '-' + _month + '-' + _date);400
};401
402
Calendar.prototype.onChangeMonth = function(isnext)403
{404
var _year = this.date.getFullYear();405
var _month = this.date.getMonth() + 1;406
var _date = this.date.getDate();407
408
if(isnext){ _month ++;} else {_month--;}409
410
if(_year > 999 && _year <10000)411
{ 412
if(_month < 1) {_month = 12; _year--;}413
if(_month > 12) {_month = 1; _year++;}414
}415
else416
{417
alert("年份超出范围（1000-9999）!");418
} 419
420
this.bindDate(_year + '-' + _month + '-' + _date);421
};422
423
Calendar.prototype.showMenu = function(isyear)424
{425
var _menu = getObjById("cdrMenu");426
427
if(isyear != null)428
{ 429
var _obj = (isyear)? getObjById("currentYear") : getObjById("currentMonth");430
431
if(isyear)432
{433
this.getYearMenu(this.date.getFullYear() - 5); 434
}435
else436
{437
this.getMonthMenu(); 438
}439
440
_menu.style.top = (_obj.offsetTop + _obj.offsetHeight) + 'px';441
_menu.style.left = _obj.offsetLeft + 'px'; 442
_menu.style.width = _obj.offsetWidth + 'px';443
444
}445
446
if (this.timer != null) clearTimeout(this.timer);447
448
_menu.style.display="";449
450
}451
Calendar.prototype.hideMenu = function()452
{453
var _obj = getObjById("cdrMenu");454
this.timer = window.setTimeout(function(){_obj.style.display='none';},500); 455
}456
457
Number.prototype.NaN0 = function()458
{459
return isNaN(this) ? 0 : this;460
}461
462
Date.prototype.toFormatString = function(fs)463
{464
if(fs.length == 1)465
{ 466
return this.getFullYear() + fs + (this.getMonth() + 1) + fs + this.getDate(); 467
}468
fs = fs.replace("yyyy",this.getFullYear());469
fs = fs.replace("mm",(this.getMonth() + 1));470
fs = fs.replace("dd",this.getDate());471
return fs;472
}473
474
/************公用方法及变量**************/475
var inputObj = null; 476
var targetObj = null; 477
var dragObj = null; 478
var mouseOffset = null; 479
480
function getObjById(obj)481
{482
if(document.getElementById)483
{484
return document.getElementById(obj);485
}486
else487
{488
alert("浏览器不支持!");489
}490
}491
492
function mouseCoords(ev)493
{494
if(ev.pageX || ev.pageY){495
return {x:ev.pageX, y:ev.pageY};496
}497
return {498
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,499
y:ev.clientY + document.body.scrollTop - document.body.clientTop500
};501
}502
503
504
function getPosition(e)505
{506
var left = 0;507
var top = 0;508
while (e.offsetParent){509
left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);510
top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);511
e = e.offsetParent;512
}513
514
left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);515
top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);516
517
return {x:left, y:top};518
}519
function getMouseOffset(target, ev)520
{521
ev = ev || window.event;522
var docPos = getPosition(target);523
var mousePos = mouseCoords(ev);524
return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};525
}526
527
function closeCalendar(evt){528
529
evt = evt || window.event; 530
var _target= evt.target || evt.srcElement; 531
532
if(!_target.getAttribute("Author") && _target != inputObj && _target != targetObj)533
{534
getObjById("Calendar").style.display = "none"; 535
} 536
}537
538
function dragStart(evt){539
540
evt = evt || window.event; 541
var _target= evt.target || evt.srcElement;542
543
if(_target.getAttribute("Author") == "alin_bar") 544
{ 545
dragObj = getObjById("Calendar"); 546
mouseOffset = getMouseOffset(dragObj, evt); 547
548
} 549
}550
function drag(evt)551
{552
evt = evt || window.event; 553
if(dragObj)554
{ 555
var mousePos = mouseCoords(evt); 556
dragObj.style.left = (mousePos.x - mouseOffset.x) + 'px';557
dragObj.style.top = (mousePos.y - mouseOffset.y) + 'px'; 558
}559
}560
//拖动结束561
function dragEnd(evt)562
{563
dragObj = null; 564
}565
/***********End 公用方法*********/566
document.onclick = closeCalendar;567
document.onmousedown = dragStart;568
document.onmousemove = drag;569
document.onmouseup = dragEnd;570
/*********结束**********/571
</script>572
</head>573
<body>574
<form id="Form1">575
<script>576
var c = new Calendar("c");577
document.write(c);578
</script>579
普通调用:<input type="text" name="txt" onfocus="c.showMoreDay = false;c.show(this,'1980-01-01');"/><input type="text" name="txt1" onfocus="c.showMoreDay = false;c.show('1981-01-01',this);"/><input type="text" name="txt2" onfocus="c.showMoreDay = false;c.show(this);"/><br /><div style="height:300px"></div> 按钮调用:<input type="text" name="btntxt" id="btntxt" /><input name="button" value="*" id="button" type="button" onclick="c.showMoreDay = true;c.show(getObjById('btntxt'),'1982-1-1',this)"/> <input type="text" name="btntxt1" id="btntxt1" /><input name="button1" value="*" id="button1" type="button" onclick="c.showMoreDay = true;c.show(getObjById('btntxt1'),this,'1983-1-1')"/><br /><br /><br /> <input type="text" name="btntxt3" id="btntxt3" /><input name="button3" value="*" id="button3" type="button" onclick="c.showMoreDay = true;c.show(this,getObjById('btntxt3'))"/></form></body>580
</html>
浙公网安备 33010602011771号