jQuery寫的日歷(包括日歷的樣式及功能)

2019-11-20 22:46:57

字體：大中小

來源：轉載

供稿：網友

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title></title> 
<script src="../JS/connotation.js" type="text/javascript"></script> 
<script type="text/javascript"> 
var c = new Calendar("c"); 
document.write(c); 
</script> 
</head> 
<body> 
<div> 
普通調用:<input type="text" name="txt2" onclick="c.showMoreDay = true; c.show(this);" /><br /> 
<div style="height: 262px"> 
</div> 
按鈕調用:<input type="text" name="btntxt" id="btntxt" /><input name="button" value="*" 
id="button" type="button" onclick="c.showMoreDay = true; c.show(getObjById('btntxt'), '1982-1-1', this)" /> 
<br /> 
<input type="text" name="btntxt3" id="btntxt3" /><input name="button3" value="*" 
id="button3" type="button" onclick="c.showMoreDay = true; c.show(this, getObjById('btntxt3'))" /> 
</div> 
</body> 
</html> 

需要的jQuery文件

復制代碼代碼如下:

 
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)&&(_previYear0!=0)||(_previYear@0==0))?29:28; 
_previDay -= _startDay - 1; 
var _nextDay = 1; 
_monthDays[1] = ((_year%4==0)&&(_year0!=0)||(_year@0==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.getElementByIdx_x) 
{ 
return document.getElementByIdx_x(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; 
} 
document.onclick = closeCalendar; 
document.onmousedown = dragStart; 
document.onmousemove = drag; 
document.onmouseup = dragEnd; 