查看效果:日歷效果
    <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('參數(shù)不對,采用默認樣式！');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>