CSDN博客

img luanmad

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

发表于2008/9/28 9:44:00  344人阅读

 
    第一个:是一款强大的日历控件,目前看来是免费的,支持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. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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. // By Ziyue(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. var today; 

  13. 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>");

  14. function getDays(month, year)
  15. //下面的这段代码是判断当前是否是闰年的 
  16. if (1 == month) 
  17. return ((0 == year % 4) && (0 != (year % 100))) || (0 == year % 400) ? 29 : 28; 
  18. else 
  19. return daysInMonth[month]; 

  20. function getToday() 
  21. //得到今天的年,月,日 
  22. this.now = new Date(); 
  23. thisthis.year = this.now.getFullYear(); 
  24. thisthis.month = this.now.getMonth(); 
  25. thisthis.day = this.now.getDate(); 
  26. }

  27. function getStringDay(str) 
  28. //得到输入框的年,月,日
  29. var strstr=str.split("-")

  30. this.now = new Date(parseFloat(str[0]),parseFloat(str[1])-1,parseFloat(str[2])); 
  31. thisthis.year = this.now.getFullYear(); 
  32. thisthis.month = this.now.getMonth(); 
  33. thisthis.day = this.now.getDate(); 
  34. }

  35. function newCalendar() { 
  36. var parseYear = parseInt(document.all.Year.options[document.all.Year.selectedIndex].value); 
  37. var newnewCal = new Date(parseYear, document.all.Month.selectedIndex, 1); 
  38. var day = -1; 
  39. var startDay = newCal.getDay(); 
  40. var daily = 0

  41. if ((today.year == newCal.getFullYear()) &&(today.month == newCal.getMonth())) 
  42. day = today.day; 

  43. var tableCal = document.all.calendar; 
  44. var intDaysInMonth =getDays(newCal.getMonth(), newCal.getFullYear());

  45. for (var intWeek = 1; intWeek < tableCal.rows.length;intWeek++) 
  46. for (var intDay = 0;intDay < tableCal.rows[intWeek].cells.length;intDay++) 
  47. var cell = tableCal.rows[intWeek].cells[intDay]; 
  48. if ((intDay == startDay) && (0 == daily)) 
  49. daily = 1

  50. if(day==daily) //今天,调用今天的Class 
  51. {
  52. cell.style.background='#6699CC';
  53. cell.style.color='#FFFFFF';
  54. //cell.style.fontWeight='bold';
  55. }
  56. else if(intDay==6) //周六 
  57. cell.style.color='green'
  58. else if (intDay==0) //周日 
  59. cell.style.color='red';

  60. if ((daily > 0) && (daily <= intDaysInMonth)) 
  61. cell.innerText = daily
  62. daily++; 
  63. else 
  64. cell.innerText = ""

  65. function GetDate(InputBox)
  66. var sDate; 
  67. //这段代码处理鼠标点击的情况 
  68. if (event.srcElement.tagName == "TD") 
  69. if (event.srcElement.innerText != "") 
  70. sDate = document.all.Year.value + "-" + document.all.Month.value + "-" + event.srcElement.innerText;
  71. eval("document.all."+InputBox).value=sDate;
  72. HiddenCalendar();

  73. function HiddenCalendar()
  74. {
  75. //关闭选择窗口
  76. document.all.Calendar.style.visibility='hidden';
  77. }

  78. function ShowCalendar(InputBox)
  79. {
  80. var x,y,intLoop,intWeeks,intDays;
  81. var DivContent;
  82. var year,month,day;
  83. var o=eval("document.all."+InputBox);
  84. var thisyear; //真正的今年年份

  85. thisyear=new getToday();
  86. thisyearthisyear=thisyear.year;

  87. today = o.value;
  88. if(isDate(today))
  89. today = new getStringDay(today);
  90. else
  91. today = new getToday(); 

  92. //显示的位置
  93. x=o.offsetLeft;
  94. y=o.offsetTop;
  95. while(oo=o.offsetParent)
  96. {
  97. x+=o.offsetLeft;
  98. y+=o.offsetTop;
  99. }
  100. document.all.Calendar.style.left=x+2;
  101. document.all.Calendar.style.top=y+20;
  102. document.all.Calendar.style.visibility="visible";

  103. //下面开始输出日历表格(border-color:#9DBAF7)
  104. DivContent="<table border='0' cellspacing='0' style='border:1px solid #0066FF; background-color:#EDF2FC'>";
  105. DivContent+="<tr>";
  106. DivContent+="<td style='border-bottom:1px solid #0066FF; background-color:#C7D8FA'>";

  107. //年
  108. DivContent+="<select name='Year' id='Year' onChange='newCalendar()' style='font-family:Verdana; font-size:12px'>";
  109. for (intLoop = thisyear - 35; intLoop < (thisyear + 2); intLoop++) 
  110. DivContent+="<option value" + intLoop + " " + (today.year == intLoop ? "Selected" : "") + ">" + intLoop + "</option>"; 
  111. DivContent+="</select>";

  112. //月
  113. DivContent+="<select name='Month' id='Month' onChange='newCalendar()' style='font-family:Verdana; font-size:12px'>";
  114. for (intLoop = 0; intLoop < months.length; intLoop++) 
  115. DivContent+="<option value" + (intLoop + 1) + " " + (today.month == intLoop ? "Selected" : "") + ">" + months[intLoop] + "</option>"; 
  116. DivContent+="</select>";

  117. DivContent+="</td>";

  118. DivContent+="<td style='border-bottom:1px solid #0066FF; background-color:#C7D8FA; font-weight:bold; font-family:Wingdings 2,Wingdings,Webdings; font-size:16px; padding-top:2px; color:#4477FF; cursor:hand' align='center' title='关闭' onClick='javascript:HiddenCalendar()'>S</td>";
  119. DivContent+="</tr>";

  120. DivContent+="<tr><td align='center' colspan='2'>";
  121. DivContent+="<table id='calendar' border='0' width='100%'>";

  122. //星期
  123. DivContent+="<tr>";
  124. for (intLoop = 0; intLoop < days.length; intLoop++) 
  125. DivContent+="<td align='center' style='font-size:12px'>" + days[intLoop] + "</td>"; 
  126. DivContent+="</tr>";

  127. //天
  128. for (intWeeks = 0; intWeeks < 6; intWeeks++)
  129. DivContent+="<tr>"; 
  130. for (intDays = 0; intDays < days.length; intDays++) 
  131. DivContent+="<td onClick='GetDate(/"" + InputBox + "/")' style='cursor:hand; border-right:1px solid #BBBBBB; border-bottom:1px solid #BBBBBB; color:#215DC6; font-family:Verdana; font-size:12px' align='center'></td>"; 
  132. DivContent+="</tr>"; 
  133. DivContent+="</table></td></tr></table>";

  134. document.all.Calendar.innerHTML=DivContent;
  135. newCalendar();
  136. }

  137. function isDate(dateStr)
  138. var datePat = /^(/d{4})(/-)(/d{1,2})(/-)(/d{1,2})$/;
  139. var matchArray = dateStr.match(datePat);
  140. if (matchArray == null) return false; 
  141. var month = matchArray[3];
  142. var day = matchArray[5]; 
  143. var year = matchArray[1]; 
  144. if (month < 1 || month > 12) return false; 
  145. if (day < 1 || day > 31) return false; 
  146. if ((month==4 || month==6 || month==9 || month==11) && day==31) return false; 
  147. if (month == 2)
  148. {
  149. var isleap = (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0)); 
  150. if (day > 29 || (day==29 && !isleap)) return false; 
  151. return true;
  152. }
  153. </script>
  154. </head>

  155. <body>
  156. <tr style="background:#F3F3F3;">
  157. <td  class="label">出生年月: </td>
  158. <td class="style1">
  159. <input name="birth" type="text" id="birth" title="点击选择" onClick="javascript:ShowCalendar(this.id)" size="27">
  160. <input type="button" name="Submit" value="选 择" onClick="javascript:ShowCalendar('birth')"> 

  161. </td> 
  162. </tr>
  163. </body>
  164. </html>
    经测试IE可用,直接粘贴代码即可。
    感谢CSDN论坛的flysocket和sy_binbin二位 原帖地址在此:http://topic.csdn.net/u/20080830/15/8b23fa0a-bac4-4d2f-93c4-3d4cee55b048.html
0 0

相关博文

我的热门文章

img
取 消
img