jQuery写的日历（包括日历的样式及功能）

复制代码代码如下:
<！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"> ";
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"> ";
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;} ";
str += ".cdrHeader{background-color:"+ this.style.headerBackColor +";width:140px;height:22px;font-size:12px;color:"+this.style.headerFontColor+";} ";
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;} ";
str += ".cdrBodyBar{background-color:" + this.style.bodyBarBackColor + ";font-size:12px;color:" + this.style.bodyBarFontColor + ";width:140px;height:20px;} ";
str += ".cdrBody{width:140px;height:122px！important; height :110px;font-size:12px;cursor:pointer;color:" + this.style.bodyFontColor + ";} ";
str += ".dayOver{height:16px;padding:0px;border:1px solid black;background-color:#f4f4f4;} ";
str += ".dayOut{padding:1px;border:none;height:16px;} ";
str += ".menuOver{background-color:"+this.style.headerBackColor+";color:"+this.style.headerFontColor+";font-size:12px;} ";
str += ".headerOver{border:1px solid black;background-color:#f4f4f4;color:black;cursor:default;} ";
str += ".cdrMenu{font-size:12px;border:1px solid #000000;background-color:#ffffff;cursor:default;width:100%} ";
str += "html>body #Calendar{width:142px;174px;}";
str += "</style> ";
return str;
};
Calendar.prototype.getHeader = function（）
{
var str = "<table Author="alin" class="cdrHeader" cellSpacing="2" cellPadding="0"><tr Author="alin" align="center"> ";
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> ";
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> ";
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> ";
str += "<td Author="alin" onmouseover="this.className="headerOver"" id="currentMonth" onclick="" + this.Obj + ".showMenu（false）;" onmouseout="" + this.Obj + ".hideMenu（）;this.className="";">0</td> ";
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> ";
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> ";
str += "</table> ";
return str;
};
Calendar.prototype.getBody = function（）
{
var n = 0;
var str = this.getBodyBar（）;
str += "<table Author="alin" class="cdrBody" cellSpacing="2" cellPadding="0"> ";
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> ";
}
str += "</tr>";
}
str += "</table> ";
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> ";
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"> ";
var day = new Array（"日","一","二","三","四","五","六"）;
for（i = 0; i < 7; i++）
{
str += "<td Author="alin_bar">" + day[i] + "</td> ";
}
str += "</tr></table>";
return str;
}
Calendar.prototype.getYearMenu = function（year）
{
var str = "<table Author="alin" cellSpacing="0" class="cdrMenu" cellPadding="0"> ";
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> ";
str += "</tr>";
}
str += "<tr Author="alin" align="center"><td Author="alin"><table Author="alin" style="font-size:12px;width:100%;" cellSpacing="0" cellPadding="0"> ";
str += "<tr Author="alin" align="center"><td Author="alin" onmouseover="this.className="menuOver"" onmouseout="this.className=""" onclick=""+this.Obj+".getYearMenu（"+ （year - 10） + "）"><<</td> ";
str += "<td Author="alin" onmouseover="this.className="menuOver"" onmouseout="this.className=""" onclick=""+this.Obj+".getYearMenu（"+ （year + 10） +"）">>></td><tr> ";
str += "</table></td></tr> ";
str += "</table>";
var _menu = getObjById（"cdrMenu"）;
_menu.innerHTML = str;
};
Calendar.prototype.getMonthMenu = function（）
{
var str = "<table Author="alin" cellSpacing="0" class="cdrMenu" cellPadding="0"> ";
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> ";
}
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;