JS日历推荐_时间日期-js教程-PHP中文网

首页

web前端

js教程

JS日历推荐_时间日期

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 07:23 PM

两年前写过一个日历,可是兼容性不好. 这次重新写了一次.
兼容多种浏览器
了解了不少东东，特别是对于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 += '\n';  
  str += '
';  
  str += this.getHeader();  
  str += this.getBody();   
  str += '
';  
  return str;  
};  

Calendar.prototype.getStyle = function()  
{  
  var str = '\n';  
return str;  

};  

Calendar.prototype.getHeader = function()  
{  
  var str = '\n';  
str += '\n';  
str += '\n';  
str += '\n';  
str += '\n';  
str += '
\n';  
str += '
\n';  
str += '
00>>>
\n';  
return str;  
};  

Calendar.prototype.getBody = function()  
{  
  var n = 0;  
  var str = this.getBodyBar();  
  str += '\n';   
  for(i = 0; i {    
  str += '';  
for(j = 0; j {  
str += '\n';  
}  
str += '';  
}  
  str += '
\n';  
  str += '今天：'+new Date().toFormatString("yyyy年mm月dd日")+'
\n';  
  return str;  
};  

Calendar.prototype.getBodyBar = function()  
{  
  var str = '\n';  
  var day = new Array('日','一','二','三','四','五','六');  
  for(i = 0; i   {  
   str += '\n';    
  }  
  str += '' + day[i] + '
';  
  return str;   
}  

Calendar.prototype.getYearMenu = function(year)  
{  

  var str = '\n';  
  for(i = 0; i {    
  var _year = year + i;  
var _date = new Date(_year,this.date.getMonth(),this.date.getDate());  

  str += '\n';  
str += '';  
}  

  str += '\n';  
  str += '
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 + '年
\n';  
  str += '\n';  
  str += '
\n';  
  str += '
>>
';  

  var _menu = getObjById("cdrMenu");  
_menu.innerHTML = str;  

};  

Calendar.prototype.getMonthMenu = function()  
{  

  var str = '\n';  
  for(i = 1; i {   
var _date = new Date(this.date.getFullYear(),i-1,this.date.getDate());  

str += '\n';  
}  
  str += '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+'月
';  

  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   {  
   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 {  
  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 {  
  //获取上一个月的日期  
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 {  
      //获取本月日期  
  _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   {  
    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   {  
    if(_month 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;  


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