jQuery写的日历(包括日历的样式及功能)_Javascript教程-查字典教程网
jQuery写的日历(包括日历的样式及功能)
jQuery写的日历(包括日历的样式及功能)
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:varc=newCalendar("c");document.write(c);普通调用:按钮调用:需要的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" /><br />

<div>

</div>

按钮调用:<input type="text" name="btntxt" id="btntxt" /><input name="button" value="*"

id="button" type="button" />

<br />

<input type="text" name="btntxt3" id="btntxt3" /><input name="button3" value="*"

id="button3" type="button" />

</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" onselectstart="return false" oncontextmenu="return false" id="Calendar">n';

str += '<div Author="alin" id="cdrWatermark"></div><div id="cdrBody">';

str += this.getHeader();

str += this.getBody();

str += '</div><div Author="alin" id="cdrMenu" 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" cellSpacing="2" cellPadding="0"><tr Author="alin" align="center">n';

str += '<td Author="alin" onmouseover="this.className='headerOver'" onmouseout="this.className=''" id="previousYear" title="上一年份"><<</td>n';

str += '<td Author="alin" onmouseover="this.className='headerOver'" onmouseout="this.className=''" id="previousMonth" title="上一月份"><</td>n';

str += '<td Author="alin" onmouseover="this.className='headerOver'" id="currentYear" onmouseout="' + this.Obj + '.hideMenu();this.className='';">0</td>n';

str += '<td Author="alin" onmouseover="this.className='headerOver'" id="currentMonth" onmouseout="' + this.Obj + '.hideMenu();this.className='';">0</td>n';

str += '<td Author="alin" onmouseover="this.className='headerOver'" onmouseout="this.className=''" id="nextMonth" title="下一月份">></td>n';

str += '<td Author="alin" onmouseover="this.className='headerOver'" onmouseout="this.className=''" id="nextYear" title="下一年份">>></td></tr>n';

str += '</table>n';

return str;

};

Calendar.prototype.getBody = function()

{

var n = 0;

var str = this.getBodyBar();

str += '<table Author="alin" 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" id="cdrDay'+(n++)+'" width="13%"></td>n';

}

str += '</tr>';

}

str += '</table>n';

str += '<table Author="alin" cellSpacing="2" cellPadding="0"><tr align="center" Author="alin"><td Author="alin">今天:'+new Date().toFormatString("yyyy年mm月dd日")+'</td></tr></table>n';

return str;

};

Calendar.prototype.getBodyBar = function()

{

var str = '<table Author="alin_bar" id="cdrBodyBar" 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" 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" cellSpacing="0" cellPadding="0">n';

str += '<tr Author="alin" align="center"><td Author="alin" onmouseover="this.className='menuOver'" onmouseout="this.className=''"><<</td>n';

str += '<td Author="alin" onmouseover="this.className='menuOver'" onmouseout="this.className=''">>></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" 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;

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类