日期:2014-05-16  浏览次数:20488 次

简陋的JS日历
/* 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>";