查看效果:日歷效果
    <script>
    var myc_x,myc_y;
    var myc_timeset=null,myc_timeset1=null;
    var divobj=null;
    var inputname;
    function mycalendar() //構(gòu)建對(duì)象
    {
    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) //設(shè)置樣式
    {
    if(!num||isnan(num)){alert('參數(shù)不對(duì),采用默認(rèn)樣式！');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'>);
    //創(chuàng)建頭部
    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 onmouseover=this.classname='move1'; onmouseout=this.classname='';divhidden(myc.parentelement.nextsibling); onclick='createyear(+this.year+,this);divshow(myc.parentelement.nextsibling);'></td><td 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>);
    //創(chuàng)建星期條目
    document.write(<table class='week'><tr>);
    for(i=0;i<7;i++)
    document.write(<td>+week[i]+</td>);
    document.write(</tr></table>);
    //創(chuàng)建日期條目
    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 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>);
    //創(chuàng)建選擇圖層
    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;
    }
    //一些附加函數(shù)--------------------
    //---------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)//創(chuàng)建年份選擇
    {
    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])'>上翻</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' 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 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])'>下翻</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)//創(chuàng)建月份選擇
    {
    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' 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 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>