" />
注册 登录
> 编程技术

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

系统 1521 0
<!-- 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. < html xmlns = "http://www.w3.org/1999/xhtml" >
  3. < head >
  4. < meta http-equiv = "Content-Type" content = "text/html;charset=gb2312" />
  5. < title > 无标题文档 </ title >
  6. < script language = "JavaScript" type = "text/JavaScript" >
  7. //日期选择
  8. //ByZiyue(http://www.web-v.com/)
  9. var months = new Array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月");
  10. var daysInMonth = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
  11. var days = new Array("日","一","二","三","四","五","六");
  12. vartoday;
  14. document.writeln(" < div id = 'Calendar' style = 'position:absolute;z-index:1;visibility:hidden;filter:/"progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#999999,strength=3)/"' > </ div > ");
  16. functiongetDays(month,year)
  17. {
  18. //下面的这段代码是判断当前是否是闰年的
  19. if( 1 ==month)
  20. return(( 0 ==year%4)&&(0!=(year%100)))||( 0 ==year%400)?29:28;
  21. else
  22. returndaysInMonth[month];
  23. }
  25. functiongetToday()
  26. {
  27. //得到今天的年,月,日
  28. this.now = new Date();
  29. this this.year =this.now.getFullYear();
  30. this this.month =this.now.getMonth();
  31. this this.day =this.now.getDate();
  32. }
  34. functiongetStringDay(str)
  35. {
  36. //得到输入框的年,月,日
  37. var str str =str.split("-")
  39. this.now = new Date(parseFloat(str[0]),parseFloat(str[1])-1,parseFloat(str[2]));
  40. this this.year =this.now.getFullYear();
  41. this this.month =this.now.getMonth();
  42. this this.day =this.now.getDate();
  43. }
  45. functionnewCalendar(){
  46. var parseYear = parseInt (document.all.Year.options[document.all.Year.selectedIndex].value);
  47. var new newCal =newDate(parseYear,document.all.Month.selectedIndex,1);
  48. var day =-1;
  49. var startDay = newCal .getDay();
  50. var daily = 0 ;
  52. if(( today.year ==newCal.getFullYear())&&( today.month ==newCal.getMonth()))
  53. day = today .day;
  55. var tableCal = document .all.calendar;
  56. var intDaysInMonth = getDays (newCal.getMonth(),newCal.getFullYear());
  58. for(var intWeek = 1 ;intWeek < tableCal.rows.length ;intWeek++)
  59. for(var intDay = 0 ;intDay < tableCal.rows [intWeek].cells.length;intDay++)
  60. {
  61. var cell = tableCal .rows[intWeek].cells[intDay];
  62. if(( intDay ==startDay)&&( 0 ==daily))
  63. daily = 1 ;
  65. if( day ==daily)//今天，调用今天的Class
  66. {
  67. cell.style.background = '#6699CC' ;
  68. cell.style.color = '#FFFFFF' ;
  69. // cell.style.fontWeight = 'bold' ;
  70. }
  71. elseif( intDay ==6)//周六
  72. cell.style.color = 'green' ;
  73. elseif( intDay ==0)//周日
  74. cell.style.color = 'red' ;
  76. if((daily > 0)&&(daily < =intDaysInMonth))
  77. {
  78. cell.innerText = daily ;
  79. daily++;
  80. }
  81. else
  82. cell.innerText = "" ;
  83. }
  84. }
  86. functionGetDate(InputBox)
  87. {
  88. varsDate;
  89. //这段代码处理鼠标点击的情况
  90. if( event.srcElement.tagName =="TD")
  91. if(event.srcElement.innerText!="")
  92. {
  93. sDate = document .all.Year.value+"-"+document.all.Month.value+"-"+event.srcElement.innerText;
  94. eval("document.all."+InputBox) .value = sDate ;
  95. HiddenCalendar();
  96. }
  97. }
  99. functionHiddenCalendar()
  100. {
  101. //关闭选择窗口
  102. document.all.Calendar.style.visibility = 'hidden' ;
  103. }
  105. functionShowCalendar(InputBox)
  106. {
  107. varx,y,intLoop,intWeeks,intDays;
  108. varDivContent;
  109. varyear,month,day;
  110. var o = eval ("document.all."+InputBox);
  111. varthisyear;//真正的今年年份
  113. thisyear = new getToday();
  114. thisyear thisyear =thisyear.year;
  116. today =o.value;
  117. if(isDate(today))
  118. today = new getStringDay(today);
  119. else
  120. today = new getToday();
  122. //显示的位置
  123. x = o .offsetLeft;
  124. y = o .offsetTop;
  125. while( o o =o.offsetParent)
  126. {
  127. x+=o.offsetLeft;
  128. y+=o.offsetTop;
  129. }
  130. document.all.Calendar.style.left = x +2;
  131. document.all.Calendar.style.top =y+20;
  132. document.all.Calendar.style.visibility = "visible" ;
  134. //下面开始输出日历表格(border-color:#9DBAF7)
  135. DivContent = "<tableborder='0'cellspacing='0'style='border:1pxsolid#0066FF;background-color:#EDF2FC'>" ;
  136. DivContent+=" < tr > ";
  137. DivContent+=" < td style = 'border-bottom:1pxsolid#0066FF;background-color:#C7D8FA' > ";
  139. //年
  140. DivContent+=" < select name = 'Year' id = 'Year' onChange = 'newCalendar()' style = 'font-family:Verdana;font-size:12px' > ";
  141. for( intLoop = thisyear -35;intLoop < (thisyear+2);intLoop++)
  142. DivContent+=" < option value = "+intLoop+" "+( today.year ==intLoop?"Selected":"")+" > "+intLoop+" </ option > ";
  143. DivContent+=" </ select > ";
  145. //月
  146. DivContent+=" < select name = 'Month' id = 'Month' onChange = 'newCalendar()' style = 'font-family:Verdana;font-size:12px' > ";
  147. for( intLoop = 0 ;intLoop < months.length ;intLoop++)
  148. DivContent+=" < option value = "+(intLoop+1)+" "+( today.month ==intLoop?"Selected":"")+" > "+months[intLoop]+" </ option > ";
  149. DivContent+=" </ select > ";
  151. DivContent+=" </ td > ";
  153. DivContent+=" < td style = '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 > ";
  154. DivContent+=" </ tr > ";
  156. DivContent+=" < tr > < td align = 'center' colspan = '2' > ";
  157. DivContent+=" < table id = 'calendar' border = '0' width = '100%' > ";
  159. //星期
  160. DivContent+=" < tr > ";
  161. for( intLoop = 0 ;intLoop < days.length ;intLoop++)
  162. DivContent+=" < td align = 'center' style = 'font-size:12px' > "+days[intLoop]+" </ td > ";
  163. DivContent+=" </ tr > ";
  165. //天
  166. for( intWeeks = 0 ;intWeeks < 6 ;intWeeks++)
  167. {
  168. DivContent+=" < tr > ";
  169. for( intDays = 0 ;intDays < days.length ;intDays++)
  170. DivContent+=" < td onClick = 'GetDate(/""+InputBox+"/")' style = 'cursor:hand;border-right:1pxsolid#BBBBBB;border-bottom:1pxsolid#BBBBBB;color:#215DC6;font-family:Verdana;font-size:12px' align = 'center' > </ td > ";
  171. DivContent+=" </ tr > ";
  172. }
  173. DivContent+=" </ table > </ td > </ tr > </ table > ";
  175. document.all.Calendar.innerHTML = DivContent ;
  176. newCalendar();
  177. }
  179. functionisDate(dateStr)
  180. {
  181. var datePat =/^(/d{4})(/-)(/d{1,2})(/-)(/d{1,2})$/;
  182. var matchArray = dateStr .match(datePat);
  183. if( matchArray ==null)returnfalse;
  184. var month = matchArray [3];
  185. var day = matchArray [5];
  186. var year = matchArray [1];
  187. if(month < 1 ||month > 12)returnfalse;
  188. if(day < 1 ||day > 31)returnfalse;
  189. if(( month ==4|| month ==6|| month ==9|| month ==11)&& day ==31)returnfalse;
  190. if( month ==2)
  191. {
  192. var isleap =(year% 4 ==0&&(year%100!=0||year% 400 ==0));
  193. if(day > 29||( day ==29&&!isleap))returnfalse;
  194. }
  195. returntrue;
  196. }
  197. </ script >
  198. </ head >
  200. < body >
  201. < tr style = "background:#F3F3F3;" >
  202. < td class = "label" > 出生年月： </ td >
  203. < td class = "style1" >
  204. < input name = "birth" type = "text" id = "birth" title = "点击选择" onClick = "javascript:ShowCalendar(this.id)" size = "27" >
  205. < input type = "button" name = "Submit" value = "选择" onClick = "javascript:ShowCalendar('birth')" >
  207. </ td >
  208. </ tr >
  209. </ body >
  210. </ 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论坛偶得的两款不错的js日历控件


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索：z360901061

微信扫一扫加我为好友

QQ号联系： 360901061

您的支持是博主写作最大的动力，如果您喜欢我的文章，感觉我的文章对您有帮助，请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧，狠狠点击下面给点支持吧，站长非常感激您！手机微信长按不能支付解决办法：请将微信支付二维码保存到相册，切换到微信，然后点击微信右上角扫一扫功能，选择支付二维码完成支付。

【本文对您有帮助就好】元

您的支持是博主写作最大的动力，如果您喜欢我的文章，感觉我的文章对您有帮助，请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧，站长会非常 感谢您的哦！！！

发表我的评论
最新评论 总共0条评论