查看效果:日历效果

<script>

var myc_x,myc_y;

var myc_timeset=null,myc_timeset1=null;

var divobj=null;

var inputname;

function mycalendar() //构建对象

{

var mydate = new date();

this.year = mydate.getfullyear();

this.month = mydate.getmonth()+1;

this.date = mydate.getdate();

this.format=yyyy-mm-dd;

this.style = mystyle(1);　

this.show = createcalendar;

this.input = createinput;

}

function mystyle(num) //设置样式

{

if(!num||isnan(num)){alert('参数不对,采用默认样式！');num=1;}

var style = new array();

style[1]=.week{background-color:#dfdfff;font-size:12px;width:140px;}

+.ds{width:140px;font-size:12px;cursor:hand}

+.mover{border:1px solid black;background-color:#f4f4f4;}

+.move1{border:1px solid #5d5d5d;background-color:#f4f4f4;color:#909eff;font-size:12px}

+.tit{background-color:#909eff;width:140px;font-size:12px;color:white;cursor:default}

+.cs{position:absolute;border:1px solid #909eff;width:142px;left:0px;top:0px;z-index:9999;}

+.shadow{position:absolute;left:0px;top:0px;font-family: arial black;font-size:50px;color:#d4d4d4;z-index:1;text-align:center;};

document.write(<style type='text/css'>);

document.write(style[num]);

document.write(</style>);

}

function createcalendar()

{

var week = new array('日','一','二','三','四','五','六');

document.write(<div class='cs' onselectstart='return false' oncontextmenu='return false' onmousedown='if(event.button==2)this.style.display=\none\' id='myc_div'><div class='shadow'></div><div style='position:absolute;left:0px;top:0px;z-index:1'>);

//创建头部

document.write(<table class='tit' id='myc_top' onmousedown='myc_x=event.x-parentnode.parentnode.style.pixelleft;myc_y=event.y-parentnode.parentnode.style.pixeltop;setcapture()' onmouseup='releasecapture();' onmousemove='mycmove(this.parentelement.parentelement);'><tr><td width=10 onmouseover='this.style.color=\black\' onmouseout='this.style.color=\\' onclick='cutyear()' style='font-family: webdings;cursor:hand;' title='减少年份'>7</td><td title='减少月份' onmouseover='this.style.color=\black\' onclick='cutmonth()' onmouseout='this.style.color=\\' width=10 style='font-family: webdings;cursor:hand;'>3</td><td align=center onmouseover=this.classname='move1'; onmouseout=this.classname='';divhidden(myc.parentelement.nextsibling); onclick='createyear(+this.year+,this);divshow(myc.parentelement.nextsibling);'></td><td align=center onclick='createmonth(+this.month+,this);divshow(myc.parentelement.nextsibling)' onmouseover=this.classname='move1'; onmouseout=this.classname='';divhidden(myc.parentelement.nextsibling);></td><td width=10 onmouseover='this.style.color=\black\' onmouseout='this.style.color=\\' onclick='addmonth()' style='font-family: webdings;cursor:hand;' title='增加月份'>4</td><td width=10 style='font-family: webdings;cursor:hand;' onmouseover='this.style.color=\black\' onmouseout='this.style.color=\\' onclick='addyear()' title='增加年份'>8</td></tr></table>);

//创建星期条目

document.write(<table class='week'><tr>);

for(i=0;i<7;i++)

document.write(<td align=center>+week[i]+</td>);

document.write(</tr></table>);

//创建日期条目

document.write(<table class='ds' id='myc' cellspacing=2 cellpadding=0>);

for(i=0;i<6;i++)

{

document.write(<tr>);

for(j=0;j<7;j++)

document.write(<td width=10% height=16 align=center onmouseover='mover(this)' onmouseout='mout(this)' onclick='if(this.innertext!=\\)getvalue(inputname,this.innertext);myc_div.style.display=\none\'></td>);

document.write(</tr>);

}

document.write(</table>);

//建建水印

document.write(</div>);

//创建选择图层

document.write(<div style='position:absolute;left:0px;top:0px;z-index:3' onmouseover=divshow(this) onmouseout=divhidden(this)></div>);

document.write(</div>);

//显示日期

showdate(this.year,this.month);

myc_div.style.display='none';

}

function getvalue(obj,value)

{

eval(obj).value=parseint(myc_top.cells[2].innertext)+-+parseint(myc_top.cells[3].innertext)+-+value;

}

function showdate(year,month)

{

var mydate = new date(year,month-1,1);

var today = new date();

var day = mydate.getday();

var length = new array(31,30,31,30,31,30,31,31,30,31,30,31);

length[1] = ((year%4==0)&&(year%100!=0)||(year%400==0))?29:28;

for(i=0;i<myc.cells.length;i++)myc.cells[i].innerhtml = ;

for(i=0;i<length[month-1];i++)

{

myc.cells[i+day].innerhtml = (i+1);

if(new date(year,month-1,i+1).getday()==6||new date(year,month-1,i+1).getday()==0){myc.cells[i+day].style.color='red';}

}

myc_top.cells[2].innertext=year+年;

myc_top.cells[3].innertext=month+月;

with(myc.parentnode.previoussibling.style)

{

pixelleft=myc.offsetleft;

pixeltop=myc.offsettop;

height = myc.clientheight;

width = myc.clientwidth;

}

myc.parentelement.parentelement.style.height=myc.parentelement.offsetheight;

myc.parentelement.previoussibling.innerhtml=year;

}

//一些附加函数--------------------

//---------begin-------------------

function mover(obj){obj.classname = 'mover';}

function mout(obj){if(obj.classname=='mover')obj.classname = '';}

function addyear(){var year = parseint(myc_top.cells[2].innertext);var month = parseint(myc_top.cells[3].innertext); year++;showdate(year,month);}

function addmonth(){var year = parseint(myc_top.cells[2].innertext);var month = parseint(myc_top.cells[3].innertext);month++;if(month>12){month=1;year++;}showdate(year,month);}

function cutyear(){var year = parseint(myc_top.cells[2].innertext);var month = parseint(myc_top.cells[3].innertext);year--;showdate(year,month);}

function cutmonth(){var year = parseint(myc_top.cells[2].innertext);var month = parseint(myc_top.cells[3].innertext);month--;if(month<1){month=12;year--;}showdate(year,month);}

function divs(obj)

{

if(obj!=divobj)

{

obj.style.backgroundcolor=#909eff;

obj.style.color='black';

}

if(divobj!=null)

{

divobj.style.backgroundcolor='';

divobj.style.color='';

}

divobj = obj;

}

function divshow(obj)

{ if (myc_timeset!=null) cleartimeout(myc_timeset);

obj.style.display='block';

}

function divhidden(obj){myc_timeset=window.settimeout(function(){obj.style.display='none'},500);}

function createyear(year,obj)//创建年份选择

{

var ystr;

var odiv;

ystr=<table class='move1' cellspacing=0 cellpadding=2 width=+obj.offsetwidth+>;

ystr+=<tr><td style='cursor:hand' onclick='createyear(+(year-20)+,myc_top.cells[2])' align=center>上翻</td></tr>;

for(i=year-10;i<year+10;i++)

if(year==i)

ystr+=<tr style='background-color:#909eff'><td style='color:black;height:16px;cursor:hand' align=center onclick='myc_top.cells[2].innertext=this.innertext;showdate(+i+,parseint(myc_top.cells[3].innertext));myc.parentelement.nextsibling.innerhtml=\\'>+i+年</td></tr>;

else

ystr+=<tr><td align=center style='cursor:hand' onmouseover=divs(this) onclick='myc_top.cells[2].innertext=this.innertext;showdate(+i+,parseint(myc_top.cells[3].innertext));myc.parentelement.nextsibling.innerhtml=\\'>+i+年</td></tr>;

ystr+=<tr><td style='cursor:hand' onclick='createyear(+(year+20)+,myc_top.cells[2])' align=center>下翻</td></tr>;

ystr+=</table>;

odiv = myc.parentelement.nextsibling;

odiv.innerhtml='';

odiv.innerhtml = ystr;

showdiv(odiv,obj.offsettop+obj.offsetheight,obj.offsetleft);

}

function createmonth(month,obj)//创建月份选择

{

var mstr;

var odiv;

mstr=<table class='move1' cellspacing=0 cellpadding=2 width=+obj.offsetwidth+>;

for(i=1;i<13;i++)

if (month==i)

mstr+=<tr style='background-color:#909eff'><td style='color:black;height:16px;cursor:hand' align=center onclick='myc_top.cells[3].innertext=this.innertext;showdate(parseint(myc_top.cells[2].innertext),+i+);myc.parentelement.nextsibling.innerhtml=\\'>+i+月</td></tr>;

else

mstr+=<tr><td align=center style='cursor:hand' onmouseover='divs(this)' onclick='myc_top.cells[3].innertext=this.innertext;showdate(parseint(myc_top.cells[2].innertext),+i+);myc.parentelement.nextsibling.innerhtml=\\'>+i+月</td></tr>;

mstr+=</table>;

odiv = myc.parentelement.nextsibling;

odiv.innerhtml='';

odiv.innerhtml = mstr;

showdiv(odiv,obj.offsettop+obj.offsetheight,obj.offsetleft);

}

function showdiv(obj,top,left)

{

obj.style.pixeltop=top;

obj.style.pixelleft=left;

}

function mycmove(obj)

{

if(event.button==1)

{

var x = obj.clientleft;

var y = obj.clienttop;

obj.style.pixelleft= x+(event.x-myc_x);

obj.style.pixeltop= y+(event.y-myc_y);

window.status=myc_y;

}

}

function showdiv2(obj)

{

inputname=obj.name;

var e=obj;

var ot = obj.offsettop;

var ol=obj.offsetleft;

while(obj=obj.parentelement){ot+=obj.offsettop;ol+=obj.offsetleft;}

myc_div.style.pixeltop=ot+e.offsetheight;

myc_div.style.pixelleft=ol;

myc_div.style.display=block;

}

function createinput(name)

{myc_div.style.display='none';

document.write(<input type='text' name='+name+' size=20 onfocus='showdiv2(this)'>);

}

// --------------end ---------------------

</script>

<script>

var mycalendar=new mycalendar;

mycalendar.year=2005;

mycalendar.show();

mycalendar.input(txt1);

</script>

<input type=text name=test onfocus=showdiv2(this) readonly=true>