<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>纯JS日历插件（注释全）</title> </head> <body> <input type="text" style="border:1px solid #999;" onclick="fPopCalendar(event,this,this)" onfocus="this.select()" readonly="readonly" /> </body> </html> <script type="text/javascript"> var gMonths = new Array("一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"); var WeekDay = new Array("日", "一", "二", "三", "四", "五", "六"); var strToday = "今天"; var strYear = "年"; var strMonth = "月"; var strDay = "日"; var splitChar = "-"; var startYear = 2000; var endYear = 2050; var dayTdHeight = 12; var dayTdTextSize = 12; var gcNotCurMonth = "#E0E0E0"; var gcRestDay = "#FF0000"; var gcWorkDay = "#444444"; var gcMouseOver = "#79D0FF"; var gcMouseOut = "#F4F4F4"; var gcToday = "#444444"; var gcTodayMouseOver = "#6699FF"; var gcTodayMouseOut = "#79D0FF"; var gdCtrl = new Object(); var goSelectTag = new Array(); var gdCurDate = new Date(); var giYear = gdCurDate.getFullYear(); var giMonth = gdCurDate.getMonth() + 1; var giDay = gdCurDate.getDate(); function $() { var elements = new Array(); for(var i = 0; i < arguments.length; i++) { var element = arguments[i]; if(typeof(arguments[i]) == 'string') { element = document.getElementById(arguments[i]); } if(arguments.length == 1) { return element; } elements.Push(element); } return elements; } Array.prototype.Push = function() { var startLength = this.length; for(var i = 0; i < arguments.length; i++) { this[startLength + i] = arguments[i]; } return this.length; } String.prototype.HexToDec = function() { return parseInt(this, 16); } String.prototype.cleanBlank = function() { return this.isEmpty() ? "" : this.replace(/s/g, ""); } function checkColor() { var color_tmp = (arguments[0] + "").replace(/s/g, "").toUpperCase(); var model_tmp1 = arguments[1].toUpperCase(); var model_tmp2 = "rgb(" + arguments[1].substring(1, 3).HexToDec() + "," + arguments[1].substring(1, 3).HexToDec() + "," + arguments[1].substring(5).HexToDec() + ")"; model_tmp2 = model_tmp2.toUpperCase(); if(color_tmp == model_tmp1 || color_tmp == model_tmp2) { return true; } return false; } function $V() { return $(arguments[0]).value; } function fPopCalendar(evt, popCtrl, dateCtrl) { evt.cancelBubble = true; gdCtrl = dateCtrl; fSetYearMon(giYear, giMonth); var point = fGetXY(popCtrl); with($("calendardiv").style) { left = point.x + "px"; top = (point.y + popCtrl.offsetHeight + 1) + "px"; visibility = 'visible'; zindex = '99'; position = 'absolute'; } $("calendardiv").focus(); } function fSetDate(iYear, iMonth, iDay) { var iMonthNew = new String(iMonth); var iDayNew = new String(iDay); if(iMonthNew.length < 2) { iMonthNew = "0" + iMonthNew; } if(iDayNew.length < 2) { iDayNew = "0" + iDayNew; } gdCtrl.value = iYear + splitChar + iMonthNew + splitChar + iDayNew; fHideCalendar(); } function fHideCalendar() { $("calendardiv").style.visibility = "hidden"; for(var i = 0; i < goSelectTag.length; i++) { goSelectTag[i].style.visibility = "visible"; } goSelectTag.length = 0; } function fSetSelected() { var iOffset = 0; var iYear = parseInt($("tbSelYear").value); var iMonth = parseInt($("tbSelMonth").value); var aCell = $("cellText" + arguments[0]); aCell.bgColor = gcMouseOut; with(aCell) { var iDay = parseInt(innerHTML); if(checkColor(style.color, gcNotCurMonth)) { iOffset = (innerHTML > 10) ? -1 : 1; } iMonth += iOffset; if(iMonth < 1) { iYear--; iMonth = 12; } else if(iMonth > 12) { iYear++; iMonth = 1; } } fSetDate(iYear, iMonth, iDay); } function Point(iX, iY) { this.x = iX; this.y = iY; } function fBuildCal(iYear, iMonth) { var aMonth = new Array(); for(var i = 1; i < 7; i++) { aMonth[i] = new Array(i); } var dCalDate = new Date(iYear, iMonth - 1, 1); var iDayOfFirst = dCalDate.getDay(); var iDaysInMonth = new Date(iYear, iMonth, 0).getDate(); var iOffsetLast = new Date(iYear, iMonth - 1, 0).getDate() - iDayOfFirst + 1; var iDate = 1; var iNext = 1; for(var d = 0; d < 7; d++) { aMonth[1][d] = (d < iDayOfFirst) ? (iOffsetLast + d) * (-1) : iDate++; } for(var w = 2; w < 7; w++) { for(var d = 0; d < 7; d++) { aMonth[w][d] = (iDate <= iDaysInMonth) ? iDate++ : (iNext++) * (-1); } } return aMonth; } function fDrawCal(iYear, iMonth, iCellHeight, iDateTextSize) { var colorTD = " bgcolor='" + gcMouseOut + "' bordercolor='" + gcMouseOut + "'"; var styleTD = " valign='middle' align='center' style='height:" + iCellHeight + "px;font-weight:bolder;font-size:" + iDateTextSize + "px;"; var dateCal = ""; dateCal += "<tr>"; for(var i = 0; i < 7; i++) { dateCal += "<td" + colorTD + styleTD + "color:#990099'>" + WeekDay[i] + "</td>"; } dateCal += "</tr>"; for(var w = 1; w < 7; w++) { dateCal += "<tr>"; for(var d = 0; d < 7; d++) { var tmpid = w + "" + d; dateCal += "<td" + styleTD + "cursor:pointer;' onclick='fSetSelected(" + tmpid + ")'>"; dateCal += "<span id='cellText" + tmpid + "'></span>"; dateCal += "</td>"; } dateCal += "</tr>"; } return dateCal; } function fUpdateCal(iYear, iMonth) { var myMonth = fBuildCal(iYear, iMonth); var i = 0; for(var w = 1; w < 7; w++) { for(var d = 0; d < 7; d++) { with($("cellText" + w + "" + d)) { parentNode.bgColor = gcMouseOut; parentNode.borderColor = gcMouseOut; parentNode.onmouseover = function() { this.bgColor = gcMouseOver; }; parentNode.onmouseout = function() { this.bgColor = gcMouseOut; }; if(myMonth[w][d] < 0) { style.color = gcNotCurMonth; innerHTML = Math.abs(myMonth[w][d]); } else { style.color = ((d == 0) || (d == 6)) ? gcRestDay : gcWorkDay; innerHTML = myMonth[w][d]; if(iYear == giYear && iMonth == giMonth && myMonth[w][d] == giDay) { style.color = gcToday; parentNode.bgColor = gcTodayMouseOut; parentNode.onmouseover = function() { this.bgColor = gcTodayMouseOver; }; parentNode.onmouseout = function() { this.bgColor = gcTodayMouseOut; }; } } } } } } function fSetYearMon(iYear, iMon) { $("tbSelMonth").options[iMon - 1].selected = true; for(var i = 0; i < $("tbSelYear").length; i++) { if($("tbSelYear").options[i].value == iYear) { $("tbSelYear").options[i].selected = true; } } fUpdateCal(iYear, iMon); } function fPrevMonth() { var iMon = $("tbSelMonth").value; var iYear = $("tbSelYear").value; if(--iMon < 1) { iMon = 12; iYear--; } fSetYearMon(iYear, iMon); } function fNextMonth() { var iMon = $("tbSelMonth").value; var iYear = $("tbSelYear").value; if(++iMon > 12) { iMon = 1; iYear++; } fSetYearMon(iYear, iMon); } function fGetXY(aTag) { var oTmp = aTag; var pt = new Point(0, 0); do { pt.x += oTmp.offsetLeft; pt.y += oTmp.offsetTop; oTmp = oTmp.offsetParent; } while (oTmp.tagName.toUpperCase() != "BODY"); return pt; } function getDateDiv() { var noSelectForIE = ""; var noSelectForFireFox = ""; if(document.all) { noSelectForIE = "onselectstart='return false;'"; } else { noSelectForFireFox = "-moz-user-select:none;"; } var dateDiv = ""; dateDiv += "<div id='calendardiv' onclick='event.cancelBubble=true' " + noSelectForIE + " style='" + noSelectForFireFox + "position:absolute;z-index:99;visibility:hidden;border:1px solid #999999;'>"; dateDiv += "<table border='0' bgcolor='#E0E0E0' cellpadding='1' cellspacing='1' >"; dateDiv += "<tr>"; dateDiv += "<td><input type='button' id='PrevMonth' value='<' style='height:20px;20px;font-weight:bolder;' onclick='fPrevMonth()'>"; dateDiv += "</td><td><select id='tbSelYear' style='border:1px solid;' onchange='fUpdateCal($V("tbSelYear"),$V("tbSelMonth"))'>"; for(var i = startYear; i < endYear; i++) { dateDiv += "<option value='" + i + "'>" + i + strYear + "</option>"; } dateDiv += "</select></td><td>"; dateDiv += "<select id='tbSelMonth' style='border:1px solid;' onchange='fUpdateCal($V("tbSelYear"),$V("tbSelMonth"))'>"; for(var i = 0; i < 12; i++) { dateDiv += "<option value='" + (i + 1) + "'>" + gMonths[i] + "</option>"; } dateDiv += "</select></td><td>"; dateDiv += "<input type='button' id='NextMonth' value='>' style='height:20px;20px;font-weight:bolder;' onclick='fNextMonth()'>"; dateDiv += "</td>"; dateDiv += "</tr><tr>"; dateDiv += "<td align='center' colspan='4'>"; dateDiv += "<div style='background-color:#cccccc'><table width='100%' border='0' cellpadding='3' cellspacing='1'>"; dateDiv += fDrawCal(giYear, giMonth, dayTdHeight, dayTdTextSize); dateDiv += "</table></div>"; dateDiv += "</td>"; dateDiv += "</tr><tr><td align='center' colspan='4' nowrap>"; dateDiv += "<span style='cursor:pointer;font-weight:bolder;' onclick='fSetDate(giYear,giMonth,giDay)' onmouseover='this.style.color="" + gcMouseOver + ""' onmouseout='this.style.color="#000000"'>" + strToday + ":" + giYear + strYear + giMonth + strMonth + giDay + strDay + "</span>"; dateDiv += "</tr></tr>"; dateDiv += "</table></div>"; return dateDiv; } with(document) { onclick = fHideCalendar; write(getDateDiv()); } </script>