JS日历 推荐

qq1006661

qq1006661

2016-02-19 11:49

有一种朋友不在生活里,却在生命力;有一种陪伴不在身边,却在心间。图老师即在大家的生活中又在身边。这么贴心的服务你感受到了吗?话不多说下面就和大家分享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"/divdiv id="cdrBody" style="position:absolute;left:0px;top:0px;z-index:2;width:140px;"'; 
  str += this.getHeader(); 
  str += this.getBody();  
  str += '/divdiv 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 += 'htmlbody #Calendar{width:142px;174px;}'; 
str += '/stylen'; 
return str; 

}; 

Calendar.prototype.getHeader = function() 

  var str = 'table Author="alin" class="cdrHeader" cellSpacing="2" cellPadding="0"tr Author="alin" style="text-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);"/tdn'; 
str += 'td Author="alin" onmouseover="this.className='headerOver'" onmouseout="this.className=''" id="previousMonth" title="上一月份" style="cursor:pointer;width:10px;" onclick="'+this.Obj+'.onChangeMonth(false);"/tdn'; 
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/tdn'; 
str += 'td Author="alin" onmouseover="this.className='headerOver'" id="currentMonth" onclick="' + this.Obj + '.showMenu(false);" onmouseout="' + this.Obj + '.hideMenu();this.className='';"0/tdn'; 
str += 'td Author="alin" onmouseover="this.className='headerOver'" onmouseout="this.className=''" id="nextMonth" title="下一月份" style="cursor:pointer;width:10px;" onclick="'+this.Obj+'.onChangeMonth(true);"/tdn'; 
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/trn'; 
str += '/tablen'; 
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" style="text-align:center"'; 
for(j = 0; j  7; j++) 

str += 'td Author="alin" class="dayOut" id="cdrDay'+(n++)+'" width="13%"/tdn'; 

str += '/tr'; 

  str += '/tablen'; 
  str += 'table Author="alin" class="cdrBodyBar" cellSpacing="2" cellPadding="0"tr style="text-align:center" Author="alin"td Author="alin" style="cursor:pointer;" onclick="'+this.Obj+'.getToday();"今天:'+new Date().toFormatString("yyyy年mm月dd日")+'/td/tr/tablen'; 
  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" style="text-align:center"n'; 
  var day = new Array('日','一','二','三','四','五','六'); 
  for(i = 0; i  7; i++) 
  { 
   str += 'td Author="alin_bar"' + day[i] + '/tdn';   
  } 
  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" style="text-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 + '年/tdn'; 
str += '/tr'; 


  str += 'tr Author="alin" style="text-align:center"td Author="alin"table Author="alin" style="font-size:12px;width:100%;" cellSpacing="0" cellPadding="0"n'; 
  str += 'tr Author="alin" style="text-align:center"td Author="alin" onmouseover="this.className='menuOver'" onmouseout="this.className=''" onclick="'+this.Obj+'.getYearMenu('+ (year - 10) + ')"/tdn'; 
  str += 'td Author="alin" onmouseover="this.className='menuOver'" onmouseout="this.className=''" onclick="'+this.Obj+'.getYearMenu('+ (year + 10) +')"/tdtrn'; 
  str += '/table/td/trn'; 
  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 += '/trtr Author="alin" style="text-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/trn'; 

  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; 


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

展开更多 50%)
分享

猜你喜欢

JS日历 推荐

Web开发
JS日历 推荐

推荐一个小巧的JS日历

Web开发
推荐一个小巧的JS日历

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

九款安卓日历应用推荐

手机软件 应用软件
九款安卓日历应用推荐

js滚动条多种样式,推荐

Web开发
js滚动条多种样式,推荐

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

js技巧收集(200多个) 超强推荐

Web开发
js技巧收集(200多个) 超强推荐

积家陀飞轮日历腕表推荐 积家陀飞轮日历腕表介绍

积家 积家陀飞轮日历腕表 积家陀飞轮日历腕表介绍
积家陀飞轮日历腕表推荐 积家陀飞轮日历腕表介绍

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

C 语言基础教程(我的C之旅开始了)[九]

C 语言基础教程(我的C之旅开始了)[九]

在 IE 中调用 javascript 打开 Excel 表

在 IE 中调用 javascript 打开 Excel 表
下拉加载更多内容 ↓