漂亮的JS日历控件

代码如下:
<textarea id="Angelia" onmouseover="this.select();" style="WIDTH: 90%" rows="12">&lt;script&gt;/* alin *//* Email:[e-mail] *//* QQ:38062022 *//* Creation date: 2004-6-13 */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=&quot;yyyy-mm-dd&quot;;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]=&quot;.week{background-color:#DfDfff;font-size:12px;width:140px;}&quot;+&quot;.ds{width:140px;font-size:12px;cursor:hand}&quot;+&quot;.mover{border:1px solid black;background-color:#f4f4f4;}&quot;+&quot;.move1{border:1px solid #5d5d5d;background-color:#f4f4f4;color:#909eff;font-size:12px}&quot;+&quot;.tit{background-color:#909EFF;width:140px;font-size:12px;color:white;cursor:default}&quot;+&quot;.cs{position:absolute;border:1px solid #909eff;width:142px;left:0px;top:0px;z-index:9999;}&quot;+&quot;.shadow{position:absolute;left:0px;top:0px;font-family: Arial Black;font-size:50px;color:#d4d4d4;z-index:1;text-align:center;}&quot;;document.write(&quot;&lt;style type='text/css'&gt;&quot;);document.write(style[num]);document.write(&quot;&lt;/style&gt;&quot;);}function createCalendar(){var week = new Array('日','一','二','三','四','五','六');document.write(&quot;&lt;div class='cs' onselectstart='return false' oncontextmenu='return false' onmousedown='if(event.button==2)this.style.display=/&quot;none/&quot;' id='myC_div'&gt;&lt;div class='shadow'&gt;&lt;/div&gt;&lt;div style='position:absolute;left:0px;top:0px;z-index:1'&gt;&quot;);//创建头部document.write(&quot;&lt;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);'&gt;&lt;tr&gt;&lt;td width=10 onmouseover='this.style.color=/&quot;black/&quot;' onmouseout='this.style.color=/&quot;/&quot;' onclick='cutYear()' style='font-family: Webdings;cursor:hand;' title='减少年份'&gt;7&lt;/td&gt;&lt;td title='减少月份' onmouseover='this.style.color=/&quot;black/&quot;' onclick='cutMonth()' onmouseout='this.style.color=/&quot;/&quot;' width=10 style='font-family: Webdings;cursor:hand;'&gt;3&lt;/td&gt;&lt;td align=center onmouseover=this.className='move1'; onmouseout=this.className='';divHidden(myC.parentElement.nextSibling); onclick='createyear(&quot;+this.year+&quot;,this);divShow(myC.parentElement.nextSibling);'&gt;&lt;/td&gt;&lt;td align=center onclick='createmonth(&quot;+this.month+&quot;,this);divShow(myC.parentElement.nextSibling)' onmouseover=this.className='move1'; onmouseout=this.className='';divHidden(myC.parentElement.nextSibling);&gt;&lt;/td&gt;&lt;td width=10 onmouseover='this.style.color=/&quot;black/&quot;' onmouseout='this.style.color=/&quot;/&quot;' onclick='addMonth()' style='font-family: Webdings;cursor:hand;' title='增加月份'&gt;4&lt;/td&gt;&lt;td width=10 style='font-family: Webdings;cursor:hand;' onmouseover='this.style.color=/&quot;black/&quot;' onmouseout='this.style.color=/&quot;/&quot;' onclick='addYear()' title='增加年份'&gt;8&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&quot;);//创建星期条目document.write(&quot;&lt;table class='week'&gt;&lt;tr&gt;&quot;);for(i=0;i&lt;7;i++)document.write(&quot;&lt;td align=center&gt;&quot;+week[i]+&quot;&lt;/td&gt;&quot;);document.write(&quot;&lt;/tr&gt;&lt;/table&gt;&quot;);//创建日期条目document.write(&quot;&lt;table class='ds' id='myC' cellspacing=2 cellpadding=0&gt;&quot;);for(i=0;i&lt;6;i++){document.write(&quot;&lt;tr&gt;&quot;);for(j=0;j&lt;7;j++)document.write(&quot;&lt;td width=10% height=16 align=center onmouseover='mOver(this)' onmouseout='mOut(this)' onclick='if(this.innerText!=/&quot;/&quot;)getValue(inputName,this.innerText);myC_div.style.display=/&quot;none/&quot;'&gt;&lt;/td&gt;&quot;);document.write(&quot;&lt;/tr&gt;&quot;);}document.write(&quot;&lt;/table&gt;&quot;);//建建水印document.write(&quot;&lt;/div&gt;&quot;);//创建选择图层document.write(&quot;&lt;div style='position:absolute;left:0px;top:0px;z-index:3' onmouseover=divShow(this) onmouseout=divHidden(this)&gt;&lt;/div&gt;&quot;);document.write(&quot;&lt;/div&gt;&quot;);//显示日期showDate(this.year,this.month);myC_div.style.display='none';}function getValue(obj,value){eval(obj).value=parseInt(myC_Top.cells[2].innerText)+&quot;-&quot;+parseInt(myC_Top.cells[3].innerText)+&quot;-&quot;+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)&amp;&amp;(year%100!=0)||(year%400==0))?29:28;for(i=0;i&lt;myC.cells.length;i++)myC.cells[i].innerHTML = &quot;&quot;;for(i=0;i&lt;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+&quot;年&quot;;myC_Top.cells[3].innerText=month+&quot;月&quot;;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&gt;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&lt;1){month=12;year--;}showDate(year,month);}function divS(obj){if(obj!=divObj){obj.style.backgroundColor=&quot;#909eff&quot;;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=&quot;&lt;table class='move1' cellspacing=0 cellpadding=2 width=&quot;+obj.offsetWidth+&quot;&gt;&quot;;ystr+=&quot;&lt;tr&gt;&lt;td style='cursor:hand' onclick='createyear(&quot;+(year-20)+&quot;,myC_Top.cells[2])' align=center&gt;上翻&lt;/td&gt;&lt;/tr&gt;&quot;;for(i=year-10;i&lt;year+10;i++)if(year==i)ystr+=&quot;&lt;tr style='background-color:#909eff'&gt;&lt;td style='color:black;height:16px;cursor:hand' align=center onclick='myC_Top.cells[2].innerText=this.innerText;showDate(&quot;+i+&quot;,parseInt(myC_Top.cells[3].innerText));myC.parentElement.nextSibling.innerHTML=/&quot;/&quot;'&gt;&quot;+i+&quot;年&lt;/td&gt;&lt;/tr&gt;&quot;;elseystr+=&quot;&lt;tr&gt;&lt;td align=center style='cursor:hand' onmouseover=divS(this) onclick='myC_Top.cells[2].innerText=this.innerText;showDate(&quot;+i+&quot;,parseInt(myC_Top.cells[3].innerText));myC.parentElement.nextSibling.innerHTML=/&quot;/&quot;'&gt;&quot;+i+&quot;年&lt;/td&gt;&lt;/tr&gt;&quot;;ystr+=&quot;&lt;tr&gt;&lt;td style='cursor:hand' onclick='createyear(&quot;+(year+20)+&quot;,myC_Top.cells[2])' align=center&gt;下翻&lt;/td&gt;&lt;/tr&gt;&quot;;ystr+=&quot;&lt;/table&gt;&quot;;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=&quot;&lt;table class='move1' cellspacing=0 cellpadding=2 width=&quot;+(obj.offsetWidth+5)+&quot;&gt;&quot;;for(i=1;i&lt;13;i++)if (month==i)mstr+=&quot;&lt;tr style='background-color:#909eff'&gt;&lt;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),&quot;+i+&quot;);myC.parentElement.nextSibling.innerHTML=/&quot;/&quot;'&gt;&quot;+i+&quot;月&lt;/td&gt;&lt;/tr&gt;&quot;;elsemstr+=&quot;&lt;tr&gt;&lt;td align=center style='cursor:hand' onmouseover='divS(this)' onclick='myC_Top.cells[3].innerText=this.innerText;showDate(parseInt(myC_Top.cells[2].innerText),&quot;+i+&quot;);myC.parentElement.nextSibling.innerHTML=/&quot;/&quot;'&gt;&quot;+i+&quot;月&lt;/td&gt;&lt;/tr&gt;&quot;;mstr+=&quot;&lt;/table&gt;&quot;;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=&quot;block&quot;;}function createInput(name){myC_div.style.display='none';document.write(&quot;&lt;input type='text' name='&quot;+name+&quot;' size=20 onfocus='showDiv2(this)'&gt;&quot;);}// --------------End ---------------------&lt;/script&gt;&lt;script&gt;var myCalendar=new myCalendar;myCalendar.year=2006;myCalendar.show();myCalendar.input(&quot;txt1&quot;);&lt;/script&gt;&lt;input type=&quot;text&quot; name=&quot;test&quot; onfocus=&quot;showDiv2(this)&quot; readonly=true&gt;</textarea>
[Ctrl+A 全选 提示:你可先修改部分代码,再点运行代码]