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

转载 2008年09月28日 09:44:00
 
    第一个:是一款强大的日历控件,目前看来是免费的,支持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

不错的js日历控件

源码: /**  * Calendar  * @param   beginYear           1990  * @param   endYear             2010 ...
  • zkg510168343
  • zkg510168343
  • 2014年01月16日 16:01
  • 519

自定义javascript日历控件

Web页中的日历一般离不开表格,通常都使用表格装载指定月的日期等信息。所以,要编写JS日历,首先必须解决的问题是表格的行与列问题。列是固定的,七列,因为一周有七天。行需要动态计算,因为,每一个月的第一...
  • my98800
  • my98800
  • 2017年08月08日 07:45
  • 492

利用JS实现Web日历控件(包括日期和时间)

1.由于项目需要,需要一个精确到分钟的日历控件,具体如下图所示。 2.具体包括WebCalendar.js和一个schedule.jsp两个文件,源码如下。 (1)WebCalendar.js v...
  • Hadas_Wang
  • Hadas_Wang
  • 2016年05月24日 16:19
  • 7211

JS横向日历控件

在网上复制的,修改了一下兼容性,可以兼容谷歌、火狐、苹果、欧朋、IE所有版本 1. [代码][JavaScript]代码      001 ...
  • a759478257
  • a759478257
  • 2013年05月30日 19:32
  • 734

自己写了个JS日历控件与大家分享

一时兴起用原生态JS写了个日历控件,不依赖js框架。 特地与大家分享下,供大家使用 与大家一起学习进步。 /* 使用方法介绍: 在html里加上如下文本框则可 为了计算弹出来的位...
  • tuposky
  • tuposky
  • 2014年10月29日 17:24
  • 2198

js 常用日期控件使用

一、My97DatePicker当前最新版本: 4.8 官网:http://www.my97.net/ csdn下载地址: http://download.csdn.net/detail/czw...
  • czw2010
  • czw2010
  • 2015年04月11日 22:34
  • 8480

html价格日历控件

先上效果图 功能说明: 价格日历显示,价格设置 JS代码 var obj = { date: new Date(), year: -1, month: -1, priceArr: [] };...
  • meimeieee
  • meimeieee
  • 2017年06月07日 17:32
  • 1574

WebView---js调用原生日历控件

效果图 效果图.png html文件 function showDatePickerDialog(){ jk.showDatePicke...
  • jking54
  • jking54
  • 2017年05月16日 09:42
  • 276

简洁JS 日历控件 支持日期和月份选择

以下这个JS日历控件是我的闲暇之余自己编写的,所有的代码全部在IE7/IE8/Firefox下面测试通过, 而且可以解决被iframe层遮盖的问题。现在只提供两种风格(简洁版和古典版)和两种语言(英...
  • feixia_24
  • feixia_24
  • 2014年11月27日 17:35
  • 1904

Calendar 自定义日历控件

CalendarView介绍代码地址:https://github.com/09xuanjian/CalendarView这是一个日历控件,很多时候我们需要把一些信息通过时间戳的方式展示给用户。日历是...
  • u011623470
  • u011623470
  • 2015年12月26日 20:27
  • 752
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章: 在CSDN论坛偶得的两款不错的js日历控件
举报原因:
原因补充:

(最多只允许输入30个字)