在CSDN论坛偶得的两款不错的js日历控件

<!-- Feedsky FEED发布代码开始 --> 欢迎点击此处订阅本Blog <!-- FEED自动发现标记开始 --> <link title="RSS 2.0" type="application/rss+xml" href="http://feed.feedsky.com/softwave" rel="alternate"> <!-- FEED自动发现标记结束 --> Blog 订阅

<!--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,很可惜
代码如下——
  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
  5. <title>无标题文档</title>
  6. <scriptlanguage="JavaScript"type="text/JavaScript">
  7. //日期选择
  8. //ByZiyue(http://www.web-v.com/)
  9. varmonths=newArray("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月");
  10. vardaysInMonth=newArray(31,28,31,30,31,30,31,31,30,31,30,31);
  11. vardays=newArray("日","一","二","三","四","五","六");
  12. vartoday;
  13. document.writeln("<divid='Calendar'style='position:absolute;z-index:1;visibility:hidden;filter:/"progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#999999,strength=3)/"'></div>");
  14. functiongetDays(month,year)
  15. {
  16. //下面的这段代码是判断当前是否是闰年的
  17. if(1==month)
  18. return((0==year%4)&&(0!=(year%100)))||(0==year%400)?29:28;
  19. else
  20. returndaysInMonth[month];
  21. }
  22. functiongetToday()
  23. {
  24. //得到今天的年,月,日
  25. this.now=newDate();
  26. thisthis.year=this.now.getFullYear();
  27. thisthis.month=this.now.getMonth();
  28. thisthis.day=this.now.getDate();
  29. }
  30. functiongetStringDay(str)
  31. {
  32. //得到输入框的年,月,日
  33. varstrstr=str.split("-")
  34. this.now=newDate(parseFloat(str[0]),parseFloat(str[1])-1,parseFloat(str[2]));
  35. thisthis.year=this.now.getFullYear();
  36. thisthis.month=this.now.getMonth();
  37. thisthis.day=this.now.getDate();
  38. }
  39. functionnewCalendar(){
  40. varparseYear=parseInt(document.all.Year.options[document.all.Year.selectedIndex].value);
  41. varnewnewCal=newDate(parseYear,document.all.Month.selectedIndex,1);
  42. varday=-1;
  43. varstartDay=newCal.getDay();
  44. vardaily=0;
  45. if((today.year==newCal.getFullYear())&&(today.month==newCal.getMonth()))
  46. day=today.day;
  47. vartableCal=document.all.calendar;
  48. varintDaysInMonth=getDays(newCal.getMonth(),newCal.getFullYear());
  49. for(varintWeek=1;intWeek<tableCal.rows.length;intWeek++)
  50. for(varintDay=0;intDay<tableCal.rows[intWeek].cells.length;intDay++)
  51. {
  52. varcell=tableCal.rows[intWeek].cells[intDay];
  53. if((intDay==startDay)&&(0==daily))
  54. daily=1;
  55. if(day==daily)//今天,调用今天的Class
  56. {
  57. cell.style.background='#6699CC';
  58. cell.style.color='#FFFFFF';
  59. //cell.style.fontWeight='bold';
  60. }
  61. elseif(intDay==6)//周六
  62. cell.style.color='green';
  63. elseif(intDay==0)//周日
  64. cell.style.color='red';
  65. if((daily>0)&&(daily<=intDaysInMonth))
  66. {
  67. cell.innerText=daily;
  68. daily++;
  69. }
  70. else
  71. cell.innerText="";
  72. }
  73. }
  74. functionGetDate(InputBox)
  75. {
  76. varsDate;
  77. //这段代码处理鼠标点击的情况
  78. if(event.srcElement.tagName=="TD")
  79. if(event.srcElement.innerText!="")
  80. {
  81. sDate=document.all.Year.value+"-"+document.all.Month.value+"-"+event.srcElement.innerText;
  82. eval("document.all."+InputBox).value=sDate;
  83. HiddenCalendar();
  84. }
  85. }
  86. functionHiddenCalendar()
  87. {
  88. //关闭选择窗口
  89. document.all.Calendar.style.visibility='hidden';
  90. }
  91. functionShowCalendar(InputBox)
  92. {
  93. varx,y,intLoop,intWeeks,intDays;
  94. varDivContent;
  95. varyear,month,day;
  96. varo=eval("document.all."+InputBox);
  97. varthisyear;//真正的今年年份
  98. thisyear=newgetToday();
  99. thisyearthisyear=thisyear.year;
  100. today=o.value;
  101. if(isDate(today))
  102. today=newgetStringDay(today);
  103. else
  104. today=newgetToday();
  105. //显示的位置
  106. x=o.offsetLeft;
  107. y=o.offsetTop;
  108. while(oo=o.offsetParent)
  109. {
  110. x+=o.offsetLeft;
  111. y+=o.offsetTop;
  112. }
  113. document.all.Calendar.style.left=x+2;
  114. document.all.Calendar.style.top=y+20;
  115. document.all.Calendar.style.visibility="visible";
  116. //下面开始输出日历表格(border-color:#9DBAF7)
  117. DivContent="<tableborder='0'cellspacing='0'style='border:1pxsolid#0066FF;background-color:#EDF2FC'>";
  118. DivContent+="<tr>";
  119. DivContent+="<tdstyle='border-bottom:1pxsolid#0066FF;background-color:#C7D8FA'>";
  120. //年
  121. DivContent+="<selectname='Year'id='Year'onChange='newCalendar()'style='font-family:Verdana;font-size:12px'>";
  122. for(intLoop=thisyear-35;intLoop<(thisyear+2);intLoop++)
  123. DivContent+="<optionvalue="+intLoop+""+(today.year==intLoop?"Selected":"")+">"+intLoop+"</option>";
  124. DivContent+="</select>";
  125. //月
  126. DivContent+="<selectname='Month'id='Month'onChange='newCalendar()'style='font-family:Verdana;font-size:12px'>";
  127. for(intLoop=0;intLoop<months.length;intLoop++)
  128. DivContent+="<optionvalue="+(intLoop+1)+""+(today.month==intLoop?"Selected":"")+">"+months[intLoop]+"</option>";
  129. DivContent+="</select>";
  130. DivContent+="</td>";
  131. 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>";
  132. DivContent+="</tr>";
  133. DivContent+="<tr><tdalign='center'colspan='2'>";
  134. DivContent+="<tableid='calendar'border='0'width='100%'>";
  135. //星期
  136. DivContent+="<tr>";
  137. for(intLoop=0;intLoop<days.length;intLoop++)
  138. DivContent+="<tdalign='center'style='font-size:12px'>"+days[intLoop]+"</td>";
  139. DivContent+="</tr>";
  140. //天
  141. for(intWeeks=0;intWeeks<6;intWeeks++)
  142. {
  143. DivContent+="<tr>";
  144. for(intDays=0;intDays<days.length;intDays++)
  145. 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>";
  146. DivContent+="</tr>";
  147. }
  148. DivContent+="</table></td></tr></table>";
  149. document.all.Calendar.innerHTML=DivContent;
  150. newCalendar();
  151. }
  152. functionisDate(dateStr)
  153. {
  154. vardatePat=/^(/d{4})(/-)(/d{1,2})(/-)(/d{1,2})$/;
  155. varmatchArray=dateStr.match(datePat);
  156. if(matchArray==null)returnfalse;
  157. varmonth=matchArray[3];
  158. varday=matchArray[5];
  159. varyear=matchArray[1];
  160. if(month<1||month>12)returnfalse;
  161. if(day<1||day>31)returnfalse;
  162. if((month==4||month==6||month==9||month==11)&&day==31)returnfalse;
  163. if(month==2)
  164. {
  165. varisleap=(year%4==0&&(year%100!=0||year%400==0));
  166. if(day>29||(day==29&&!isleap))returnfalse;
  167. }
  168. returntrue;
  169. }
  170. </script>
  171. </head>
  172. <body>
  173. <trstyle="background:#F3F3F3;">
  174. <tdclass="label">出生年月:</td>
  175. <tdclass="style1">
  176. <inputname="birth"type="text"id="birth"title="点击选择"onClick="javascript:ShowCalendar(this.id)"size="27">
  177. <inputtype="button"name="Submit"value="选择"onClick="javascript:ShowCalendar('birth')">
  178. </td>
  179. </tr>
  180. </body>
  181. </html>
经测试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&amp;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发布代码结束 -->

你可能感兴趣的:(csdn)