在CSDN论坛偶得的两款不错的js日历控件
<!-- Feedsky FEED发布代码开始 -->
欢迎点击此处订阅本Blog <!-- FEED自动发现标记开始 --> <link title="RSS 2.0" type="application/rss+xml" href="http://feed.feedsky.com/softwave" rel="alternate"> <!-- FEED自动发现标记结束 -->
<!--Google 468*60横幅广告开始--><script type="text/javascript"><!-- google_ad_client = "pub-7343546549496470"; google_ad_width = 468; google_ad_height = 60; google_ad_format = "468x60_as"; google_ad_type = "image"; //2007-07-26: CSDN google_ad_channel = "6063905817"; google_color_border = "6699CC"; google_color_bg = "E6E6E6"; google_color_link = "FFFFFF"; google_color_text = "333333"; google_color_url = "AECCEB"; google_ui_features = "rc:6"; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script><!--Google 468*60横幅广告结束-->
第一个：是一款强大的日历控件，目前看来是免费的，支持IE 6.0+/Firefox 2.0+/Opera 9.5+/Safari 3.0+
下载地址： http://www.my97.net/dp/index.asp
这里是作者在CSDN的blog： http://blog.csdn.net/my97/
第二个：简洁的JS代码控件，直接放在文件中即可，不需任何外部文件。但是似乎不支持FF，很可惜
代码如下——
经测试IE可用，直接粘贴代码即可。
感谢CSDN论坛的flysocket和sy_binbin二位 原帖地址在此： http://topic.csdn.net/u/20080830/15/8b23fa0a-bac4-4d2f-93c4-3d4cee55b048.html
<!--新Google 468*60横幅广告开始--><script type="text/javascript"><!-- google_ad_client = "pub-7343546549496470"; /* 468x60, 创建于 08-8-6 */ google_ad_slot = "7368701459"; google_ad_width = 468; google_ad_height = 60; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script><!--新Google 468*60横幅广告结束-->
<!--新Google 468x15 横链接单元开始--><script type="text/javascript"><!-- google_ad_client = "pub-7343546549496470"; /* 468x15 横链接单元 */ google_ad_slot = "5785741422"; google_ad_width = 468; google_ad_height = 15; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script><!--新Google 468x15 横链接单元结束-->
<!-- Google Reader shared发布代码开始 --><script type="text/javascript" src="http://www.google.com/reader/ui/publisher.js"></script><script type="text/javascript" src="http://www.google.com/reader/public/javascript/user/00697638153916680411/state/com.google/broadcast?n=5&callback=GRC_p(%7Bc%3A%22green%22%2Ct%3A%22%5Cu8FD9%5Cu4E9B%5Cu6587%5Cu7AE0%5Cu4E5F%5Cu503C%5Cu5F97%5Cu4E00%5Cu770B%22%2Cs%3A%22false%22%7D)%3Bnew%20GRC"></script><!-- Google Reader shared发布代码结束 -->
<!--Google 468*60横幅广告开始--><script type="text/javascript"><!-- google_ad_client = "pub-7343546549496470"; google_ad_width = 468; google_ad_height = 60; google_ad_format = "468x60_as"; google_ad_type = "image"; //2007-07-26: CSDN google_ad_channel = "6063905817"; google_color_border = "6699CC"; google_color_bg = "E6E6E6"; google_color_link = "FFFFFF"; google_color_text = "333333"; google_color_url = "AECCEB"; google_ui_features = "rc:6"; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script><!--Google 468*60横幅广告结束-->
第一个：是一款强大的日历控件，目前看来是免费的，支持IE 6.0+/Firefox 2.0+/Opera 9.5+/Safari 3.0+
下载地址： http://www.my97.net/dp/index.asp
这里是作者在CSDN的blog： http://blog.csdn.net/my97/
第二个：简洁的JS代码控件，直接放在文件中即可，不需任何外部文件。但是似乎不支持FF，很可惜
代码如下——
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <htmlxmlns="http://www.w3.org/1999/xhtml">
- <head>
- <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
- <title>无标题文档</title>
- <scriptlanguage="JavaScript"type="text/JavaScript">
- //日期选择
- //ByZiyue(http://www.web-v.com/)
- varmonths=newArray("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月");
- vardaysInMonth=newArray(31,28,31,30,31,30,31,31,30,31,30,31);
- vardays=newArray("日","一","二","三","四","五","六");
- vartoday;
- document.writeln("<divid='Calendar'style='position:absolute;z-index:1;visibility:hidden;filter:/"progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#999999,strength=3)/"'></div>");
- functiongetDays(month,year)
- {
- //下面的这段代码是判断当前是否是闰年的
- if(1==month)
- return((0==year%4)&&(0!=(year%100)))||(0==year%400)?29:28;
- else
- returndaysInMonth[month];
- }
- functiongetToday()
- {
- //得到今天的年,月,日
- this.now=newDate();
- thisthis.year=this.now.getFullYear();
- thisthis.month=this.now.getMonth();
- thisthis.day=this.now.getDate();
- }
- functiongetStringDay(str)
- {
- //得到输入框的年,月,日
- varstrstr=str.split("-")
- this.now=newDate(parseFloat(str[0]),parseFloat(str[1])-1,parseFloat(str[2]));
- thisthis.year=this.now.getFullYear();
- thisthis.month=this.now.getMonth();
- thisthis.day=this.now.getDate();
- }
- functionnewCalendar(){
- varparseYear=parseInt(document.all.Year.options[document.all.Year.selectedIndex].value);
- varnewnewCal=newDate(parseYear,document.all.Month.selectedIndex,1);
- varday=-1;
- varstartDay=newCal.getDay();
- vardaily=0;
- if((today.year==newCal.getFullYear())&&(today.month==newCal.getMonth()))
- day=today.day;
- vartableCal=document.all.calendar;
- varintDaysInMonth=getDays(newCal.getMonth(),newCal.getFullYear());
- for(varintWeek=1;intWeek<tableCal.rows.length;intWeek++)
- for(varintDay=0;intDay<tableCal.rows[intWeek].cells.length;intDay++)
- {
- varcell=tableCal.rows[intWeek].cells[intDay];
- if((intDay==startDay)&&(0==daily))
- daily=1;
- if(day==daily)//今天，调用今天的Class
- {
- cell.style.background='#6699CC';
- cell.style.color='#FFFFFF';
- //cell.style.fontWeight='bold';
- }
- elseif(intDay==6)//周六
- cell.style.color='green';
- elseif(intDay==0)//周日
- cell.style.color='red';
- if((daily>0)&&(daily<=intDaysInMonth))
- {
- cell.innerText=daily;
- daily++;
- }
- else
- cell.innerText="";
- }
- }
- functionGetDate(InputBox)
- {
- varsDate;
- //这段代码处理鼠标点击的情况
- if(event.srcElement.tagName=="TD")
- if(event.srcElement.innerText!="")
- {
- sDate=document.all.Year.value+"-"+document.all.Month.value+"-"+event.srcElement.innerText;
- eval("document.all."+InputBox).value=sDate;
- HiddenCalendar();
- }
- }
- functionHiddenCalendar()
- {
- //关闭选择窗口
- document.all.Calendar.style.visibility='hidden';
- }
- functionShowCalendar(InputBox)
- {
- varx,y,intLoop,intWeeks,intDays;
- varDivContent;
- varyear,month,day;
- varo=eval("document.all."+InputBox);
- varthisyear;//真正的今年年份
- thisyear=newgetToday();
- thisyearthisyear=thisyear.year;
- today=o.value;
- if(isDate(today))
- today=newgetStringDay(today);
- else
- today=newgetToday();
- //显示的位置
- x=o.offsetLeft;
- y=o.offsetTop;
- while(oo=o.offsetParent)
- {
- x+=o.offsetLeft;
- y+=o.offsetTop;
- }
- document.all.Calendar.style.left=x+2;
- document.all.Calendar.style.top=y+20;
- document.all.Calendar.style.visibility="visible";
- //下面开始输出日历表格(border-color:#9DBAF7)
- DivContent="<tableborder='0'cellspacing='0'style='border:1pxsolid#0066FF;background-color:#EDF2FC'>";
- DivContent+="<tr>";
- DivContent+="<tdstyle='border-bottom:1pxsolid#0066FF;background-color:#C7D8FA'>";
- //年
- DivContent+="<selectname='Year'id='Year'onChange='newCalendar()'style='font-family:Verdana;font-size:12px'>";
- for(intLoop=thisyear-35;intLoop<(thisyear+2);intLoop++)
- DivContent+="<optionvalue="+intLoop+""+(today.year==intLoop?"Selected":"")+">"+intLoop+"</option>";
- DivContent+="</select>";
- //月
- DivContent+="<selectname='Month'id='Month'onChange='newCalendar()'style='font-family:Verdana;font-size:12px'>";
- for(intLoop=0;intLoop<months.length;intLoop++)
- DivContent+="<optionvalue="+(intLoop+1)+""+(today.month==intLoop?"Selected":"")+">"+months[intLoop]+"</option>";
- DivContent+="</select>";
- DivContent+="</td>";
- DivContent+="<tdstyle='border-bottom:1pxsolid#0066FF;background-color:#C7D8FA;font-weight:bold;font-family:Wingdings2,Wingdings,Webdings;font-size:16px;padding-top:2px;color:#4477FF;cursor:hand'align='center'title='关闭'onClick='javascript:HiddenCalendar()'>S</td>";
- DivContent+="</tr>";
- DivContent+="<tr><tdalign='center'colspan='2'>";
- DivContent+="<tableid='calendar'border='0'width='100%'>";
- //星期
- DivContent+="<tr>";
- for(intLoop=0;intLoop<days.length;intLoop++)
- DivContent+="<tdalign='center'style='font-size:12px'>"+days[intLoop]+"</td>";
- DivContent+="</tr>";
- //天
- for(intWeeks=0;intWeeks<6;intWeeks++)
- {
- DivContent+="<tr>";
- for(intDays=0;intDays<days.length;intDays++)
- DivContent+="<tdonClick='GetDate(/""+InputBox+"/")'style='cursor:hand;border-right:1pxsolid#BBBBBB;border-bottom:1pxsolid#BBBBBB;color:#215DC6;font-family:Verdana;font-size:12px'align='center'></td>";
- DivContent+="</tr>";
- }
- DivContent+="</table></td></tr></table>";
- document.all.Calendar.innerHTML=DivContent;
- newCalendar();
- }
- functionisDate(dateStr)
- {
- vardatePat=/^(/d{4})(/-)(/d{1,2})(/-)(/d{1,2})$/;
- varmatchArray=dateStr.match(datePat);
- if(matchArray==null)returnfalse;
- varmonth=matchArray[3];
- varday=matchArray[5];
- varyear=matchArray[1];
- if(month<1||month>12)returnfalse;
- if(day<1||day>31)returnfalse;
- if((month==4||month==6||month==9||month==11)&&day==31)returnfalse;
- if(month==2)
- {
- varisleap=(year%4==0&&(year%100!=0||year%400==0));
- if(day>29||(day==29&&!isleap))returnfalse;
- }
- returntrue;
- }
- </script>
- </head>
- <body>
- <trstyle="background:#F3F3F3;">
- <tdclass="label">出生年月：</td>
- <tdclass="style1">
- <inputname="birth"type="text"id="birth"title="点击选择"onClick="javascript:ShowCalendar(this.id)"size="27">
- <inputtype="button"name="Submit"value="选择"onClick="javascript:ShowCalendar('birth')">
- </td>
- </tr>
- </body>
- </html>
感谢CSDN论坛的flysocket和sy_binbin二位 原帖地址在此： http://topic.csdn.net/u/20080830/15/8b23fa0a-bac4-4d2f-93c4-3d4cee55b048.html
<!--新Google 468*60横幅广告开始--><script type="text/javascript"><!-- google_ad_client = "pub-7343546549496470"; /* 468x60, 创建于 08-8-6 */ google_ad_slot = "7368701459"; google_ad_width = 468; google_ad_height = 60; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script><!--新Google 468*60横幅广告结束-->
<!--新Google 468x15 横链接单元开始--><script type="text/javascript"><!-- google_ad_client = "pub-7343546549496470"; /* 468x15 横链接单元 */ google_ad_slot = "5785741422"; google_ad_width = 468; google_ad_height = 15; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script><!--新Google 468x15 横链接单元结束-->
<!-- Google Reader shared发布代码开始 --><script type="text/javascript" src="http://www.google.com/reader/ui/publisher.js"></script><script type="text/javascript" src="http://www.google.com/reader/public/javascript/user/00697638153916680411/state/com.google/broadcast?n=5&callback=GRC_p(%7Bc%3A%22green%22%2Ct%3A%22%5Cu8FD9%5Cu4E9B%5Cu6587%5Cu7AE0%5Cu4E5F%5Cu503C%5Cu5F97%5Cu4E00%5Cu770B%22%2Cs%3A%22false%22%7D)%3Bnew%20GRC"></script><!-- Google Reader shared发布代码结束 -->