欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery写的日历(包括日历的样式及功能)

程序员文章站 2022-04-30 18:06:12
代码如下:

代码如下:


<!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>
<p>
普通调用:<input type="text" name="txt2" onclick="c.showmoreday = true; c.show(this);" /><br />
<p style="height: 262px">
</p>
按钮调用:<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'))" />
</p>
</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 += '<p author="alin" class="calendar" style="display:none;" onselectstart="return false" oncontextmenu="return false" id="calendar">\n';
str += '<p author="alin" class="cdrwatermark" id="cdrwatermark"></p><p id="cdrbody" style="position:absolute;left:0px;top:0px;z-index:2;width:140px;">';
str += this.getheader();
str += this.getbody();
str += '</p><p author="alin" id="cdrmenu" style="position:absolute;left:0px;top:0px;z-index:3;display:none;" onmouver="' + this.obj + '.showmenu(null);" onmouseout="' + this.obj + '.hidemenu();"></p></p>';
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;