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:[e-mail] 
* 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.getmonth(),this.date.getdate()); 

  str += '<tr author="alin" align="center"><td author="alin" width="13%" height="16" '; 
if(this.date.getfullyear() != _year) 
{ 
str += 'onmouseover="this.classname=\'menuover\'" onmouseout="this.classname=\'\'" '; 
} 
else 
{ 
  str += 'class="menuover"'; 
} 
str += 'onclick="' + this.obj + '.binddate(\'' + _date.toformatstring("-") + '\')">' + _year + '年</td>\n'; 
str += '</tr>'; 
} 

  str += '<tr author="alin" align="center"><td author="alin"><table author="alin" style="font-size:12px;width:100%;" cellspacing="0" cellpadding="0">\n'; 
  str += '<tr author="alin" align="center"><td author="alin" onmouseover="this.classname=\'menuover\'" onmouseout="this.classname=\'\'" onclick="'+this.obj+'.getyearmenu('+ (year - 10) + ')"><<</td>\n'; 
  str += '<td author="alin" onmouseover="this.classname=\'menuover\'" onmouseout="this.classname=\'\'" onclick="'+this.obj+'.getyearmenu('+ (year + 10) +')">>></td><tr>\n'; 
  str += '</table></td></tr>\n'; 
  str += '</table>'; 

  var _menu = getobjbyid("cdrmenu"); 
_menu.innerhtml = str; 

}; 

calendar.prototype.getmonthmenu = function() 
{ 

  var str = '<table author="alin" cellspacing="0" class="cdrmenu" cellpadding="0">\n'; 
  for(i = 1; i <= 12; i++) 
{  
var _date = new date(this.date.getfullyear(),i-1,this.date.getdate()); 

str += '</tr><tr author="alin" align="center"><td author="alin" height="16" '; 
if(this.date.getmonth() + 1 != i) 
{ 
str += 'onmouseover="this.classname=\'menuover\'" onmouseout="this.classname=\'\'" '; 
} 
else 
{ 
  str += 'class="menuover"'; 
} 
str += 'onclick="' + this.obj + '.binddate(\'' + _date.toformatstring("-") + '\')">'+i+'月</td></tr>\n'; 
} 
  str += '</table>'; 

  var _menu = getobjbyid("cdrmenu"); 
_menu.innerhtml = str;  
}; 

calendar.prototype.show = function() 
{ 
  if (arguments.length > 3 || arguments.length == 0) 
  { 
   alert("对不起！传入参数不对！" ); 
 return; 
}  

  var _date = null; 
  var _evobj = null; 
  var _initvalue = null  

  for(i = 0; i < arguments.length; i++) 
  { 
   if(typeof(arguments[i]) == "object" && arguments[i].type == "text") 
  {_date = arguments[i];} 
 else if(typeof(arguments[i]) == "object") 
  {_evobj = arguments[i];} 
 else if(typeof(arguments[i]) == "string") 
  {_initvalue = arguments[i];}  
  } 
  _evobj = _evobj || _date; 
inputobj = _date; 
targetobj = _evobj 

if(!_date){alert("传入参数错误!"); return;} 

  this.dateinput = _date; 

  _date = _date.value; 

  if(_date == "" && _initvalue) _date = _initvalue;  

  this.binddate(_date);     

  var _target = getposition(_evobj);  
  var _obj = getobjbyid("calendar"); 
  _obj.style.display = ""; 

  
  _obj.style.left = _target.x + 'px'; 
  if((document.body.clientheight - (_target.y + _evobj.clientheight)) >= _obj.clientheight) 
  {     
   _obj.style.top = (_target.y + _evobj.clientheight) + 'px'; 
} 
else 
{   
    _obj.style.top = (_target.y - _obj.clientheight) + 'px'; 
} 

}; 


calendar.prototype.hide = function() 
{ 
  var obj = getobjbyid("calendar"); 
obj.style.display = "none";  
}; 

calendar.prototype.binddate = function(date) 
{ 

var _monthdays = new array(31,30,31,30,31,30,31,31,30,31,30,31); 
var _arr = date.split('-'); 
  var _date = new date(_arr[0],_arr[1]-1,_arr[2]); 
if(isnan(_date)) _date = new date(); 
this.date = _date; 
this.bindheader(); 

var _year = _date.getfullyear(); 
var _month = _date.getmonth(); 
var _day = 1; 

var _startday = new date(_year,_month,1).getday(); 
var _previyear = _month == 0 ? _year - 1 : _year; 
var _previmonth = _month == 0 ? 11 : _month - 1; 
var _previday = _monthdays[_previmonth]; 
if (_previmonth == 1) _previday =((_previyear%4==0)&&(_previyear%100!=0)||(_previyear%400==0))?29:28; 
_previday -= _startday - 1; 
var _nextday = 1; 

_monthdays[1] = ((_year%4==0)&&(_year%100!=0)||(_year%400==0))?29:28; 

for(i = 0; i < 40; i++) 
{ 
  var _dayelement = getobjbyid("cdrday" + i); 

_dayelement.onmouseover = function(this.obj + ".onmouseover(this)"); 
_dayelement.onmouseout = function(this.obj + ".onmouseout(this)"); 
_dayelement.onclick = function(this.obj + ".onclick(this)"); 
this.onmouseout(_dayelement); 
_dayelement.style.color = ""; 

if(i < _startday) 
{ 
  //获取上一个月的日期 
if(this.showmoreday) 
{ 
  var _previdate = new date(_year,_month - 1,_previday); 
  _dayelement.innerhtml = _previday; 
  _dayelement.title = _previdate.toformatstring("yyyy年mm月dd日"); 
    _dayelement.value = _previdate.toformatstring("-"); 
  _dayelement.style.color = this.style.moredaycolor; 

    _previday++; 

}else 
{ 
  _dayelement.innerhtml = ""; 
    _dayelement.title = ""; 
} 

} 
else if(_day > _monthdays[_month]) 
{ 
  //获取下个月的日期 
  if(this.showmoreday) 
{ 
 var _nextdate = new date(_year,_month + 1,_nextday); 
 _dayelement.innerhtml = _nextday; 
 _dayelement.title = _nextdate.toformatstring("yyyy年mm月dd日"); 
   _dayelement.value = _nextdate.toformatstring("-"); 
 _dayelement.style.color = this.style.moredaycolor; 

   _nextday++;   
}else 
{ 
  _dayelement.innerhtml = ""; 
    _dayelement.title = ""; 
} 
} 
else if(i >= new date(_year,_month,1).getday() && _day <= _monthdays[_month]) 
{ 
      //获取本月日期 
  _dayelement.innerhtml = _day; 

  if(_day == _date.getdate()) 
  { 
   this.onmouseover(_dayelement); 
 _dayelement.onmouseover = function("");  
   _dayelement.onmouseout = function("");      
  } 

   
  if(this.isholiday(_year,_month,_day)) 
  { 
   _dayelement.style.color = this.style.bodyholidayfontcolor;   
  } 
  var _curdate = new date(_year, _month, _day); 
  _dayelement.title = _curdate.toformatstring("yyyy年mm月dd日"); 
  _dayelement.value = _curdate.toformatstring("-"); 

  _day++; 

} 
else 
{ 
  _dayelement.innerhtml = ""; 
  _dayelement.title = ""; 
} 

} 

var _menu = getobjbyid("cdrmenu"); 
_menu.style.display = "none"; 

}; 


calendar.prototype.bindheader = function() 
{ 
  var _curyear = getobjbyid("currentyear"); 
  var _curmonth = getobjbyid("currentmonth"); 
  var _watermark = getobjbyid("cdrwatermark"); 

  _curyear.innerhtml = this.date.toformatstring("yyyy年"); 
  _curmonth.innerhtml = this.date.toformatstring("mm月"); 
  _watermark.innerhtml = this.date.getfullyear();   

}; 

calendar.prototype.gettoday = function() 
{ 
  var _date = new date(); 
  this.binddate(_date.toformatstring("-")); 
}; 

calendar.prototype.isholiday = function(year,month,date) 
{ 
  var _date = new date(year,month,date); 
  return (_date.getday() == 6 || _date.getday() == 0); 
}; 

calendar.prototype.onmouseover = function(obj) 
{ 
  obj.classname = "dayover"; 
}; 


calendar.prototype.onmouseout = function(obj) 
{ 
  obj.classname = "dayout"; 
}; 

calendar.prototype.onclick = function(obj) 
{  
 if(obj.innerhtml != "") this.dateinput.value = obj.value; 
 this.hide(); 
}; 

calendar.prototype.onchangeyear = function(isnext) 
{ 
  var _year = this.date.getfullyear(); 
  var _month = this.date.getmonth() + 1; 
  var _date = this.date.getdate(); 

  if(_year > 999 && _year <10000) 
  { 
    if(isnext){_year++;}else{ _year --;} 
  } 
  else 
  { 
   alert("年份超出范围（1000-9999）!"); 
  } 
  this.binddate(_year + '-' + _month + '-' + _date); 
}; 

calendar.prototype.onchangemonth = function(isnext) 
{ 
  var _year = this.date.getfullyear(); 
  var _month = this.date.getmonth() + 1; 
  var _date = this.date.getdate(); 

  if(isnext){ _month ++;} else {_month--;} 

  if(_year > 999 && _year <10000) 
  { 
    if(_month < 1) {_month = 12; _year--;} 
if(_month > 12) {_month = 1; _year++;} 
  } 
  else 
  { 
   alert("年份超出范围（1000-9999）!"); 
  }  

  this.binddate(_year + '-' + _month + '-' + _date); 
}; 

calendar.prototype.showmenu = function(isyear) 
{ 
 var _menu = getobjbyid("cdrmenu"); 

 if(isyear != null) 
 { 

var _obj = (isyear)? getobjbyid("currentyear") : getobjbyid("currentmonth"); 

if(isyear) 
{ 
  this.getyearmenu(this.date.getfullyear() - 5);   
} 
else 
{ 
  this.getmonthmenu();   
} 

_menu.style.top = (_obj.offsettop + _obj.offsetheight) + 'px'; 
_menu.style.left = _obj.offsetleft + 'px'; 
_menu.style.width = _obj.offsetwidth + 'px'; 

  } 

if (this.timer != null) cleartimeout(this.timer); 

_menu.style.display=""; 

} 

calendar.prototype.hidemenu = function() 
{ 
  var _obj = getobjbyid("cdrmenu"); 
  this.timer = window.settimeout(function(){_obj.style.display='none';},500); 
} 

number.prototype.nan0 = function() 
{ 
  return isnan(this) ? 0 : this; 
} 

date.prototype.toformatstring = function(fs) 
{ 
  if(fs.length == 1) 
  { 
   return this.getfullyear() + fs + (this.getmonth() + 1) + fs + this.getdate(); 
  } 
  fs = fs.replace("yyyy",this.getfullyear()); 
  fs = fs.replace("mm",(this.getmonth() + 1)); 
  fs = fs.replace("dd",this.getdate()); 
  return fs; 
} 

/******************************************公用方法及变量********************************************************/ 
var inputobj = null; //输入对象 
var targetobj = null; //单击目标对象 
var dragobj = null; //拖动目标对象 
var mouseoffset = null; //拖动目标的位置 

//获取对象 
function getobjbyid(obj) 
{ 
  if(document.getelementbyid) 
  { 
   return document.getelementbyid(obj); 
  } 
  else 
  { 
   alert("浏览器不支持!"); 
  } 
} 

//获取鼠标位置 
function mousecoords(ev) 
{ 
if(ev.pagex || ev.pagey){ 
return {x:ev.pagex, y:ev.pagey}; 
} 
return { 
x:ev.clientx + document.body.scrollleft - document.body.clientleft, 
y:ev.clienty + document.body.scrolltop - document.body.clienttop 
}; 
} 

//获取目标的绝对位置 
function getposition(e) 
{ 
var left = 0; 
var top = 0; 
while (e.offsetparent){ 
left += e.offsetleft + (e.currentstyle?(parseint(e.currentstyle.borderleftwidth)).nan0():0); 
top += e.offsettop + (e.currentstyle?(parseint(e.currentstyle.bordertopwidth)).nan0():0); 
e   = e.offsetparent; 
} 

left += e.offsetleft + (e.currentstyle?(parseint(e.currentstyle.borderleftwidth)).nan0():0); 
top += e.offsettop + (e.currentstyle?(parseint(e.currentstyle.bordertopwidth)).nan0():0); 

return {x:left, y:top}; 
} 
//获取鼠标的偏移值 
function getmouseoffset(target, ev) 
{ 
ev = ev || window.event; 
var docpos  = getposition(target); 
var mousepos = mousecoords(ev); 
return {x:mousepos.x - docpos.x, y:mousepos.y - docpos.y}; 
} 

//关闭日历 
function closecalendar(evt){ 

evt = evt || window.event; 
var _target= evt.target || evt.srcelement; 

if(!_target.getattribute("author") && _target != inputobj && _target != targetobj) 
{ 
  getobjbyid("calendar").style.display = "none";   
}  
} 
//拖动日历开始 
function dragstart(evt){ 

  evt = evt || window.event; 
var _target= evt.target || evt.srcelement; 

if(_target.getattribute("author") == "alin_bar") 
{   
  dragobj = getobjbyid("calendar");   
  mouseoffset = getmouseoffset(dragobj, evt); 

}  
} 
//拖动日历中 
function drag(evt) 
{ 
  evt = evt || window.event; 
if(dragobj) 
{   
 var mousepos = mousecoords(evt); 
 dragobj.style.left = (mousepos.x - mouseoffset.x) + 'px'; 
 dragobj.style.top = (mousepos.y - mouseoffset.y) + 'px';   
} 
} 
//拖动结束 
function dragend(evt) 
{ 
  dragobj = null;   
} 

/*****end 公用方法***************/ 


document.onclick = closecalendar; 

document.onmousedown = dragstart; 

document.onmousemove = drag; 

document.onmouseup = dragend; 


/*****************结束********************/