简陋的JS日历 J#

/* author:zheyiw 
* date:23/7/2009 
* version:1.1 
* 使用举例：  onclick="ShowCalendar('InputBoxID','outputBoxID')" 
*             InputBoxID是按钮控件  outputBoxID是日期输出的文本框 
*/ 
/* 历史版本信息： 
* v1  原始版本 
* v1.1 添加拖动功能， 高亮显示当天，添加：加减年份 
*/ 
//定义一块区域 
document.writeln("<div id='Calendar' style='position:absolute; z-index:1; visibility: hidden; filter:\"progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#999999,strength=3)\"'></div>"); 
//document.writeln("<div id='Calendar' style='position:absolute; z-index:1; visibility: hidden; '></div>"); 
//document.writeln('<iframe id="Calendar" name=wpCalendarLayer frameborder=0 onmouseout="wpCalendar.correctPosition()" style="position: absolute; width: 153; height: 208; z-index: 9998; display: none"></iframe>'); 
//输出数据变量 
var outputData; 
//确定日历位置，显示当前日期 
function ShowCalendar(InputBox,outputBox) 
{ 
outputData=document.getElementById(outputBox); 
var x,y; 
//  var o=eval("document.all."+InputBox);  // var o=eval("document.getElementById(InputBox)"); 
//控制控件出现的位置 
var o=document.getElementById(InputBox); //传入字符串时   
    x=o.offsetLeft; 
    y=o.offsetTop; 
    while(o=o.offsetParent) 
    { 
        x+=o.offsetLeft; 
        y+=o.offsetTop; 
    } 
    document.getElementById("Calendar").style.left=x+2+"px"; 
    document.getElementById("Calendar").style.top=y+20+"px"; 
    document.getElementById("Calendar").style.visibility="visible";  //显示div 
     
    var objdate=new Date(); 
MainCalendar(objdate.getYear(),objdate.getMonth(),objdate.getDate()); 
} 
//绘制日历 
function MainCalendar(year,month,day) 
{ 
    var intLoop,intWeeks,intDays; 
    var DivContent="";     
    //插入一个表格 
var objdate=new Date(); 
var firstDay=new Date(year, month, 1).getDay();  //得到第一天是星期几 
var maxday=new Date(year, month+1, 0).getDate();  //得到当前月的天数 
     
    DivContent+="<table border='0' cellspacing='0' style='border:1px solid #0066FF; background-color:#EDF2FC'>"; 
    var strMonthMin="monthMin("+ year +","+ month +","+ day +")"; 
    var strMonthAdd="monthAdd("+ year +","+ month +","+ day +")"; 
    var strYearMin="yearMin("+ year +","+ month +","+ day +")"; 
    var strYearAdd="yearAdd("+ year +","+ month +","+ day +")"; 
    DivContent+="<tr><td align=center ><input type='button' onclick="+ strMonthAdd +" value='<'/> </td>" 
    DivContent+="<td align=center ><input type='button' onclick="+ strYearMin  +" value='<<'/> </td>"          //年份减 
    DivContent+="<td align=center colspan=3>"+ year +":"+ (month+1) +"</td>"                                 
    DivContent+="<td align=center ><input type='button' onclick="+ strYearAdd  +" value='>>'/> </td> "        //年份加 
    DivContent+="<td align=center ><input type='button' onclick="+ strMonthMin  +" value='>'/> </td></tr>"; 
    DivContent+="<tr id='moveTR' style='cursor: move ' onmousedown='DragStart()' onmouseup='DragEnd()'><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td><tr>"; 
     
var d=1,dd=1; 
for(var i=0;i<6;i++) 
{ 
  DivContent+="<tr>"; 
  var strOutData="outData(this,"+ year +","+ month +")"; 
  for(var j=1;j<8;j++) 
  { 
   if(d<=firstDay || dd>maxday)  { DivContent+="<td> </td>";} 
   else if(dd==Number(objdate.getDate()) && month==Number(objdate.getMonth()) && year==Number(objdate.getYear())) { 
    DivContent+="<td bgcolor='silver' onmouseover='MouseOver(this)' onmouseout='MouseOut(this)' onclick="+strOutData+">"+dd+"</td>"; 
    dd++; 
   } 
   else { 
    DivContent+="<td onmouseover='MouseOver(this)' onmouseout='MouseOut(this)' onclick="+strOutData+">"+dd+"</td>"; 
    dd++; 
   } 
   d++; 
  } 
  DivContent+="</tr>"; 
  } 
    DivContent+="</table>"; 
     
    //在区域中插入html 
    document.getElementById("Calendar").innerHTML=DivContent; 
    // newCalendar(); 
} 
/*开始日历拖动*/ 
function DragStart() 
{ 
var o =document.getElementById("Calendar"); 
o.onselectstart = function() 
{ 
    return(false); 
}; 

o.onmousedown = function(e) 
{ 
//   e = e||window.event;  //  var x=e.layerX||e.offsetX; //   var y=e.layerY||e.offsetY;  // e = window.event; // var x=e.offsetX; //var y=e.offsetY; 
var xx = mouseAbsolutePostion(e).x; //鼠标绝对位置 
var yy = mouseAbsolutePostion(e).y; // 
var ox = o.offsetLeft ;//  div绝对位置 
var oy = o.offsetTop;// 
var x=xx-ox; 
var y=yy-oy; 
    o.onmousemove = function(e) 
    {//鼠标移动时计算控件位置 
      e=window.event; 
      o.style.left=(e.clientX-x)+"px"; 
      o.style.top=(e.clientY-y)+"px";       
    }; 
     
    o.onmouseup=function() 
    { 
      o.onmousemove=null; 
    }; 
}; 
} 
//关于这个拖动函数的理解：function DragStart()就是一个对象，当鼠标按下后就创建了这个对象，并且从来没有销毁。 
//o.onmousedown o.onmousemove  o.onmouseup三个函数被激活。 
//所以在日历没有被拖动前，在其他地方是不能拖动的。 
//但日历被拖动过一次后，在其他地方o.onmousedown会开始响应，重新计算坐标，作出移动动作。 
function mouseAbsolutePostion(evt) 
{ 
evt = event ? event : window.event; 
return {x:evt.clientX,y:evt.clientY}; 
} 

/*结束日历拖动*/   
function DragEnd() 
{ 
} 
   
//月份增加 
function monthAdd(year,month,day) 
{ 
var DivContent=""; 
if (month==11) {month=0;year++;} 
else {month++;} 
document.getElementById("Calendar").innerHTML=DivContent; 
MainCalendar(year,month,day); 
} 
//月份减少 
function monthMin(year,month,day) 
{ 
var DivContent=""; 
if (month==0) {month=11;year--;} 
else {month--;} 
document.getElementById("Calendar").innerHTML=DivContent; 
MainCalendar(year,month,day); 
} 
//年份增加 
function yearAdd(year,month,day) 
{ 
var DivContent=""; 
document.getElementById("Calendar").innerHTML=DivContent; 
MainCalendar(year+1,month,day); 
} 
//年份减少 
function yearMin(year,month,day) 
{ 
var DivContent=""; 
document.getElementById("Calendar").innerHTML=DivContent; 
MainCalendar(year-1,month,day); 
} 
//鼠标经过 
function MouseOver(obj) 
{ 
  obj.style.background="blue";   
} 
//鼠标离开 
function MouseOut(obj) 
{ 
  obj.style.background="#EDF2FC"; 
} 
//输出数据 
function outData(obj,year,month) 
{ 
var a=year+"-"+(month+1)+"-"+obj.innerText; 
outputData.value=a; 
document.getElementById("Calendar").innerHTML=""; 
}