一个不错的日历控件

  1function atCalendarControl(){
  2  var calendar=this;
  3  this.calendarPad=null;
  4  this.prevMonth=null;
  5  this.nextMonth=null;
  6  this.prevYear=null;
  7  this.nextYear=null;
  8  this.goToday=null;
  9  this.calendarClose=null;
 10  this.calendarAbout=null;
 11  this.head=null;
 12  this.body=null;
 13  this.today=[];
 14  this.currentDate=[];
 15  this.sltDate;
 16  this.target;
 17  this.source;
 18
 19  /**//************** 加入日历底板及阴影 *********************/
 20  this.addCalendarPad=function(){
 21   document.write("<div id='divCalendarpad' style='position:absolute;top:100;left:0;width:255;height:167;display:none;'>");
 22   document.write("<iframe frameborder=0 height=168 width=255></iframe>");
 23   document.write("<div style='position:absolute;top:4;left:4;width:248;height:164;background-color:#336699;'></div>");
 24   document.write("</div>");
 25   calendar.calendarPad=document.all.divCalendarpad;
 26  }
 27  /**//************** 加入日历面板 *********************/
 28  this.addCalendarBoard=function(){
 29   var BOARD=this;
 30   var divBoard=document.createElement("div");
 31   calendar.calendarPad.insertAdjacentElement("beforeEnd",divBoard);
 32   divBoard.style.cssText="position:absolute;top:0;left:0;width:250;height:166;border:1 outset;background-color:buttonface;";
 33
 34   var tbBoard=document.createElement("table");
 35   divBoard.insertAdjacentElement("beforeEnd",tbBoard);
 36   tbBoard.style.cssText="position:absolute;top:0;left:0;width:100%;height:10;font-size:9pt;";
 37   tbBoard.cellPadding=0;
 38   tbBoard.cellSpacing=1;
 39   tbBoard.bgColor="#333333";
 40
 41  /**//************** 设置各功能按钮的功能 *********************/
 42   /**//*********** Calendar About Button ***************/
 43   trRow = tbBoard.insertRow(0);
 44   calendar.calendarAbout=calendar.insertTbCell(trRow,0,"-","center");
 45   calendar.calendarAbout.onclick=function(){calendar.about();}
 46   /**//*********** Calendar Head ***************/
 47   tbCell=trRow.insertCell(1);
 48   tbCell.colSpan=5;
 49   tbCell.bgColor="#99CCFF";
 50   tbCell.align="center";
 51   tbCell.style.cssText = "cursor:default";
 52   calendar.head=tbCell;
 53   /**//*********** Calendar Close Button ***************/
 54   tbCell=trRow.insertCell(2);
 55   calendar.calendarClose = calendar.insertTbCell(trRow,2,"x","center");
 56   calendar.calendarClose.title="关闭";
 57   calendar.calendarClose.onclick=function(){calendar.hide();}
 58
 59   /**//*********** Calendar PrevYear Button ***************/
 60   trRow = tbBoard.insertRow(1);
 61   calendar.prevYear = calendar.insertTbCell(trRow,0,"&lt;&lt;","center");
 62   calendar.prevYear.title="上一年";
 63   calendar.prevYear.onmousedown=function(){
 64    calendar.currentDate[0]--;
 65    calendar.show(calendar.target,calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+calendar.currentDate[2],calendar.source);
 66   }
 67   /**//*********** Calendar PrevMonth Button ***************/
 68   calendar.prevMonth = calendar.insertTbCell(trRow,1,"&lt;","center");
 69   calendar.prevMonth.title="上一月";
 70   calendar.prevMonth.onmousedown=function(){
 71
 72    calendar.currentDate[1]--;
 73    if(calendar.currentDate[1]==0){
 74     calendar.currentDate[1]=12;
 75     calendar.currentDate[0]--;
 76    }
 77    calendar.show(calendar.target,calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+calendar.currentDate[2],calendar.source);
 78   }
 79   /**//*********** Calendar Today Button ***************/
 80   calendar.goToday = calendar.insertTbCell(trRow,2,"今天","center",3);
 81   calendar.goToday.title="选择今天";
 82   calendar.goToday.onclick=function(){
 83       var d;
 84       d =new Date();
 85       var e;
 86       e=d.getMonth()+1;
 87       
 88   // calendar.sltDate=calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+calendar.currentDate[2];
 89    calendar.target.value=d.getYear() + "-"+e+"-"+d.getDate();
 90    //calendar.target.value=calendar.sltDate;
 91    calendar.hide();
 92    //calendar.show(calendar.target,calendar.today[0]+"-"+calendar.today[1]+"-"+calendar.today[2],calendar.source);
 93   }
 94   /**//*********** Calendar NextMonth Button ***************/
 95   calendar.nextMonth = calendar.insertTbCell(trRow,3,"&gt;","center");
 96   calendar.nextMonth.title="下一";
 97   calendar.nextMonth.onmousedown=function(){
 98    calendar.currentDate[1]++;
 99    if(calendar.currentDate[1]==13){
100     calendar.currentDate[1]=1;
101     calendar.currentDate[0]++;
102    }
103    calendar.show(calendar.target,calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+calendar.currentDate[2],calendar.source);
104   }
105   /**//*********** Calendar NextYear Button ***************/
106   calendar.nextYear = calendar.insertTbCell(trRow,4,"&gt;&gt;","center");
107   calendar.nextYear.title="下一年";
108   calendar.nextYear.onmousedown=function(){
109    calendar.currentDate[0]++;
110    calendar.show(calendar.target,calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+calendar.currentDate[2],calendar.source);
111
112   }
113
114   trRow = tbBoard.insertRow(2);
115   var cnDateName = new Array("周日","周一","周二","周三","周四","周五","周六");
116   for (var i = 0; i < 7; i++) {
117    tbCell=trRow.insertCell(i)
118    tbCell.innerText=cnDateName[i];
119    tbCell.align="center";
120    tbCell.width=35;
121    tbCell.style.cssText="cursor:default;border:1 solid #99CCCC;background-color:#99CCCC;";
122   }
123
124   /**//*********** Calendar Body ***************/
125   trRow = tbBoard.insertRow(3);
126   tbCell=trRow.insertCell(0);
127   tbCell.colSpan=7;
128   tbCell.height=97;
129   tbCell.vAlign="top";
130   tbCell.bgColor="#F0F0F0";
131   var tbBody=document.createElement("table");
132   tbCell.insertAdjacentElement("beforeEnd",tbBody);
133   tbBody.style.cssText="position:relative;top:0;left:0;width:245;height:103;font-size:9pt;"
134   tbBody.cellPadding=0;
135   tbBody.cellSpacing=1;
136   calendar.body=tbBody;
137  }
138  /**//************** 加入功能按钮公共样式 *********************/
139  this.insertTbCell=function(trRow,cellIndex,TXT,trAlign,tbColSpan){
140   var tbCell=trRow.insertCell(cellIndex);
141   if(tbColSpan!=undefined) tbCell.colSpan=tbColSpan;
142
143   var btnCell=document.createElement("button");
144   tbCell.insertAdjacentElement("beforeEnd",btnCell);
145   btnCell.value=TXT;
146   btnCell.style.cssText="width:100%;border:1 outset;background-color:buttonface;";
147   btnCell.onmouseover=function(){
148    btnCell.style.cssText="width:100%;border:1 outset;background-color:#F0F0F0;";
149
150   }
151   btnCell.onmouseout=function(){
152    btnCell.style.cssText="width:100%;border:1 outset;background-color:buttonface;";
153   }
154  // btnCell.onmousedown=function(){
155  //  btnCell.style.cssText="width:100%;border:1 inset;background-color:#F0F0F0;";
156  // }
157   btnCell.onmouseup=function(){
158    btnCell.style.cssText="width:100%;border:1 outset;background-color:#F0F0F0;";
159   }
160   btnCell.onclick=function(){
161    btnCell.blur();
162   }
163   return btnCell;
164  }
165  this.setDefaultDate=function(){
166   var dftDate=new Date();
167   calendar.today[0]=dftDate.getYear();
168   calendar.today[1]=dftDate.getMonth()+1;
169   calendar.today[2]=dftDate.getDate();
170  }
171
172  /**//****************** Show Calendar *********************/
173  this.show=function(targetObject,defaultDate,sourceObject){
174   if(targetObject==undefined) {
175    alert("未设置目标对像. \n方法: ATCALENDAR.show(obj 目标对像,string 默认日期,obj 点击对像);\n\n目标对像:接受日期返回值的对像.\n默认日期:格式为\"yyyy-mm-dd\",缺省为当日日期.\n点击对像:点击这个对像弹出calendar,默认为目标对像.\n");
176    return false;
177   }
178   else    calendar.target=targetObject;
179   if(sourceObject==undefined) calendar.source=calendar.target;
180   else calendar.source=sourceObject;
181
182   var firstDay;
183   var Cells=new Array();
184
185   if(defaultDate==undefined || defaultDate==""){
186    var theDate=new Array();
187    calendar.head.innerText = calendar.today[0]+"-"+calendar.today[1]+"-"+calendar.today[2];
188    theDate[0]=calendar.today[0]; theDate[1]=calendar.today[1]; theDate[2]=calendar.today[2];
189   }
190   else{
191    var reg=/^\d{4}-\d{1,2}-\d{2}$/
192    if(!defaultDate.match(reg)){
193     alert("默认日期的格式不正确\n\n默认日期可接受格式为:'yyyy-mm-dd'");
194     return;
195    }
196    var theDate=defaultDate.split("-");
197    calendar.head.innerText = defaultDate;
198   }
199   calendar.currentDate[0]=theDate[0];
200   calendar.currentDate[1]=theDate[1];
201   calendar.currentDate[2]=theDate[2];
202   theFirstDay=calendar.getFirstDay(theDate[0],theDate[1]);
203   theMonthLen=theFirstDay+calendar.getMonthLen(theDate[0],theDate[1]);
204   //calendar.setEventKey();
205
206   calendar.calendarPad.style.display="";
207   var theRows = Math.ceil((theMonthLen)/7);
208   //清除旧的日历;
209   while (calendar.body.rows.length > 0) {
210    calendar.body.deleteRow(0)
211   }
212   //建立新的日历;
213   var n=0;day=0;
214   for(i=0;i<theRows;i++){
215    theRow=calendar.body.insertRow(i);
216    for(j=0;j<7;j++){
217     n++;
218     if(n>theFirstDay && n<=theMonthLen){
219      day=n-theFirstDay;
220      calendar.insertBodyCell(theRow,j,day);
221     }
222
223     else{
224      var theCell=theRow.insertCell(j);
225      theCell.style.cssText="background-color:#F0F0F0;cursor:default;";
226     }
227    }
228   }
229
230   //****************调整日历位置**************//
231   var offsetPos=calendar.getAbsolutePos(calendar.source);//计算对像的位置;
232   if((document.body.offsetHeight-(offsetPos.y+calendar.source.offsetHeight-document.body.scrollTop))<calendar.calendarPad.style.pixelHeight){
233    var calTop=offsetPos.y-calendar.calendarPad.style.pixelHeight;
234   }
235   else{
236    var calTop=offsetPos.y+calendar.source.offsetHeight;
237   }
238   if((document.body.offsetWidth-(offsetPos.x+calendar.source.offsetWidth-document.body.scrollLeft))>calendar.calendarPad.style.pixelWidth){
239    var calLeft=offsetPos.x;
240   }
241   else{
242    var calLeft=offsetPos.x+calendar.source.offsetWidth-calendar.calendarPad.style.pixelWidth ;
243   }
244   //alert(offsetPos.x);
245   calendar.calendarPad.style.pixelLeft=calLeft;
246   calendar.calendarPad.style.pixelTop=calTop;
247  }
248  /**//****************** 计算对像的位置 *************************/
249  this.getAbsolutePos = function(el) {
250   var r = { x: el.offsetLeft, y: el.offsetTop };
251   if (el.offsetParent) {
252    var tmp = calendar.getAbsolutePos(el.offsetParent);
253    r.x += tmp.x;
254    r.y += tmp.y;
255   }
256   return r;
257  };
258
259  //************* 插入日期单元格 **************/
260  this.insertBodyCell=function(theRow,j,day,targetObject){
261   var theCell=theRow.insertCell(j);
262   if(j==0) var theBgColor="#FF9999";
263   else var theBgColor="#FFFFFF";
264   if(day==calendar.currentDate[2]) var theBgColor="#CCCCCC";
265   if(day==calendar.today[2]) var theBgColor="#99FFCC";
266   theCell.bgColor=theBgColor;
267   theCell.innerText=day;
268   theCell.align="center";
269   theCell.width=35;
270   theCell.style.cssText="border:1 solid #CCCCCC;cursor:hand;";
271   theCell.onmouseover=function(){ 
272    theCell.bgColor="#FFFFCC"; 
273    theCell.style.cssText="border:1 outset;cursor:hand;";
274   }
275   theCell.onmouseout=function(){ 
276    theCell.bgColor=theBgColor; 
277    theCell.style.cssText="border:1 solid #CCCCCC;cursor:hand;";
278   }
279   theCell.onmousedown=function(){ 
280    theCell.bgColor="#FFFFCC"; 
281    theCell.style.cssText="border:1 inset;cursor:hand;";
282   }
283   theCell.onclick=function(){
284    if(calendar.currentDate[1].length<2) calendar.currentDate[1]="0"+calendar.currentDate[1];
285    if(day.toString().length<2) day="0"+day;
286    calendar.sltDate=calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+day;
287    calendar.target.value=calendar.sltDate;
288    calendar.hide();
289   }
290  }
291  /**//************** 取得月份的第一天为星期几 *********************/
292  this.getFirstDay=function(theYear, theMonth){
293   var firstDate = new Date(theYear,theMonth-1,1);
294   return firstDate.getDay();
295  }
296  /**//************** 取得月份共有几天 *********************/
297
298  this.getMonthLen=function(theYear, theMonth) {
299   theMonth--;
300   var oneDay = 1000 * 60 * 60 * 24;
301   var thisMonth = new Date(theYear, theMonth, 1);
302   var nextMonth = new Date(theYear, theMonth + 1, 1);
303   var len = Math.ceil((nextMonth.getTime() - thisMonth.getTime())/oneDay);
304   return len;
305  }
306  /**//************** 隐藏日历 *********************/
307  this.hide=function(){
308   //calendar.clearEventKey();
309   calendar.calendarPad.style.display="none";
310  }
311  /**//************** 从这里开始 *********************/
312  this.setup=function(defaultDate){
313   calendar.addCalendarPad();
314   calendar.addCalendarBoard();
315   calendar.setDefaultDate();
316  }
317  /**//************** 关于AgetimeCalendar *********************/
318  this.about=function(){
319   /**//*//alert("Agetime Calendar V1.0\n\nwww.agetime.com\n");
320   popLeft = calendar.calendarPad.style.pixelLeft+4;
321   popTop = calendar.calendarPad.style.pixelTop+25;
322   var popup = window.createPopup();
323   var popupBody = popup.document.body;
324   popupBody.style.cssText="border:solid 2 outset;font-size:9pt;background-color:#F0F0F0;";
325   var popHtml = "<span style='color:#336699;font-size:12pt;'><U>关于 AgetimeCalendar</U></span><BR><BR>";
326   popHtml+="版本: v1.0<BR>日期: 2004-03-13";
327   popupBody.innerHTML=popHtml;
328   popup.show(popLeft,popTop,240,136,document.body); */
329   var strAbout = "About AgetimeCalendar\n\n";
330   strAbout+="-\t: 关于\n";
331   strAbout+="x\t: 隐藏\n";
332   strAbout+="<<\t: 上一年\n";
333   strAbout+="<\t: 上一月\n";
334
335   strAbout+="今日\t: 返回当天日期\n";
336   strAbout+=">\t: 下一月\n";
337   strAbout+="<<\t: 下一年\n";
338   
339   alert(strAbout);
340  }
341
342  calendar.setup();
343 }
344
345
346