原文出处

以下这个JS日历控件是我的闲暇之余自己编写的，所有的代码全部在IE7/IE8/Firefox下面测试通过，

而且可以解决被iframe层遮盖的问题。现在只提供两种风格（简洁版和古典版）和两种语言（英文和中文）。支持自定义日期格式，设定时间范围。

默认为古典版，英文，下面来看简单的缩略图。

首先是简洁版：

日期选择器：

月份选择器：

然后是古典版：

日期选择器：

日期选择器中文语言

月份选择器

下面是使用方法：

在要使用这个控件的页面上引入这个JS

<script type="text/javascript" src="javascript/DatePicker.js"></script>

使用月份选择器，默认时间格式为yyyy-MM

<input id="begintime" type="text" onclick="setmonth(this)" readonly="readonly" />

使用日期选择器，默认时间格式为yyyy-MM-dd
<input id="endtime" type="text" onfocus="setday(this)" readonly="readonly" />

使用日期选择器，一共提供五个参数，其中第一个参数是Object类型，指需要填入日期的元素对象；第二个参数是时间的格式，默认为yyyy-MM-dd；第三、四个参数分别为开始时间和结束时间；第五个参数是语言种类，这个1表示中文，0为英文（默认采用英文）
<input id="endtime" type="text" onfocus="setday(this,'yyyy-MM-dd','2010-01-01','2010-12-30',1)" readonly="readonly" />

风格默认使用古典版，如果需要使用简洁版，则进入代码中
将上述代码中的上部分代码（38行-63行）注释，在把他换成下面部分的代码（67行-90行）。则风格就可以改为简洁版了。

说了这么多，下面附上这个日历控件的JS文件：
http://files.cnblogs.com/files/quixon/DatePicker.js

  1. /**
  2.  * add auto hide when mouse moveout
  3.  *
  4.  * @version 1.0.1
  5.  * @date 2010-11-23
  6.  * @author coraldane@gmail.com
  7. */
  8.  
  9. /**
  10.  * Date Picker
  11.  * @param   inputObj  The input object want to contain date.
  12.  * @param   dateFormatStyle  Default Date Formatter is "yyyy-MM-dd", you could use your own defined format.
  13.  * @param   beginDate Default value is 1990-01-01
  14.  * @param   endDate   Default value is 2020-01-01
  15.  * @param   lang      0(English)|1(Chinese)  Default Language is 0(English).
  16.  */
  17. function setday(inputObj,dateFormatStyle,beginDate,endDate,lang){
  18. 	if(null == inputObj){return null;}
  19. 	new Calendar(inputObj,dateFormatStyle,beginDate,endDate,lang).show();
  20. }
  21.  
  22. /**
  23.  * Month Picker
  24.  * @param   inputObj  The input object want to contain date.
  25.  * @param   dateFormatStyle  Default Date Formatter is "yyyy-MM", you could use your own defined format.
  26.  * @param   beginDate Default value is 1990-01
  27.  * @param   endDate   Default value is 2020-01
  28.  * @param   lang      0(English)|1(Chinese)  Default Language is 0(English).
  29.  */
  30. function setmonth(inputObj,dateFormatStyle,beginDate,endDate,lang){
  31. 	if(null == inputObj){return null;}
  32. 	new Calendar(inputObj,dateFormatStyle,beginDate,endDate,lang,"m").show();
  33. }
  34.  
  35. /**
  36. Calendar Style
  37. */
  38. Calendar.prototype.style = function(){
  39. 	var strStyle = "<style type='text/css'>";
  40. 	strStyle += ".calendar {font-size:12px; margin:0;padding:0px;border:1px solid #397EAE;background-color:#DBE7F2;}";
  41. 	strStyle += ".calendar ul {list-style-type:none; margin:0; padding:0;vertical-align:middle;}";
  42. 	strStyle += ".calendar li {float:left;}.calendar b{font-weight:bold;}";
  43. 	strStyle += ".calendar .day li {height:20px;}";
  44. 	strStyle += ".calendar .day li,.calendar .date li{float:left;width:14.13%;height:20px;line-height:20px;text-align:center;}";
  45. 	strStyle += ".calendar .day li{font-weight:bold;} .calendar .date li{background-color:#EDF3F9;}";
  46. 	strStyle += ".calendar .month li{float:left;width:24.8%;height:20px;line-height:20px;text-align:center;background-color:#EDF3F9;}";
  47. 	strStyle += ".calendar li a{ text-decoration:none; font-family:Tahoma; font-size:11px; color:#333}";
  48. 	strStyle += ".calendar li:hover {cursor:pointer;color:#f30; text-decoration:none;background-color:#EDF3F9;}";
  49. 	strStyle += ".calendar .date li:hover, .calendar .month li:hover{cursor:pointer;color:#f30; text-decoration:none;background-color:#DBE7F2;}";
  50. 	strStyle += ".calendarlihover {color:#f30;text-decoration:none;background-color:#E8F2FE;}";
  51. 	strStyle += ".calendar li a.hasArticle {font-weight:bold; color:#f60 !important}";
  52. 	strStyle += ".lastMonthDate, .nextMonthDate {color:#bbb;font-size:11px}";
  53. 	strStyle += ".selectThisYear, .selectThisMonth{text-decoration:none; margin:0px; color:#000; font-weight:bold}";
  54. 	strStyle += ".calendar .LastMonth, .calendar .NextMonth{text-decoration:none; color:#000; font-size:18px; font-weight:bold; line-height:16px;}";
  55. 	strStyle += ".calendarTitle{background:#EDF3F9;text-align:center;height:20px;line-height:20px;clear:both;width:100%;}";
  56. 	strStyle += ".calendarTitle .mark{text-decoration:none;color:#000;font-family:Tahoma;font-size:18px;font-weight:normal;}";
  57. 	strStyle += ".today{ background-color:#ffffaa;border:1px solid #f60;padding:0 1px;}";
  58. 	strStyle += ".today a { color:#f30; }";
  59. 	strStyle += ".calendarBottom {text-align:center;height:20px;line-height:20px;clear:both;width:100%;border-top:1px solid #ddd;}";
  60. 	strStyle += ".calendarBottom li{float:left;height:20px;line-height:20px;font-weight:bold;text-align:center;}";
  61. 	strStyle += "</style>";
  62. 	return strStyle;
  63. }
  64.  
  65. /**
  66. //Classic Style
  67. Calendar.prototype.style = function(){
  68. 	var strStyle = "<style type='text/css'>";
  69. 	strStyle += ".calendar {font-size:12px; margin:0;padding:0px;border:1px solid #397EAE;}";
  70. 	strStyle += ".calendar ul {list-style-type:none; margin:0; padding:0;vertical-align:middle;}";
  71. 	strStyle += ".calendar li {float:left;}.calendar b{font-weight:bold;}";
  72. 	strStyle += ".calendar .day { background-color:#EDF5FF; height:20px;}";
  73. 	strStyle += ".calendar .day li,.calendar .date li{ float:left; width:14.13%; height:20px; line-height:20px; text-align:center}";
  74. 	strStyle += ".calendar .month li{ float:left; width:24.8%; height:20px; line-height:20px; text-align:center}";
  75. 	strStyle += ".calendar li a{ text-decoration:none; font-family:Tahoma; font-size:11px; color:#333}";
  76. 	strStyle += ".calendar li:hover {cursor:pointer;color:#f30; text-decoration:none;background-color:#E8F2FE;}";
  77. 	strStyle += ".calendarlihover {color:#f30;text-decoration:none;background-color:#E8F2FE;}";
  78. 	strStyle += ".calendar li a.hasArticle {font-weight:bold; color:#f60 !important}";
  79. 	strStyle += ".lastMonthDate, .nextMonthDate {color:#bbb;font-size:11px}";
  80. 	strStyle += ".selectThisYear, .selectThisMonth{text-decoration:none; margin:0px; color:#000; font-weight:bold}";
  81. 	strStyle += ".calendar .LastMonth, .calendar .NextMonth{text-decoration:none; color:#000; font-size:18px; font-weight:bold; line-height:16px;}";
  82. 	strStyle += ".calendarTitle {text-align:center;height:20px;line-height:20px;clear:both;width:100%;}";
  83. 	strStyle += ".calendarTitle .mark{text-decoration: none;color:#000;font-family:Tahoma;font-size:18px;font-weight:normal;line-height: 16px;}";
  84. 	strStyle += ".today{ background-color:#ffffaa;border:1px solid #f60;padding:0 1px;}";
  85. 	strStyle += ".today a { color:#f30; }";
  86. 	strStyle += ".calendarBottom {text-align:center;height:20px;line-height:20px;clear:both;width:100%;border-top:1px solid #ddd;}";
  87. 	strStyle += ".calendarBottom li{float:left;height:20px;line-height:20px;font-weight:bold;text-align:center;}";
  88. 	strStyle += "</style>";
  89. 	return strStyle;
  90. }
  91. */
  92.  
  93. function getFrameDocument(frame){
  94. 	if ( frame.contentDocument ) { // DOM
  95.         var doc = frame.contentDocument;
  96.     } else if (frame.contentWindow) { // IE win
  97.         var doc = frame.contentWindow.document;
  98.     }
  99.     return doc;
  100. }
  101.  
  102. /**
  103.  * Parse Date value from String
  104.  * @param format the pattern of date
  105.  */
  106. String.prototype.toDate = function(format){
  107. 	if(null == format) format="yyyy-MM-dd";
  108. 	var pattern = format.replace("yyyy", "(\\~1{4})").replace("yy", "(\\~1{2})")
  109. 		.replace("MM", "(\\~1{2})").replace("M", "(\\~1{1,2})")
  110. 		.replace("dd", "(\\~1{2})").replace("d", "(\\~1{1,2})").replace(/~1/g, "d");
  111.  
  112. 	var returnDate;
  113. 	if (new RegExp(pattern).test(this)) {
  114. 	    var yPos = format.indexOf("yyyy");
  115. 	    var mPos = format.indexOf("MM");
  116. 	    var dPos = format.indexOf("dd");
  117. 	    if (mPos == -1) mPos = format.indexOf("M");
  118. 	    if (yPos == -1) yPos = format.indexOf("yy");
  119. 	    if (dPos == -1) dPos = format.indexOf("d");
  120. 	    var pos = new Array(yPos + "y", mPos + "m", dPos + "d");
  121. 	    var data = { y: 0, m: 0, d: 1};
  122. 	    var m = this.match(pattern);
  123. 	    for (var i = 1; i < m.length; i++) {
  124. 	        if (i == 0) return;
  125. 	        var flag = pos[i - 1].split('')[1];
  126. 	        data[flag] = m[i];
  127. 	        //alert(pos[i-1] + ",flag:"+flag + ",i:" + i + "," + data[flag]);
  128. 	    };
  129.  
  130. 	    if (data.y.toString().length == 2) {
  131. 	        data.y = parseInt("20" + data.y);
  132. 	    }
  133. 	    data.m = data.m - 1;
  134. 	    returnDate = new Date(data.y, data.m, data.d);
  135. 	}
  136. 	if (returnDate == null || isNaN(returnDate)) returnDate = new Date();
  137. 	return returnDate;
  138.  
  139. };
  140.  
  141. /**
  142.  * Date Format
  143.  * @param style date format like 'yyyyMMdd'
  144.  */
  145. Date.prototype.format = function(style) {
  146.   var o = {
  147.     "M+" : this.getMonth() + 1, //month
  148.     "d+" : this.getDate(),      //day
  149.     "h+" : this.getHours(),     //hour
  150.     "m+" : this.getMinutes(),   //minute
  151.     "s+" : this.getSeconds(),   //second
  152.     "w+" : "日一二三四五六".charAt(this.getDay()),   //week
  153.     "q+" : Math.floor((this.getMonth() + 3) / 3),  //quarter
  154.     "S"  : this.getMilliseconds() //millisecond
  155.   }
  156.   if(/(y+)/.test(style)) {
  157. 	style = style.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
  158.   }
  159.   for(var k in o){
  160.     if(new RegExp("("+ k +")").test(style)){
  161.       style = style.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
  162.     }
  163.   }
  164.   return style;
  165. };
  166.  
  167. /**
  168. Date add by interval
  169. @param interval y  Year,m  Month,d  Day,w  Week
  170. @param number
  171.  
  172. */
  173. Date.prototype.dateAdd = function(interval, number) {
  174. 	switch (interval) {
  175. 	  case "y":
  176. 		return new Date(this.getFullYear() + number, this.getMonth(), this.getDate());
  177. 		break;
  178. 	  case "m":
  179. 		return new Date(this.getFullYear(), this.getMonth() + number, checkDate(this.getFullYear(), this.getMonth() + number, this.getDate()));
  180. 		break;
  181. 	  case "d":
  182. 		return new Date(this.getFullYear(), this.getMonth(), this.getDate() + number);
  183. 		break;
  184. 	  case "w":
  185. 		return new Date(this.getFullYear(), this.getMonth(), 7 * number + this.getDate());
  186. 		break;
  187. 	}
  188. }
  189.  
  190. function checkDate(year, month, date){
  191. 	var enddate = ["31", "28", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31"];
  192. 	var returnDate = "";
  193. 	if (year % 4 == 0) {
  194. 		enddate[1] = "29";
  195. 	}
  196. 	if (date > enddate[month]) {
  197. 		returnDate = enddate[month];
  198. 	} else {
  199. 		returnDate = date;
  200. 	}
  201. 	return returnDate;
  202. }
  203.  
  204. /**
  205. Calendar language pack
  206. default support english and chinese,if you want to add some other language, please extend it.
  207. */
  208. Calendar.language = {
  209. 	"title":[["",""],["年","月"]],
  210. 	"months":[["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"],
  211. 			["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]
  212.         	],
  213. 	"weeks":[["S","M","T","W","T","F","S"],
  214.   			["日","一","二","三","四","五","六"]
  215. 			],
  216. 	weekday:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],
  217. 	"clear":[["Clear"], ["清空"]],
  218. 	"today":[["Today","Current"], ["今天","当月"]],
  219. 	"close":[["Close"], ["关闭"]]
  220. };
  221.  
  222. /**
  223.  * Calendar class
  224.  * @param   beginDate 1990-01-01
  225.  * @param   endDate   2020-01-01
  226.  * @param   lang      0(English)|1(Chinese)
  227.  * @param   dateFormatStyle  "yyyy-MM-dd";
  228.  * @param   type  d Date Picker/m Month Picker
  229.  * @version 2010-08-20
  230.  * @author  Coral(coraldane@gmail.com)
  231.  * @update
  232.  */
  233. function Calendar(inputObj, dateFormatStyle, beginDate, endDate, lang, type) {
  234.   this.beginDate = "1900-01-01".toDate();
  235.   this.endDate = "2020-01-01".toDate();
  236.   this.lang = 0; //default language
  237.   this.type = "d";
  238.   this.dateFormatStyle = "yyyy-MM-dd";
  239.  
  240.   if(null != type){
  241.   	this.type = type;
  242.   	if("m" == this.type){
  243.   		this.dateFormatStyle = "yyyy-MM";
  244.   	}
  245.   }
  246.  
  247.   if (dateFormatStyle != null){
  248.     this.dateFormatStyle = dateFormatStyle;
  249.   }
  250.  
  251.   this.currentDate = new Date();
  252.  
  253.   var currDate = new Date();
  254.   if(null != inputObj.value && "" != inputObj.value){
  255.   	currDate = inputObj.value.toDate(this.dateFormatStyle);
  256.   }
  257.  
  258.   if(null != currDate){
  259.   	this.date = currDate;
  260.   }else{
  261.   	this.date = new Date();
  262.   }
  263.  
  264.   if (null != beginDate){
  265.     this.beginDate = beginDate;
  266.   }
  267.   if(null != endDate){
  268.   	this.endDate = endDate;
  269.   }
  270.   if (lang != null){
  271.     this.lang = lang;
  272.   }
  273.  
  274.   this.dateControl = inputObj;
  275.   this.panel = document.getElementById("calendarPanel");
  276.   this.iframe = document.getElementById("calendarIframe");
  277.   this.isFocus = false;
  278.  
  279.   this.draw();
  280. }
  281.  
  282. Calendar.prototype.draw = function() {
  283.   var currDate = this.date.format("yyyy-MM").toDate("yyyy-MM");
  284.   if(currDate < this.beginDate){
  285.   	this.date = this.beginDate;
  286.   }
  287.  
  288.   if(currDate > this.endDate){
  289.   	this.date = this.endDate;
  290.   }
  291.  
  292.   this.year = this.date.getFullYear();
  293.   this.month = this.date.getMonth();
  294.   var head  = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">' +
  295. 	'<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />' +
  296.   this.style() + '</head><body style="padding:0px;margin:0px;">';
  297.   var thisMonthFirstDate = this.date.dateAdd("d",1-this.date.getDate());
  298.   var lastMonthEndDate = thisMonthFirstDate.dateAdd("d",-1);
  299.   var lastMonthDate =  thisMonthFirstDate.getDay();
  300.   lastMonthEndDate = lastMonthEndDate.getDate();
  301.   var thisMonthLastDate = thisMonthFirstDate.dateAdd("m",1).dateAdd("d",-1);
  302.   var thisMonthEndDate = thisMonthLastDate.getDate();
  303.   var thisMonthEndDay = thisMonthLastDate.getDay();
  304.  
  305.   var lis = "<div id='calendar' class='calendar' style='width:";
  306.   if("d" == this.type){
  307.   	lis += "150";
  308.   }else{
  309.   	lis += "120";
  310.   }
  311.   lis += "px;'>";
  312.   lis += "<div class='calendarTitle'><ul>";
  313.   lis += "<li id='PrevYear' class='mark' style='width:12%;' title='Previous Year'>«</li>";
  314.   if("d" == this.type){
  315.   	lis += "<li id='PrevMonth' class='mark' style='width:12%;' title='Previous Month'>‹</li>";
  316.     lis += "<li style='width:30%;'><span id='selectThisYear' class='selectThisYear'>" + this.date.getFullYear() + "</span>" + Calendar.language["title"][this.lang][0] + "</li>";
  317.   	if(0 == this.lang){
  318.   		lis += "<li style='width:20%;'><span id='selectThisMonth' class='selectThisMonth'>" + Calendar.language["months"][this.lang][this.date.getMonth()] + "</span></li>";
  319.   	}else{
  320.   		lis += "<li style='width:20%;'><span id='selectThisMonth' class='selectThisMonth'>" + (this.date.getMonth() +1) + "</span>" + Calendar.language["title"][this.lang][1] + "</li>";
  321.   	}
  322.   	lis += "<li id='NextMonth' class='mark' style='width:12%;' title='Next Month'>›</li>";
  323.   	lis += "<li id='NextYear' class='mark' style='width:12%;' title='Next Year'>»</li></ul></div>";
  324. 	lis += "<div class='calendarBody'>";
  325.   	lis += "<ul class='day'>";
  326.   	for(var i=0;i<Calendar.language.weeks[this.lang].length;i++){
  327.   		lis += "<li title='" + Calendar.language.weekday[i] + "'>" + Calendar.language.weeks[this.lang][i] + "</li>";
  328.   	}
  329.   	lis += "</ul><ul class='date' id='thisMonthDate'>";
  330.   	var lastMonthLis = "";
  331.   	for (var i = 0; i < lastMonthDate; i++) { // Last Month's Date
  332.   		//alert(lastMonthDate + "," + lastMonthEndDate);
  333. 		lastMonthLis = "<li class='lastMonthDate'>" + lastMonthEndDate + "</li>" + lastMonthLis;
  334. 		lastMonthEndDate--;
  335. 	}
  336. 	lis += lastMonthLis;
  337. 	for (i = 1; i <= thisMonthEndDate; i++) { // Current Month's Date
  338. 		var currentDate = thisMonthFirstDate.dateAdd("d",(i-1));
  339. 		if(currentDate < this.beginDate || currentDate > this.endDate){
  340. 			lis += "<li class='lastMonthDate'>" + i + "</li>";
  341.   			continue;
  342. 		}
  343. 		lis += "<li class='thisMonth' title='" + currentDate.format("yyyy-MM-dd") + "'><a href='javascript:void(0);' ";
  344. 		if(currentDate.format("yyyy-MM-dd") == (this.date).format("yyyy-MM-dd")){
  345. 			lis += "class='today' ";
  346. 		}
  347. 		lis += ">" + i + "</a></li>";
  348. 	}
  349. 	var j = 1;
  350. 	for (i = thisMonthEndDay; i < 6; i++) { // Next Month's Date
  351. 		lis += "<li class='nextMonthDate'>" + j + "</li>";
  352. 		j++;
  353. 	}
  354.   	lis += "</ul>"
  355.  
  356.   	lis += "</div>";//close calendarBody
  357. 	lis += "<div class='calendarBottom'><ul>";
  358. 	lis += "<li id='emptyCalendar' style='width:27%;' title='Clear'>" + Calendar.language.clear[this.lang] +"</li>";
  359. 	lis += "<li id='selectCurrent' style='width:45%;' title='Today'>" + Calendar.language.today[this.lang][0] +"</li>";
  360.   }else{
  361.   	lis += "<li style='width:74%;'><span id='selectThisYear' class='selectThisYear'>" + this.date.getFullYear() + "</span>" + Calendar.language["title"][this.lang][0] + "</li>";
  362.   	lis += "<li id='NextYear' class='mark' style='width:12%;' title='Next Year'>»</li></ul></div>";
  363.   	lis += "<div class='calendarBody'>";
  364.   	lis += "</ul><ul class='month' id='thisMonth'>";
  365.   	for(var i=1; i<=12; i++){
  366.   		var currentDate = (this.year + "-" + (i>9?i:"0"+i)).toDate("yyyy-MM");
  367.   		if(currentDate < this.beginDate || currentDate > this.endDate){
  368.   			lis += "<li class='lastMonthDate'>" + i + "</li>";
  369.   			continue;
  370.   		}
  371.   		lis += "<li class='thisMonth' title='" + this.year + "-" + (i>9?i:"0"+i) + "-01'><a href='javascript:void(0);'";
  372.   		if((this.year+"-"+(i>9?i:"0"+i)) == (this.date).format("yyyy-MM")){
  373.   			lis += " class='today' ";
  374.   		}
  375.   		lis += ">" + i + "</a></li>";
  376.   	}
  377.   	lis += "</ul>"
  378.  
  379.   	lis += "</div>";//close calendarBody
  380. 	lis += "<div class='calendarBottom'><ul>";
  381. 	lis += "<li id='emptyCalendar' style='width:27%;' title='Clear'>" + Calendar.language.clear[this.lang] +"</li>";
  382. 	lis += "<li id='selectCurrent' style='width:45%;' title='Current Month'>" + Calendar.language.today[this.lang][1] +"</li>";
  383.   }
  384.  
  385.   lis += "<li id='closeCalendar' style='width:27%;' title='Close'>" + Calendar.language.close[this.lang] +"</li>";
  386.   lis += "</ul></div>";//close calendarBottom
  387.   lis += "</div>";//close calendar
  388.   lis += "</body></html>";
  389.   var doc = getFrameDocument(this.iframe);
  390.   doc.writeln(head);
  391.   doc.writeln(lis);
  392.   doc.close();
  393.   this.document = doc;
  394.  
  395.   this.bingEvent();
  396. }
  397.  
  398. /**
  399. * Bind Click Event into Calendar
  400. */
  401. Calendar.prototype.bingEvent = function(){
  402.   var calendar = this;
  403.  
  404.   this.setAutoHeight();
  405.  
  406.   this.panel.onmouseover = function(){calendar.isFocus = true;}
  407.   this.panel.onmouseout = function(){calendar.isFocus = false;}
  408.  
  409.   this.dateControl.onblur = function(){
  410.   	if(!calendar.isFocus){
  411.   		calendar.hide();
  412.   	}
  413.   }
  414.  
  415.   this.getElementById("selectCurrent").onclick = function(){
  416.   	calendar.date = new Date();
  417.   	calendar.valueSelected(calendar.date);
  418.   	calendar.hide();
  419.   }
  420.   this.getElementById("emptyCalendar").onclick = function(){calendar.dateControl.value = "";calendar.hide();}
  421.   this.getElementById("closeCalendar").onclick = function(){calendar.hide();}
  422.  
  423.   this.getElementById("PrevYear").onclick = function(){
  424.   	calendar.date = calendar.date.dateAdd("y",-1);
  425.   	calendar.draw();
  426.   }
  427.  
  428.   if(this.getElementById("PrevMonth")){
  429. 	  this.getElementById("PrevMonth").onclick = function(){
  430. 	  	calendar.date = calendar.date.dateAdd("m",-1);
  431. 	  	calendar.draw();
  432. 	  }
  433. 	  this.getElementById("NextMonth").onclick = function(){
  434. 	  	calendar.date = calendar.date.dateAdd("m",1);
  435. 	  	calendar.draw();
  436. 	  }
  437.   }
  438.  
  439.   this.getElementById("NextYear").onclick = function(){
  440.   	calendar.date = calendar.date.dateAdd("y",1);
  441.   	calendar.draw();
  442.   }
  443.  
  444.   this.getElementById("selectThisYear").onclick = function(){calendar.selectThisYear();}
  445.   if("d" == this.type){
  446.   	this.getElementById("selectThisMonth").onclick = function(){calendar.selectThisMonth();}
  447.   }
  448.  
  449.   var elements = getElementsByClassName(this.document, "li", "thisMonth");
  450.   for(var i=0; i<elements.length; i++){
  451. 	elements[i].onclick = function(){
  452. 		calendar.date = this.title.toDate();
  453. 	  	calendar.valueSelected(calendar.date);
  454. 	  	calendar.hide();
  455. 	}
  456.   }
  457. }
  458.  
  459. Calendar.prototype.selectThisYear = function(){
  460. 	var calendar = this;
  461. 	var curYear = this.date.getFullYear();
  462. 	var beginYear = this.beginDate.getFullYear();
  463. 	var endYear = this.endDate.getFullYear();
  464. 	var spanObj = this.getElementById("selectThisYear");
  465. 	var selectStr = "<select style='font-size:10px;'>";
  466. 	for(var i = endYear; i >= beginYear; i--){
  467. 		selectStr += "<option value='" + i + "'>" + i + "</option>";
  468. 	}
  469. 	selectStr += "</select>";
  470. 	spanObj.innerHTML = selectStr;
  471. 	var selectYearObj = spanObj.childNodes(0);
  472. 	selectYearObj.value = curYear;
  473. 	selectYearObj.onchange = function(){
  474. 		calendar.date.setFullYear(selectYearObj.value);
  475. 		calendar.draw();
  476. 	}
  477. }
  478.  
  479. Calendar.prototype.selectThisMonth = function(){
  480. 	var calendar = this;
  481. 	var curMonth = this.date.getMonth() + 1;
  482. 	var curYear = this.date.getFullYear();
  483. 	var endYear = this.endDate.getFullYear();
  484. 	var endMonth = 12;
  485. 	if(curYear == endYear){
  486. 		endMonth = this.endDate.getMonth + 1;
  487. 	}
  488. 	var spanObj = this.getElementById("selectThisMonth");
  489. 	var selectStr = "<select style='font-size:10px;'>";
  490. 	for(var i = 1; i <= endMonth; i++){
  491. 		selectStr += "<option value='" + i + "'>" + Calendar.language["months"][this.lang][i-1] + "</option>";
  492. 	}
  493. 	selectStr += "</select>";
  494. 	spanObj.innerHTML = selectStr;
  495. 	var selectMonthObj = spanObj.childNodes(0);
  496. 	selectMonthObj.value = curMonth;
  497. 	selectMonthObj.onchange = function(){
  498. 		calendar.date.setMonth(selectMonthObj.value-1);
  499. 		calendar.draw();
  500. 	}
  501. }
  502.  
  503. Calendar.prototype.valueSelected = function(date){
  504. 	this.dateControl.value = date.format(this.dateFormatStyle);
  505. }
  506.  
  507. /**
  508. * Set Auto Height for Calendar Panel Div
  509. */
  510. Calendar.prototype.setAutoHeight = function(){
  511. 	var height = this.document.body.scrollHeight;
  512. 	var width = this.getElementById("calendar").style.width;
  513. 	width = (parseInt(width.substr(0,width.length-1)) + 2) + "px";
  514. 	this.iframe.style.height = height;
  515. 	this.panel.style.height = height;
  516. 	this.panel.style.width = width;
  517. }
  518.  
  519. //Extend document.getElementById(id)
  520. Calendar.prototype.getElementById = function(id){
  521.   if (typeof(id) != "string" || id == "") return null;
  522.   if(null == this.document) return null;
  523.   if (this.document.getElementById) return this.document.getElementById(id);
  524.   if (this.document.all) return this.document.all(id);
  525.   try {return eval(id);} catch(e){ return null;}
  526. }
  527.  
  528. //Extend object.getElementsByTagName(tagName)
  529. Calendar.prototype.getElementsByTagName = function(tagName){
  530.   if(null == this.document) return null;
  531.   if (this.document.getElementsByTagName) return this.document.getElementsByTagName(tagName);
  532.   if (this.document.all) return this.document.all.tags(tagName);
  533. }   
  534.  
  535. /**
  536. * Find a HTML Object by TagName and className
  537. * @param oElm  parentNode Object
  538. * @param strTagName tag name want to find
  539. * @param strClassName class name
  540. */
  541. function getElementsByClassName(oElm, strTagName, strClassName){
  542.     var arrElements = (strTagName == "*" && oElm.all)? oElm.all:oElm.getElementsByTagName(strTagName);
  543.     var arrReturnElements = new Array();
  544.     strClassName = strClassName.replace(/\-/g, "\\-");
  545.     var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
  546.     var oElement;
  547.     for(var i=0; i < arrElements.length; i++){
  548.         oElement = arrElements[i];
  549.         if(oRegExp.test(oElement.className)){
  550.             arrReturnElements.push(oElement);
  551.         }
  552.     }
  553.     return (arrReturnElements)
  554. } 
  555.  
  556. //find the absolute position
  557. Calendar.prototype.getAbsPoint = function (e){
  558.   var x = e.offsetLeft;
  559.   var y = e.offsetTop;
  560.   while(e = e.offsetParent){
  561.     x += e.offsetLeft;
  562.     y += e.offsetTop;
  563.   }
  564.   return {"x": x, "y": y};
  565. }   
  566.  
  567. //显示日历
  568. Calendar.prototype.show = function () {
  569.   var xy = this.getAbsPoint(this.dateControl);
  570.   this.panel.style.left = xy.x + "px";
  571.   this.panel.style.top = (xy.y + this.dateControl.offsetHeight) + "px";
  572.   this.setDisplayStyle("select", "hidden");
  573.   this.panel.style.visibility = "visible";
  574. }
  575.  
  576. //Hide Calendar
  577. Calendar.prototype.hide = function() {
  578.   this.setDisplayStyle("select", "visible");
  579.   this.panel.style.visibility = "hidden";
  580.   this.isFocus = false;
  581. }
  582.  
  583. //Set Calendar Picker visible or invisible
  584. Calendar.prototype.setDisplayStyle = function(tagName, style) {
  585.   var tags = this.getElementsByTagName(tagName)
  586.   for(var i = 0; i < tags.length; i++) {
  587.     if (tagName.toLowerCase() == "select" &&
  588.        (tags[i].name == "calendarYear" ||
  589.       tags[i].name == "calendarMonth")){
  590.       continue;
  591.     }
  592.     tags[i].style.visibility = style;
  593.   }
  594. }
  595.  
  596. document.write('<div id="calendarPanel" style="position:absolute;visibility:hidden;z-index:9999;background-color:#FFFFFF;font-size:12px;width:20px;">');
  597. document.write("<iframe id='calendarIframe' scrolling='no' frameborder='0' width='100%' height='100%'></iframe></div>");

简洁JS 日历控件 支持日期和月份选择的更多相关文章

  1. 简洁js日历控件的使用

    往Web工程添加纯js日历控件 在网上找到了DatePicker.js(http://www.cnblogs.com/shenyixin/archive/2013/03/11/2954156.html ...

  2. JS日历控件优化(增加时分秒)

    JS日历控件优化      在今年7月份时候 写了一篇关于 "JS日历控件" 的文章 , 当时只支持 年月日 的日历控件,现在优化如下:      1. 在原基础上 支持 yyyy ...

  3. JS日历控件 灵活设置: 精确的时分秒.

     在今年7月份时候 写了一篇关于 "JS日历控件" 的文章 , 当时仅仅支持 年月日 的日历控件,如今优化例如以下:      1. 在原基础上 支持 yyyy-mm-dd 的年月 ...

  4. JS日历控件集合----附效果图、源代码

    http://www.cnblogs.com/yank/archive/2008/08/14/1267746.html 在进行开发的过程中,经常需要输入时间,特别是在进行查询.统计的时候,时间限定更为 ...

  5. JS编写日历控件(支持单日历 双日历 甚至多日历等)

    前言: 最近几天都在研究日历控件编写,当然前提我要说明下,当然看过别人写的源码 所以脑子一热 就想用自己的编码方式 来写一套可扩展性 可维护性 性能高点的代码控件出来,就算练习练习下,所以前几天晚上下 ...

  6. selenium - js日历控件处理

    # 13. js处理日历控件 ''' 在web自动化的工程中,日历控制大约分为两种: 1. 可以直接输入日期 2. 通过日历控件选择日期 基本思路: 利用js去掉readonly属性,然后直接输入时间 ...

  7. JS 日历控件

    http://www.cnblogs.com/yank/archive/2008/08/14/1267746.html http://code.google.com/p/lhgcalendar/dow ...

  8. JS日历控件

    <input type="text" id="st" name="st" onclick="return Calendar( ...

  9. JS日历控件特效代码layDate

    https://www.js-css.cn/a/jscode/date/2015/0405/1461.html

随机推荐

  1. delphi-json组件，速度非常快,要比superobject快好几倍

    delphi-json组件,速度非常快,要比superobject快好几倍https://github.com/ahausladen/JsonDataObjectshttp://bbs.2ccc.co ...

  2. 公告: 新博客已经迁移到 www.root.run

    root.run www.root.run www.root.run/sitemap.html www.root.run/sitemap.xml

  3. Cocos2d—X游戏开发之CCScrollView（滑动视图）（十二）

    CCScrollView在Cocos2d-X引擎中主要使用在图片尺寸远大于屏幕尺寸的时候使用. 总体来说,使用起来比较简单. 一个是CCScrollView控件本身,一个是CCScrollViewDe ...

  4. spring集成Apache的ActiveMQ

    1.直接看优秀的博客 http://www.open-open.com/lib/view/open1435496659794.html

  5. 汉企C#面向对象——继承

    public class Shengwu { private string _Name; public string Name { get { return _Name; } set { _Name ...

  6. Java NIO原理及实例

    Java NIO是在jdk1.4开始使用的,它既可以说成“新I/O”,也可以说成非阻塞式I/O.下面是java NIO的工作原理: 1. 由一个专门的线程来处理所有的 IO 事件,并负责分发. 2. ...

  7. HDU 5969 最大的位或 【贪心】 （2016年中国大学生程序设计竞赛（合肥））

    最大的位或 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Problem De ...

  8. HDＵ－１５４０　　　　　　　　　　Tunnel Warfare

    Tunnel Warfare Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)To ...

  9. linux下使用vim替换文件中的^M换行符

    在linux下打开windows编辑过的文本,会出现由于换行符不一致而导致的内容格式错乱的问题.最常见的就是出现^M . 我出现的问题是:在windows编辑过的文件,传到linux上后再用vim打开 ...

  10. java基础（十九）IO流（二）

    这里有我之前上课总结的一些知识点以及代码大部分是老师讲的笔记 个人认为是非常好的,,也是比较经典的内容,真诚的希望这些对于那些想学习的人有所帮助! 由于代码是分模块的上传非常的不便.也比较多,讲的也是 ...