JS日历 推荐

答案：两年前写过一个日历,可是兼容性不好. 这次重新写了一次.  
兼容多种浏览器  
了解了不少东东，特别是对于W3C标准化．  
如　FF和IE　对box模型的理解不同  
box.style{width:100;border 1px;}  
ie理解　为　box.width = 100  
ff 理解　为 box.width = 100 + 1*2 = 102  
可以使用这种方法使两种浏览器都可以正常浏览  
box.style{width:100!important; width /**/:120px;border 1px;}  
注意　width(空格)/**/
 下载此文件
复制代码 代码如下:

/***********************  

* 创建对象  var c = new Calendar("c"); document.write(c);  
* 调用方法 c.show(arg1,arg2,arg3)  
* 参数1: 文本输入框(必填). 如 onfocus="c.show(this)";  
* 参数2: 按钮或其它可用单击事件的HTML元素(如果使用按钮方式则必填).  
     如 onclick="c.show(this,c.getObjById(*))" *=文本输入框名称  
* 参数3: 如果没有文本框没有值则使用该值初始化日历(选填).  
     如 onfocus="c.show(this,'2006-01-01')  

* 注: 参数顺序不分先后. MSIE6/Opera8/FireFox1.5 下测试通过  

   

***如果您使用本日历控件 请保留该信息 谢谢! *****   
* http://2lin.net  
* Email:caoailin@gmail.com  
* QQ:38062022  
* Creation date: 2006-11-22  
************************************/  

function Calendar(objName)   
{  
this.style = {  

  borderColor    : "#909eff", //边框颜色  
  headerBackColor   : "#909EFF", //表头背景颜色  
  headerFontColor   : "#ffffff", //表头字体颜色  
  bodyBarBackColor  : "#f4f4f4", //日历标题背景色  
  bodyBarFontColor  : "#000000", //日历标题字体色  
  bodyBackColor   : "#ffffff", //日历背景色  
  bodyFontColor      : "#000000", //日历字体色  
  bodyHolidayFontColor   : "#ff0000", //假日字体色  
  watermarkColor   : "#d4d4d4", //背景水印色  
  moreDayColor       : "#cccccc"  

};  

this.showMoreDay = false; //是否显示上月和下月的日期  

this.Obj = objName;  
this.date = null;  

this.mouseOffset = null;  
this.dateInput = null;  
this.timer = null;  

};  

Calendar.prototype.toString = function()  
{   
  var str = this.getStyle();  
  str += '<div Author="alin" class="calendar" style="display:none;" onselectstart="return false" oncontextmenu="return false" id="Calendar">\n';  
  str += '<div Author="alin" class="cdrWatermark" id="cdrWatermark"></div><div id="cdrBody" style="position:absolute;left:0px;top:0px;z-index:2;width:140px;">';  
  str += this.getHeader();  
  str += this.getBody();   
  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>';  
  return str;  
};  

Calendar.prototype.getStyle = function()  
{  
  var str = '<style type="text/css">\n';  
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';  
str += '.cdrHeader{background-color:'+ this.style.headerBackColor +';width:140px;height:22px;font-size:12px;color:'+this.style.headerFontColor+';}\n';  
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';  
str += '.cdrBodyBar{background-color:' + this.style.bodyBarBackColor + ';font-size:12px;color:' + this.style.bodyBarFontColor + ';width:140px;height:20px;}\n';  
str += '.cdrBody{width:140px;height:122px!important; height /**/:110px;font-size:12px;cursor:pointer;color:' + this.style.bodyFontColor + ';}\n';  
str += '.dayOver{height:16px;padding:0px;border:1px solid black;background-color:#f4f4f4;}\n';  
str += '.dayOut{padding:1px;border:none;height:16px;}\n';  
  str += '.menuOver{background-color:'+this.style.headerBackColor+';color:'+this.style.headerFontColor+';font-size:12px;}\n';  
str += '.headerOver{border:1px solid black;background-color:#f4f4f4;color:black;cursor:default;}\n';  
str += '.cdrMenu{font-size:12px;border:1px solid #000000;background-color:#ffffff;cursor:default;width:100%}\n';  
str += 'html>body #Calendar{width:142px;174px;}';  
str += '</style>\n';  
return str;  

};  

Calendar.prototype.getHeader = function()  
{  
  var str = '<table Author="alin" class="cdrHeader" cellSpacing="2" cellPadding="0"><tr Author="alin" align="center">\n';  
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';  
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';  
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';  
str += '<td Author="alin" onmouseover="this.className=\'headerOver\'" id="currentMonth" onclick="' + this.Obj + '.showMenu(false);" onmouseout="' + this.Obj + '.hideMenu();this.className=\'\';">0</td>\n';  
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';  
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';  
str += '</table>\n';  
return str;  
};  

Calendar.prototype.getBody = function()  
{  
  var n = 0;  
  var str = this.getBodyBar();  
  str += '<table Author="alin" class="cdrBody" cellSpacing="2" cellPadding="0">\n';   
  for(i = 0; i < 6; i++)  
{    
  str += '<tr Author="alin" align="center">';  
for(j = 0; j < 7; j++)  
{  
str += '<td Author="alin" class="dayOut" id="cdrDay'+(n++)+'" width="13%"></td>\n';  
}  
str += '</tr>';  
}  
  str += '</table>\n';  
  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';  
  return str;  
};  

Calendar.prototype.getBodyBar = function()  
{  
  var str = '<table Author="alin_bar" id="cdrBodyBar" class="cdrBodyBar" style="cursor:move;" cellSpacing="2" cellPadding="0"><tr Author="alin_bar" align="center">\n';  
  var day = new Array('日','一','二','三','四','五','六');  
  for(i = 0; i < 7; i++)  
  {  
   str += '<td Author="alin_bar">' + day[i] + '</td>\n';    
  }  
  str += '</tr></table>';  
  return str;   
}  

Calendar.prototype.getYearMenu = function(year)  
{  

  var str = '<table Author="alin" cellSpacing="0" class="cdrMenu" cellPadding="0">\n';  
  for(i = 0; i < 10; i++)  
{    
  var _year = year + i;  
var _date = new Date(_year,this.date.getMont

上一个：找到一点可怜的关于dojo资料，谢谢作者！
下一个：IE中实现全屏广告代码，霸道无比.