日历控件(js)

  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");
577document.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 >

转载于:https://www.cnblogs.com/kunhony/archive/2007/05/31/766043.html