asp.net千奇百怪的日历【月儿原创】-优快云博客

本文汇总了多种ASP.NET中实用的日历控件，包括经典的梅花雨版、万年历、Flash日历等，提供了丰富的代码示例，适合开发者快速实现日期选择功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

asp.net千奇百怪的日历

作者：清清月儿

主页：http://blog.youkuaiyun.com/21aspnet/ 时间：2007.5.14

日历控件是我们经常使用的，本文把常用的几款日历总结如下。

1.下拉日历梅花雨版第1款
点评：最经典的几乎完美了。

代码：

<% ... @PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default" %>

< html >

< head runat ="server" >

< title > 日历控件 </ title >

< script type ="text/javascript" src ="calendar.js" ></ script >

</ head >

< body >

< form id ="form1" runat ="server" >

< div >

< input id ="Text1" type ="text" onFocus =calendar() />

</ div >

</ form >

</ body >

</ html >

<!--

document.write( " <divid=meizzCalendarLayerstyle='position:absolute;z-index:9999;width:144;height:193;display:none'> " );

document.write( " <iframename=meizzCalendarIframescrolling=noframeborder=0width=100%height=100%></iframe></div> " );

function writeIframe()

... {

varstrIframe="<html><head><metahttp-equiv='Content-Type'content='text/html;charset=gb2312'><style>"+

"*{font-size:12px;font-family:宋体}"+

".bg{color:"+WebCalendar.lightColor+";cursor:default;background-color:"+WebCalendar.darkColor+";}"+

"table#tableMain{width:142;height:180;}"+

"table#tableWeektd{color:"+WebCalendar.lightColor+";}"+

"table#tableDaytd{font-weight:bold;}"+

"td#meizzYearHead,td#meizzYearMonth{color:"+parent.WebCalendar.wordColor+"}"+

".out{text-align:center;border-top:1pxsolid"+WebCalendar.DarkBorder+";border-left:1pxsolid"+WebCalendar.DarkBorder+";"+

"border-right:1pxsolid"+WebCalendar.lightColor+";border-bottom:1pxsolid"+WebCalendar.lightColor+";}"+

".over{text-align:center;border-top:1pxsolid#FFFFFF;border-left:1pxsolid#FFFFFF;"+

"border-bottom:1pxsolid"+WebCalendar.DarkBorder+";border-right:1pxsolid"+WebCalendar.DarkBorder+"}"+

"input{border:1pxsolid"+WebCalendar.darkColor+";padding-top:1px;height:18;cursor:hand;"+

"color:"+WebCalendar.wordColor+";background-color:"+WebCalendar.btnBgColor+"}"+

"</style></head><bodyonselectstart='returnfalse'style='margin:0px'oncontextmenu='returnfalse'><formname=meizz>";

if(WebCalendar.drag)...{strIframe+="<scr"+"iptlanguage=javascript>"+

"vardrag=false,cx=0,cy=0,o=parent.WebCalendar.calendar;functiondocument.onmousemove(){"+

"if(parent.WebCalendar.drag&&drag){if(o.style.left=='')o.style.left=0;if(o.style.top=='')o.style.top=0;"+

"o.style.left=parseInt(o.style.left)+window.event.clientX-cx;"+

"o.style.top=parseInt(o.style.top)+window.event.clientY-cy;}}"+

"functiondocument.onkeydown(){switch(window.event.keyCode){case27:parent.hiddenCalendar();break;"+

"case37:parent.prevM();break;case38:parent.prevY();break;case39:parent.nextM();break;case40:parent.nextY();break;"+

"case84:document.forms[0].today.click();break;}window.event.keyCode=0;window.event.returnValue=false;}"+

"functiondragStart(){cx=window.event.clientX;cy=window.event.clientY;drag=true;}</scr"+"ipt>"}

strIframe+="<selectname=tmpYearSelectonblur='parent.hiddenSelect(this)'style='z-index:1;position:absolute;top:3;left:18;display:none'"+

"onchange='parent.WebCalendar.thisYear=this.value;parent.hiddenSelect(this);parent.writeCalendar();'></select>"+

"<selectname=tmpMonthSelectonblur='parent.hiddenSelect(this)'style='z-index:1;position:absolute;top:3;left:74;display:none'"+

"onchange='parent.WebCalendar.thisMonth=this.value;parent.hiddenSelect(this);parent.writeCalendar();'></select>"+

"<tableid=tableMainclass=bgborder=0cellspacing=2cellpadding=0>"+

"<tr><tdwidth=140height=19bgcolor='"+WebCalendar.lightColor+"'>"+

"<tablewidth=140id=tableHeadborder=0cellspacing=1cellpadding=0><tralign=center>"+

"<tdwidth=15height=19class=bgtitle='向前翻1月快捷键：←'style='cursor:hand'onclick='parent.prevM()'><b><</b></td>"+

"<tdwidth=60id=meizzYearHeadtitle='点击此处选择年份'onclick='parent.funYearSelect(parseInt(this.innerText,10))'"+

"onmouseover='this.bgColor=parent.WebCalendar.darkColor;this.style.color=parent.WebCalendar.lightColor'"+

"onmouseout='this.bgColor=parent.WebCalendar.lightColor;this.style.color=parent.WebCalendar.wordColor'></td>"+

"<tdwidth=50id=meizzYearMonthtitle='点击此处选择月份'onclick='parent.funMonthSelect(parseInt(this.innerText,10))'"+

"onmouseover='this.bgColor=parent.WebCalendar.darkColor;this.style.color=parent.WebCalendar.lightColor'"+

"onmouseout='this.bgColor=parent.WebCalendar.lightColor;this.style.color=parent.WebCalendar.wordColor'></td>"+

"<tdwidth=15class=bgtitle='向后翻1月快捷键：→'onclick='parent.nextM()'style='cursor:hand'><b>></b></td></tr></table>"+

"</td></tr><tr><tdheight=20><tableid=tableWeekborder=1width=140cellpadding=0cellspacing=0";

if(WebCalendar.drag)...{strIframe+="onmousedown='dragStart()'onmouseup='drag=false'onmouseout='drag=false'";}

strIframe+="borderColorLight='"+WebCalendar.darkColor+"'borderColorDark='"+WebCalendar.lightColor+"'>"+

"<tralign=center><tdheight=20>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr></table>"+

"</td></tr><tr><tdvalign=topwidth=140bgcolor='"+WebCalendar.lightColor+"'>"+

"<tableid=tableDayheight=120width=140border=0cellspacing=1cellpadding=0>";

for(varx=0;x<5;x++)...{strIframe+="<tr>";

for(vary=0;y<7;y++)strIframe+="<tdclass=outid='meizzDay"+(x*7+y)+"'></td>";strIframe+="</tr>";}

strIframe+="<tr>";

for(varx=35;x<39;x++)strIframe+="<tdclass=outid='meizzDay"+x+"'></td>";

strIframe+="<tdcolspan=3class=outtitle='"+WebCalendar.regInfo+"'><inputstyle='background-color:"+

WebCalendar.btnBgColor+";cursor:hand;padding-top:4px;width:100%;height:100%;border:0'onfocus='this.blur()'"+

"type=buttonvalue='  关闭'onclick='parent.hiddenCalendar()'></td></tr></table>"+

"</td></tr><tr><tdheight=20width=140bgcolor='"+WebCalendar.lightColor+"'>"+

"<tableborder=0cellpadding=1cellspacing=0width=140>"+

"<tr><td><inputname=prevYeartitle='向前翻1年快捷键：↑'onclick='parent.prevY()'type=buttonvalue='<<'"+

"onfocus='this.blur()'style='meizz:expression(this.disabled=parent.WebCalendar.thisYear==1000)'><input"+

"onfocus='this.blur()'name=prevMonthtitle='向前翻1月快捷键：←'onclick='parent.prevM()'type=buttonvalue='< '>"+

"</td><tdalign=center><inputname=todaytype=buttonvalue='Today'onfocus='this.blur()'style='width:50'title='当前日期快捷键：T'"+

"onclick="parent.returnDate(newDate().getDate()+'/'+(newDate().getMonth()+1)+'/'+newDate().getFullYear())">"+

"</td><tdalign=right><inputtitle='向后翻1月快捷键：→'name=nextMonthonclick='parent.nextM()'type=buttonvalue=' >'"+

"onfocus='this.blur()'><inputname=nextYeartitle='向后翻1年快捷键：↓'onclick='parent.nextY()'type=buttonvalue='>>'"+

"onfocus='this.blur()'style='meizz:expression(this.disabled=parent.WebCalendar.thisYear==9999)'></td></tr></table>"+

"</td></tr><table></form></body></html>";

with(WebCalendar.iframe)

...{

document.writeln(strIframe);document.close();

for(vari=0;i<39;i++)

...{

WebCalendar.dayObj[i]=eval("meizzDay"+i);

WebCalendar.dayObj[i].onmouseover=dayMouseOver;

WebCalendar.dayObj[i].onmouseout=dayMouseOut;

WebCalendar.dayObj[i].onclick=returnDate;

}

function WebCalendar() // 初始化日历的设置

... {

this.regInfo="关闭的快捷键：[Esc]";

this.daysMonth=newArray(31,28,31,30,31,30,31,31,30,31,30,31);

this.day=newArray(39);//定义日历展示用的数组

this.dayObj=newArray(39);//定义日期展示控件数组

this.dateStyle=null;//保存格式化后日期数组

this.objExport=null;//日历回传的显示控件

this.eventSrc=null;//日历显示的触发控件

this.inputDate=null;//转化外的输入的日期(d/m/yyyy)

this.thisYear=newDate().getFullYear();//定义年的变量的初始值

this.thisMonth=newDate().getMonth()+1;//定义月的变量的初始值

this.thisDay=newDate().getDate();//定义日的变量的初始值

this.today=this.thisDay+"/"+this.thisMonth+"/"+this.thisYear;//今天(d/m/yyyy)

this.iframe=window.frames("meizzCalendarIframe");//日历的iframe载体

this.calendar=getObjectById("meizzCalendarLayer");//日历的层

this.dateReg="";//日历格式验证的正则式

this.yearFall=50;//定义年下拉框的年差值

this.format="yyyy-mm-dd";//回传日期的格式

this.timeShow=false;//是否返回时间

this.drag=true;//是否允许拖动

this.darkColor="#0000D0";//控件的暗色

this.lightColor="#FFFFFF";//控件的亮色

this.btnBgColor="#E6E6FA";//控件的按钮背景色

this.wordColor="#000080";//控件的文字颜色

this.wordDark="#DCDCDC";//控件的暗文字颜色

this.dayBgColor="#F5F5FA";//日期数字背景色

this.todayColor="#FF0000";//今天在日历上的标示背景色

this.DarkBorder="#D4D0C8";//日期显示的立体表达色

} var WebCalendar = new WebCalendar();

function calendar() // 主调函数

... {

vare=window.event.srcElement;writeIframe();

varo=WebCalendar.calendar.style;WebCalendar.eventSrc=e;

if(arguments.length==0)WebCalendar.objExport=e;

elseWebCalendar.objExport=eval(arguments[0]);

WebCalendar.iframe.tableWeek.style.cursor=WebCalendar.drag?"move":"default";

vart=e.offsetTop,h=e.clientHeight,l=e.offsetLeft,p=e.type;

while(e=e.offsetParent)...{t+=e.offsetTop;l+=e.offsetLeft;}

o.display="";WebCalendar.iframe.document.body.focus();

varcw=WebCalendar.calendar.clientWidth,ch=WebCalendar.calendar.clientHeight;

vardw=document.body.clientWidth,dl=document.body.scrollLeft,dt=document.body.scrollTop;

if(document.body.clientHeight+dt-t-h>=ch)o.top=(p=="image")?t+h:t+h+6;

elseo.top=(t-dt<ch)?((p=="image")?t+h:t+h+6):t-ch;

if(dw+dl-l>=cw)o.left=l;elseo.left=(dw>=cw)?dw-cw+dl:dl;

if(!WebCalendar.timeShow)WebCalendar.dateReg=/^(d...{1,4})(-|/)(d...{1,2})2(d...{1,2})$/;

elseWebCalendar.dateReg=/^(d...{1,4})(-|/)(d...{1,2})2(d...{1,2})(d...{1,2}):(d...{1,2}):(d...{1,2})$/;

try...{

if(WebCalendar.objExport.value.trim()!="")...{

WebCalendar.dateStyle=WebCalendar.objExport.value.trim().match(WebCalendar.dateReg);

if(WebCalendar.dateStyle==null)

...{

WebCalendar.thisYear=newDate().getFullYear();

WebCalendar.thisMonth=newDate().getMonth()+1;

WebCalendar.thisDay=newDate().getDate();

alert("原文本框里的日期有错误！可能与你定义的显示时分秒有冲突！");

writeCalendar();returnfalse;

}

else

...{

WebCalendar.thisYear=parseInt(WebCalendar.dateStyle[1],10);

WebCalendar.thisMonth=parseInt(WebCalendar.dateStyle[3],10);

WebCalendar.thisDay=parseInt(WebCalendar.dateStyle[4],10);

WebCalendar.inputDate=parseInt(WebCalendar.thisDay,10)+"/"+parseInt(WebCalendar.thisMonth,10)+"/"+

parseInt(WebCalendar.thisYear,10);writeCalendar();

}

}elsewriteCalendar();

}catch(e)...{writeCalendar();}

}

function funMonthSelect() // 月份的下拉框

... {

varm=isNaN(parseInt(WebCalendar.thisMonth,10))?newDate().getMonth()+1:parseInt(WebCalendar.thisMonth);

vare=WebCalendar.iframe.document.forms[0].tmpMonthSelect;

for(vari=1;i<13;i++)e.options.add(newOption(i+"月",i));

e.style.display="";e.value=m;e.focus();window.status=e.style.top;

}

function funYearSelect() // 年份的下拉框

... {

varn=WebCalendar.yearFall;

vare=WebCalendar.iframe.document.forms[0].tmpYearSelect;

vary=isNaN(parseInt(WebCalendar.thisYear,10))?newDate().getFullYear():parseInt(WebCalendar.thisYear);

y=(y<=100)?100:((y>=2050)?2050:y);

varmin=(y-n>=100)?y-n:100;

varmax=(y+n<=2050)?y+n:2050;

min=(max==2050)?max-n*2:min;

max=(min==100)?min+n*2:max;

for(vari=min;i<=max;i++)e.options.add(newOption(i+"年",i));

e.style.display="";e.value=y;e.focus();

}

function prevM() // 往前翻月份

... {

WebCalendar.thisDay=1;

if(WebCalendar.thisMonth==1)

...{

WebCalendar.thisYear--;

WebCalendar.thisMonth=13;

}

WebCalendar.thisMonth--;writeCalendar();

}

function nextM() // 往后翻月份

... {

WebCalendar.thisDay=1;

if(WebCalendar.thisMonth==12)

...{

WebCalendar.thisYear++;

WebCalendar.thisMonth=0;

}

WebCalendar.thisMonth++;writeCalendar();

}

function prevY() ... {WebCalendar.thisDay=1;WebCalendar.thisYear--;writeCalendar();} // 往前翻Year

function nextY() ... {WebCalendar.thisDay=1;WebCalendar.thisYear++;writeCalendar();} // 往后翻Year

function hiddenSelect(e) ... {for(vari=e.options.length;i>-1;i--)e.options.remove(i);e.style.display="none";}

function getObjectById(id) ... {if(document.all)return(eval("document.all."+id));return(eval(id));}

function hiddenCalendar() ... {getObjectById("meizzCalendarLayer").style.display="none";} ;

function appendZero(n) ... {return(("00"+n).substr(("00"+n).length-2));} // 日期自动补零程序

function String.prototype.trim() ... {returnthis.replace(/(^s*)|(s*$)/g,"");}

function dayMouseOver()

... {

this.className="over";

this.style.backgroundColor=WebCalendar.darkColor;

if(WebCalendar.day[this.id.substr(8)].split("/")[1]==WebCalendar.thisMonth)

this.style.color=WebCalendar.lightColor;

}

function dayMouseOut()

... {

this.className="out";vard=WebCalendar.day[this.id.substr(8)],a=d.split("/");

this.style.removeAttribute('backgroundColor');

if(a[1]==WebCalendar.thisMonth&&d!=WebCalendar.today)

...{

if(WebCalendar.dateStyle&&a[0]==parseInt(WebCalendar.dateStyle[4],10))

this.style.color=WebCalendar.lightColor;

this.style.color=WebCalendar.wordColor;

}

function writeCalendar() // 对日历显示的数据的处理程序

... {

vary=WebCalendar.thisYear;

varm=WebCalendar.thisMonth;

vard=WebCalendar.thisDay;

WebCalendar.daysMonth[1]=(0==y%4&&(y%100!=0||y%400==0))?29:28;

if(!(y<=9999&&y>=1000&&parseInt(m,10)>0&&parseInt(m,10)<13&&parseInt(d,10)>0))...{

alert("对不起，你输入了错误的日期！");

WebCalendar.thisYear=newDate().getFullYear();

WebCalendar.thisMonth=newDate().getMonth()+1;

WebCalendar.thisDay=newDate().getDate();}

y=WebCalendar.thisYear;

m=WebCalendar.thisMonth;

d=WebCalendar.thisDay;

WebCalendar.iframe.meizzYearHead.innerText=y+"年";

WebCalendar.iframe.meizzYearMonth.innerText=parseInt(m,10)+"月";

WebCalendar.daysMonth[1]=(0==y%4&&(y%100!=0||y%400==0))?29:28;//闰年二月为29天

varw=newDate(y,m-1,1).getDay();

varprevDays=m==1?WebCalendar.daysMonth[11]:WebCalendar.daysMonth[m-2];

for(vari=(w-1);i>=0;i--)//这三个for循环为日历赋数据源（数组WebCalendar.day）格式是d/m/yyyy

...{

WebCalendar.day[i]=prevDays+"/"+(parseInt(m,10)-1)+"/"+y;

if(m==1)WebCalendar.day[i]=prevDays+"/"+12+"/"+(parseInt(y,10)-1);

prevDays--;

}

for(vari=1;i<=WebCalendar.daysMonth[m-1];i++)WebCalendar.day[i+w-1]=i+"/"+m+"/"+y;

for(vari=1;i<39-w-WebCalendar.daysMonth[m-1]+1;i++)

...{

WebCalendar.day[WebCalendar.daysMonth[m-1]+w-1+i]=i+"/"+(parseInt(m,10)+1)+"/"+y;

if(m==12)WebCalendar.day[WebCalendar.daysMonth[m-1]+w-1+i]=i+"/"+1+"/"+(parseInt(y,10)+1);

}

for(vari=0;i<39;i++)//这个循环是根据源数组写到日历里显示

...{

vara=WebCalendar.day[i].split("/");

WebCalendar.dayObj[i].innerText=a[0];

WebCalendar.dayObj[i].title=a[2]+"-"+appendZero(a[1])+"-"+appendZero(a[0]);

WebCalendar.dayObj[i].bgColor=WebCalendar.dayBgColor;

WebCalendar.dayObj[i].style.color=WebCalendar.wordColor;

if((i<10&&parseInt(WebCalendar.day[i],10)>20)||(i>27&&parseInt(WebCalendar.day[i],10)<12))

WebCalendar.dayObj[i].style.color=WebCalendar.wordDark;

if(WebCalendar.inputDate==WebCalendar.day[i])//设置输入框里的日期在日历上的颜色

...{WebCalendar.dayObj[i].bgColor=WebCalendar.darkColor;WebCalendar.dayObj[i].style.color=WebCalendar.lightColor;}

if(WebCalendar.day[i]==WebCalendar.today)//设置今天在日历上反应出来的颜色

...{WebCalendar.dayObj[i].bgColor=WebCalendar.todayColor;WebCalendar.dayObj[i].style.color=WebCalendar.lightColor;}

}

function returnDate() // 根据日期格式等返回用户选定的日期

... {

if(WebCalendar.objExport)

...{

varreturnValue;

vara=(arguments.length==0)?WebCalendar.day[this.id.substr(8)].split("/"):arguments[0].split("/");

vard=WebCalendar.format.match(/^(w...{4})(-|/)(w...{1,2})2(w...{1,2})$/);

if(d==null)...{alert("你设定的日期输出格式不对！请重新定义WebCalendar.format！");returnfalse;}

varflag=d[3].length==2||d[4].length==2;//判断返回的日期格式是否要补零

returnValue=flag?a[2]+d[2]+appendZero(a[1])+d[2]+appendZero(a[0]):a[2]+d[2]+a[1]+d[2]+a[0];

if(WebCalendar.timeShow)

...{

varh=newDate().getHours(),m=newDate().getMinutes(),s=newDate().getSeconds();

returnValue+=flag?""+appendZero(h)+":"+appendZero(m)+":"+appendZero(s):""+h+":"+m+":"+s;

}

WebCalendar.objExport.value=returnValue;

hiddenCalendar();

}

function document.onclick()

... {

if(WebCalendar.eventSrc!=window.event.srcElement)hiddenCalendar();

}

// -->

calendar.js 注意存为带签名的utf-8

梅花雨版第2款
点评：比上一款大些，色彩淡一点。

<% ... @PageLanguage="C#"AutoEventWireup="true"CodeFile="Default2.aspx.cs"Inherits="Default2" %>

< html >

< head runat ="server" >

< title > 日历控件 </ title >

< script type ="text/javascript" src ="calendar.js" ></ script >

</ head >

< body >

< form id ="form1" runat ="server" >

< div >

< input onfocus ="setday(this);" name ="Calendar1" type ="text" id ="Calendar1" />

</ div >

</ form >

</ body >

</ html >

calendar.js http://download1.youkuaiyun.com/down3/20070514/14080517354.js

2.万年历
点评：可以自定义节日，是很多系统里做装饰的。

<% ... @PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default" %>

< html >

< head runat ="server" >

< title > 日历控件 </ title >

< script type ="text/javascript" src ="wnl.js" ></ script >

< SCRIPT language =JavaScript > ...

functionclick()

...{

if(event.button==2)...{alert('欢迎访问——农历与西历对照')}

}

document.onmousedown=click

</ SCRIPT >

< STYLE > ... .todyaColor{...}{

BACKGROUND-COLOR:aqua

}

</ STYLE >

</ head >

< BODY leftMargin =5 topMargin =1 onload =initial() >

< SCRIPT language =JavaScript > ... <!--

if(navigator.appName=="Netscape"||parseInt(navigator.appVersion)<4)

document.write("<h1>你的浏览器无法执行此程序。</h1>此程序在IE4以后的版本才能执行!!")

//--></SCRIPT>

<DIVid=detailstyle="POSITION:absolute"></DIV>

<FORMname=CLD>

<TABLE>

<TBODY>

<TR>

<TDalign=middle>

<DIVstyle="Z-INDEX:-1;POSITION:absolute;TOP:30px"><FONTid=YMBG

style="FONT-SIZE:80pt;COLOR:#e0e0e0;FONT-FAMILY:'ArialBlack'"><BR>JUN</FONT>

</DIV>

<TABLEborder=0>

<TBODY>

<TR>

<TDbgColor=#00ffffcolSpan=7><FONTstyle="FONT-SIZE:9pt"

color=#333333size=2>西历<SELECTstyle="FONT-SIZE:9pt"

onchange=changeCld()name=SY>

<SCRIPTlanguage=JavaScript><!--

for(i=1900;i<2050;i++)document.write('<option>'+i)

//--></SCRIPT>

</SELECT>年<SELECTstyle="FONT-SIZE:9pt"onchange=changeCld()

name=SM>

<SCRIPTlanguage=JavaScript><!--

for(i=1;i<13;i++)document.write('<option>'+i)

//--></SCRIPT>

</SELECT>月</FONT><FONTid=GZface=宋体color=#333333

size=4></FONT><BR></TD></TR>

<TRalign=middlebgColor=#e0e0e0>

<TDwidth=54>日</TD>

<TDwidth=54>一</TD>

<TDwidth=54>二</TD>

<TDwidth=50>三</TD>

<TDwidth=54>四</TD>

<TDwidth=54>五</TD>

<TDwidth=54>六</TD></TR>

<SCRIPTlanguage=JavaScript><!--

vargNum

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

...{

document.write('<tralign=center>')

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

...{

gNum=i*7+j

document.write('<tdid="GD'+gNum+'"onMouseOver="mOvr('+gNum+')"onMouseOut="mOut()"><fontid="SD'+gNum+'"size=5face="ArialBlack"')

if(j==0)document.write('color=red')

if(j==6)

if(i%2==1)document.write('color=red')

elsedocument.write('color=green')

document.write('TITLE=""></font><br><fontid="LD'+gNum+'"size=2style="font-size:9pt"></font></td>')

}

document.write('</tr>')

}

//--></SCRIPT>

</TBODY></TABLE></TD>

<TDvAlign=topalign=middlewidth=60><BR><BR><BR><BR><BUTTON

style="FONT-SIZE:9pt"onclick="pushBtm('YD')">年↑</BUTTON><BR><BUTTON

style="FONT-SIZE:9pt"onclick="pushBtm('YU')">年↓</BUTTON>

<P><BUTTONstyle="FONT-SIZE:9pt"

onclick="pushBtm('MD')">月↑</BUTTON><BR><BUTTONstyle="FONT-SIZE:9pt"

onclick="pushBtm('MU')">月↓</BUTTON></P>

</P></TD></TR></TBODY></TABLE></FORM></CENTER></BODY>

</html>

wnl.js http://download1.youkuaiyun.com/down3/20070514/14080418581.js

3.Flash日历
点评：可切换时钟日历2种状态，不过可惜不能选择，只能看而已，似乎作者没有写版权，好想其拉类似的都写个版权。

日历状态：

时间状态：

clock.swf http://download1.youkuaiyun.com/down3/20070514/14083110727.swf

4.仿Windows风格系统时间和日历
点评：没有和textbox结合

仿系统日历和时间钟.htm http://download1.youkuaiyun.com/down3/20070514/14085438917.htm

5.仿Windows风格系统时间和日历
点评：和textbox结合

< HTML >< HEAD >< TITLE > http://blog.youkuaiyun.com/21aspnet/ </ TITLE >

< META http-equiv =Content-Type content ="text/html;charset=utf-8" >

< META content ="MSHTML6.00.3790.0" name =GENERATOR >

< META content =C# name =CODE_LANGUAGE >

< META content =JavaScript name =vs_defaultClientScript >

< META content =http://schemas.microsoft.com/intellisense/ie5

name =vs_targetSchema >

< script lanuage ='javascript' > ...

functionCalendar(obj)

...{

varshowx=event.screenX-event.offsetX-4-

210;//+deltaX;

varshowy=event.screenY-event.offsetY+18;

//+deltaY;

varnewWINwidth=210+4+18;

varretval=window.showModalDialog

('cal.htm',obj.value,

'dialogWidth:206px;dialogHeight:221px;dialogLeft:'+showx+'px;

dialogTop:'+showy+'px;status:0;help:0;scroll:0');

if(retval!=null)

...{

obj.value=retval;

}

</ script >

</ HEAD >

< BODY bgColor =white leftMargin =0 topMargin =0 >

< FORM id =Form1 name =Form1 action =Search.aspx method =post >

< input name ="tbGreateTime" type ="text" value ="" id ="tbGreateTime"

readonly ="true" onclick ="javascript:Calendar(this);"

style ="width:70px;cursor:hand;" />

</ body >

</ html >

图片和日历rar

6.当前时间

<! DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN" >

< html >

< head >

< meta http-equiv ="Content-Type" content ="text/html;charset=gb2312" >

< title > 时钟 </ title >

< script language ="VBScript" > ...

<!--

subshow_time()

frmclock.txtDate.value=date()

frmclock.txtTime.value=time()

settimeout"show_time",1000

endsub

-->

</ script >

</ head >

< body onLoad =show_time() >

< form name ="frmClock" >

< font size ="2" > 今天是：

< input type ="text" name ="txtDate" value ="" >

< br >

时间是： </ font >< font size ="2" >

< input type ="text" name ="txtTime" value ="" >

</ font ></ form >

</ body >

</ html >

7.动态版权
做网站很多时候要写版权的时间。

< SCRIPT > document.write( " 1999- " + ( new Date()).getYear()) </ SCRIPT >

8.最常用最短小精悍的日历

<! DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN" >

< html >

< head >

< meta http-equiv ="Content-Type" content ="text/html;charset=gb2312" >

< title > 每天日历 </ title >

</ head >

< body >

< script language ="JavaScript" type ="text/JavaScript" > ...

varday="";

varmonth="";

varampm="";

varampmhour="";

varmyweekday="";

varyear="";

mydate=newDate();

myweekday=mydate.getDay();

mymonth=mydate.getMonth()+1;

myday=mydate.getDate();

myyear=mydate.getYear();

year=(myyear>200)?myyear:1900+myyear;

if(myweekday==0)

weekday="星期日";

elseif(myweekday==1)

weekday="星期一";

elseif(myweekday==2)

weekday="星期二";

elseif(myweekday==3)

weekday="星期三";

elseif(myweekday==4)

weekday="星期四";

elseif(myweekday==5)

weekday="星期五";

elseif(myweekday==6)

weekday="星期六";

document.write(year+"年"+mymonth+"月"+myday+"日"+weekday);

</ script >

</ body >

</ html >

9.下拉日历

< form >

< select id =year onchange =toDate() >

< script > ... for(i=1970;i<=2010;i++)document.write("<option>"+i+"</option>") </ script >

</ select >

< select id =month onchange =toDate() >

< script > ... for(i=1;i<=12;i++)document.write("<option>"+i+"</option>") </ script >

</ select >

< select id =day onchange =toDay() ></ select >

< input name =weekday >

</ form >

< script > ...

vararr="日一二三四五六".split("")

functiontoDate()...{

with(document.all)...{

vYear=parseInt(year.options[year.selectedIndex].text)

vMonth=parseInt(month.options[month.selectedIndex].text)

day.length=0;

for(i=0;i<(newDate(vYear,vMonth,0)).getDate();i++)...{day.options[day.length++].value=day.length;day.options[day.length-1].text=day.length;}

}

toDay();

}

functiontoDay()...{

vDay=parseInt(document.all.day.options[document.all.day.selectedIndex].value)

document.all("weekday").value="星期"+arr[newDate(vYear,vMonth-1,vDay).getDay()]

}

window.onload=toDate;

</ script >

10.农历

< script language ="JavaScript" > ...

<!--

functionCalConv()

...{

FIRSTYEAR=1998;

LASTYEAR=2031;

today=newDate();

SolarYear=today.getFullYear();

SolarMonth=today.getMonth()+1;

SolarDate=today.getDate();

Weekday=today.getDay();

LunarCal=[

newtagLunarCal(27,5,3,43,1,0,0,1,0,0,1,1,0,1,1,0,1),

newtagLunarCal(46,0,4,48,1,0,0,1,0,0,1,0,1,1,1,0,1),/**//*88*/

newtagLunarCal(35,0,5,53,1,1,0,0,1,0,0,1,0,1,1,0,1),/**//*89*/

newtagLunarCal(23,4,0,59,1,1,0,1,0,1,0,0,1,0,1,0,1),

newtagLunarCal(42,0,1,4,1,1,0,1,0,1,0,0,1,0,1,0,1),

newtagLunarCal(31,0,2,9,1,1,0,1,1,0,1,0,0,1,0,1,0),

newtagLunarCal(21,2,3,14,0,1,0,1,1,0,1,0,1,0,1,0,1),/**//*93*/

newtagLunarCal(39,0,5,20,0,1,0,1,0,1,1,0,1,0,1,0,1),

newtagLunarCal(28,7,6,25,1,0,1,0,1,0,1,0,1,1,0,1,1),

newtagLunarCal(48,0,0,30,0,0,1,0,0,1,0,1,1,1,0,1,1),

newtagLunarCal(37,0,1,35,1,0,0,1,0,0,1,0,1,1,0,1,1),/**//*97*/

newtagLunarCal(25,5,3,41,1,1,0,0,1,0,0,1,0,1,0,1,1),

newtagLunarCal(44,0,4,46,1,0,1,0,1,0,0,1,0,1,0,1,1),

newtagLunarCal(33,0,5,51,1,0,1,1,0,1,0,0,1,0,1,0,1),

newtagLunarCal(22,4,6,56,1,0,1,1,0,1,0,1,0,1,0,1,0),/**//*101*/

newtagLunarCal(40,0,1,2,1,0,1,1,0,1,0,1,0,1,0,1,0),

newtagLunarCal(30,9,2,7,0,1,0,1,0,1,0,1,1,0,1,0,1),

newtagLunarCal(49,0,3,12,0,1,0,0,1,0,1,1,1,0,1,0,1),

newtagLunarCal(38,0,4,17,1,0,1,0,0,1,0,1,1,0,1,1,0),/**//*105*/

newtagLunarCal(27,6,6,23,0,1,0,1,0,0,1,0,1,0,1,1,1),

newtagLunarCal(46,0,0,28,0,1,0,1,0,0,1,0,1,0,1,1,0),

newtagLunarCal(35,0,1,33,0,1,1,0,1,0,0,1,0,0,1,1,0),

newtagLunarCal(24,4,2,38,0,1,1,1,0,1,0,0,1,0,1,0,1),/**//*109*/

newtagLunarCal(42,0,4,44,0,1,1,0,1,0,1,0,1,0,1,0,1),

newtagLunarCal(31,0,5,49,1,0,1,0,1,1,0,1,0,1,0,1,0),

newtagLunarCal(21,2,6,54,0,1,0,1,0,1,0,1,1,0,1,0,1),

newtagLunarCal(40,0,0,59,0,1,0,0,1,0,1,1,0,1,1,0,1),/**//*113*/

newtagLunarCal(28,6,2,5,1,0,1,0,0,1,0,1,0,1,1,1,0),

newtagLunarCal(47,0,3,10,1,0,1,0,0,1,0,0,1,1,1,0,1),

newtagLunarCal(36,0,4,15,1,1,0,1,0,0,1,0,0,1,1,0,1),

newtagLunarCal(25,5,5,20,1,1,1,0,1,0,0,1,0,0,1,1,0),/**//*117*/

newtagLunarCal(43,0,0,26,1,1,0,1,0,1,0,1,0,0,1,0,1),

newtagLunarCal(32,0,1,31,1,1,0,1,1,0,1,0,1,0,1,0,0),

newtagLunarCal(22,3,2,36,0,1,1,0,1,0,1,1,0,1,0,1,0)];

/**//*民国年每月之日数*/

SolarCal=[31,28,31,30,31,30,31,31,30,31,30,31];

/**//*民国年每月之累积日数,平年与闰年*/

SolarDays=[0,31,59,90,120,151,181,212,243,273,304,334,365,396,0,31,60,91,121,152,182,213,244,274,305,335,366,397];

AnimalIdx=["马","羊","猴","鸡","狗","猪","鼠","牛","虎","兔","龙","蛇"];

LocationIdx=["南","东","北","西"];

if(SolarYear<=FIRSTYEAR||SolarYear>LASTYEAR)return1;

sm=SolarMonth-1;

if(sm<0||sm>11)return2;

leap=GetLeap(SolarYear);

if(sm==1)

d=leap+28;

else

d=SolarCal[sm];

if(SolarDate<1||SolarDate>d)return3;

y=SolarYear-FIRSTYEAR;

acc=SolarDays[leap*14+sm]+SolarDate;

kc=acc+LunarCal[y].BaseKanChih;

Kan=kc%10;

Chih=kc%12;

Location=LocationIdx[kc%4];

Age=kc%60;

if(Age<22)

Age=22-Age;

else

Age=82-Age;

Animal=AnimalIdx[Chih];

if(acc<=LunarCal[y].BaseDays)...{

y--;

LunarYear=SolarYear-1;

leap=GetLeap(LunarYear);

sm+=12;

acc=SolarDays[leap*14+sm]+SolarDate;

}

else

LunarYear=SolarYear;

l1=LunarCal[y].BaseDays;

for(i=0;i<13;i++)...{

l2=l1+LunarCal[y].MonthDays[i]+29;

if(acc<=l2)break;

l1=l2;

}

LunarMonth=i+1;

LunarDate=acc-l1;

im=LunarCal[y].Intercalation;

if(im!=0&&LunarMonth>im)...{

LunarMonth--;

if(LunarMonth==im)LunarMonth=-im;

}

if(LunarMonth>12)LunarMonth-=12;

today=newDate();

functioninitArray()...{

this.length=initArray.arguments.length

for(vari=0;i<this.length;i++)

this[i+1]=initArray.arguments[i]}

vard=newinitArray("星期日","星期一","星期二","星期三","星期四","星期五","星期六");

document.write("<spanclass="jsdhtml">",today.getYear(),"年",today.getMonth()+1,"月",today.getDate(),"日",d[today.getDay()+1],"");

document.write("<spanclass="jsdhtml">【<u>农历"+LunarMonth+"月"+LunarDate+"日</u>】");

return0;

}

/**//*求此民国年是否为闰年,返回0为平年,1为闰年*/

functionGetLeap(year)

...{

if(year%400==0)

return1;

elseif(year%100==0)

return0;

elseif(year%4==0)

return1;

else

return0;

}

functiontagLunarCal(d,i,w,k,m1,m2,m3,m4,m5,m6,m7,m8,m9,m10,m11,m12,m13)...{

this.BaseDays=d;/**//*到民国1月1日到农历正月初一的累积日数*/

this.Intercalation=i;/**//*闰月月份.0==此年没有闰月*/

this.BaseWeekday=w;/**//*此年民国1月1日为星期几再减1*/

this.BaseKanChih=k;/**//*此年民国1月1日之干支序号减1*/

this.MonthDays=[m1,m2,m3,m4,m5,m6,m7,m8,m9,m10,m11,m12,m13];/**//*此农历年每月之大小,0==小月(29日),1==大月(30日)*/

}

//-->

CalConv();

</ script >

11.年历

< html >

< head >

< meta http-equiv ="Content-Type" content ="text/html;charset=gb2312" >

< title > 万年历 </ title >

< style > ...

th{...}{color:#FFF;background-color:#F89807}

td{...}{color:#000;background-color:#FDEDCC}

input,textarea,th,td{...}{font-size:9pt}

</ style >

</ head >

< body >

< div id ="hyout" ></ div >

< script > ...

varhy=newDate()

varhyd=newDate()

varcnt=newArray("日","一","二","三","四","五","六")

functionhyout(hyy,hym)...{

varoutxt=""

outxt+="<tableborder=0width=100%cellspacing=0><tr><th><fontcolor=#FFFFFF>"

outxt+=hym+"月</font>"

outxt+="<tableborder=0width=100%cellspacing=1cellpadding=0><tralign=center>"

for(i=0;i<cnt.length;i++)...{

outxt+="<td>"+cnt[i]+"</td>"

}

outxt+="</tr><tralign=center>"

varj=0

hyd.setYear(hyy)

hyd.setMonth(--hym)

hyd.setDate(1)

for(vari=1;i<=42;i++)...{

if((i%7)==1&&i>1)outxt+="</tr><tralign=center>"

if((i<=hyd.getDay())||(hyd.getMonth()!=hym))...{

outxt+="<td>　</td>"

}else...{

hyd.setDate(++j)

if(hyd.getMonth()==hym)...{

if(hyd.getDate()==hy.getDate()&&hyd.getMonth()==hy.getMonth()&&hyd.getYear()==hy.getYear())...{

outxt+="<th>"+j+"</th>"

}else...{

outxt+="<td>"+j+"</td>"

}

}else...{

outxt+="<td>　</td>"

}

outxt+="</tr></table></th></tr><tr><th></th></tr></table>"

returnoutxt

}

functionhyouty(hyy)...{

hyy=parseFloat(0+hyy)

if(hyy==0)hyy=hy.getYear()

outxt="<tablewidth=100%border=1bordercolor=#000000><form><tr><tdcolspan=4align=right>公元：<inputtype=textname=hyyearsize=4maxlength=4value="+hyy+">年<inputtype=buttonvalue=查看onclick=hyouty(this.form.hyyear.value)></td></form></tr><tr>"

for(vari=1;i<=12;i++)...{

if(i%4==1&&i>1)outxt+="</tr><tr>"

outxt+="<td>"+hyout(hyy,i)+"</td>"

}

outxt+="</tr></table>"

document.all["hyout"].innerHTML=outxt

}

hyouty(hy.getYear())

</ script >

</ body >

</ html >

12.广泛应用的一个日历控件
点评：本控件界面美观，本人在多个企业的系统看到该控件，所以分享给大家。

<% ... @PageLanguage="C#"AutoEventWireup="true"CodeFile="Default2.aspx.cs"Inherits="Default2" %>

< html >

< head runat ="server" >

< title > 日历控件 </ title >

< script type ="text/javascript" src ="popcalendar.js" ></ script >

</ head >

< body >

< form id ="form1" runat ="server" >

< div >

< asp:textbox id ="txt_StartCPXG_DATE" runat ="server" Width ="100px" ReadOnly ="True" CssClass ="edLine" ></ asp:textbox >

< img id ="Image_blqx1" style ="CURSOR:hand" onclick ="popUpCalendar(this,document.forms[0].txt_StartCPXG_DATE,'yyyy-mm-dd')"

src ="images/calendar.gif" /></ div >

</ form >

</ body >

</ html >

图片和js代码 http://download1.youkuaiyun.com/down3/20070514/14145100709.rar