年历日期控件

日历日期控件

自己做了一个日历日期控件，说实话，还存在很多问题，不过基本可以用，呵呵，先发出来再慢慢改。

目录结构见附件图片。

date.js源代码：

var monthArr = new Array("一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一", "十二");function $(id) {return document.getElementById(id);}function showMonthDiv() {var monthDiv = $("monthDiv");monthDiv.style.display = "block";}function closeMonthDiv() {var monthDiv = $("monthDiv");monthDiv.style.display = "none";}function mInuptOnfocus() {var month = $("month");month.style.border = "solid 1px #38B1B9";month.style.background = "#FFFFFF";month.style.cursor = "text";showMonthDiv();}function mInputOnblur() {var month = $("month");month.style.border = "solid 1px transparent";month.style.background = "transparent";month.style.cursor = "pointer";closeMonthDiv();}var backYearTd = "&lt;td onmouseover=\"this.className='mouseover'\" onmouseout=\"this.className='mouseout'\" onmousedown=\"backYear()\"&gt;←&lt;/td&gt;";var xYearTd = "&lt;td onmouseover=\"this.className='mouseover'\" onmouseout=\"this.className='mouseout'\" onmousedown=\"closeYearDiv()\"&gt;x&lt;/td&gt;";var forwardYearTd = "&lt;td onmouseover=\"this.className='mouseover'\" onmouseout=\"this.className='mouseout'\" onmousedown=\"forwardYear()\"&gt;→&lt;/td&gt;";function showYearDiv() {var yearDiv = $("yearDiv");var year = parseInt($("year").value);var html = "&lt;table&gt;";for (var i = 0; i &lt; 5; i++) {html += "&lt;tr&gt;&lt;td colspan=\"3\" onmouseover=\"this.className='mouseover'\" onmouseout=\"this.className='mouseout'\" onmousedown=\"selectYear(" + (year+i-2) + ")\"&gt;" + (year+i-2) + "&lt;/td&gt;&lt;/tr&gt;";}html += "&lt;tr&gt;";html += backYearTd + xYearTd + forwardYearTd;html += "&lt;/tr&gt;";html += "&lt;table&gt;";yearDiv.innerHTML = html;yearDiv.style.display = "block";}function backYear() {var yearDiv = $("yearDiv");var year = parseInt((yearDiv.getElementsByTagName("td"))[0].childNodes[0].nodeValue);var html = "&lt;table&gt;";for (var i = 0; i &lt; 5; i++) {html += "&lt;tr&gt;&lt;td colspan=\"3\" onmouseover=\"this.className='mouseover'\" onmouseout=\"this.className='mouseout'\" onmousedown=\"selectYear(" + (year+i-1) + ")\"&gt;" + (year+i-1) + "&lt;/td&gt;&lt;/tr&gt;";}html += "&lt;tr&gt;";html += backYearTd + xYearTd + forwardYearTd;html += "&lt;/tr&gt;";html += "&lt;table&gt;";yearDiv.innerHTML = html;yearDiv.style.display = "block";}function forwardYear() {var yearDiv = $("yearDiv");var year = parseInt((yearDiv.getElementsByTagName("td"))[0].childNodes[0].nodeValue);var html = "&lt;table&gt;";for (var i = 0; i &lt; 5; i++) {html += "&lt;tr&gt;&lt;td colspan=\"3\" onmouseover=\"this.className='mouseover'\" onmouseout=\"this.className='mouseout'\" onmousedown=\"selectYear(" + (year+i+1) + ")\"&gt;" + (year+i+1) + "&lt;/td&gt;&lt;/tr&gt;";}html += "&lt;tr&gt;";html += backYearTd + xYearTd + forwardYearTd;html += "&lt;/tr&gt;";html += "&lt;table&gt;";yearDiv.innerHTML = html;yearDiv.style.display = "block";}function closeYearDiv() {var yearDiv = $("yearDiv");yearDiv.style.display = "none";}function yInuptOnfocus() {var year = $("year");year.style.border = "solid 1px #38B1B9";year.style.background = "#FFFFFF";year.style.cursor = "text";showYearDiv();}function yInputOnblur() {var year = $("year");year.style.border = "solid 1px transparent";year.style.background = "transparent";year.style.cursor = "pointer";closeYearDiv();}function getDaysInMonth(month,year)  {var days;if (month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12)  days=31;else if (month==4 || month==6 || month==9 || month==11) days=30;else if (month==2)  {if (isLeapYear(year)) { days=29; } else { days=28; }}return days;}function isLeapYear (Year) {if (((Year % 4)==0) && ((Year % 100)!=0) || ((Year % 400)==0)) {return true;} else { return false; }}function overdate(obj) {obj.style.background = "#B3E6EA";obj.style.cursor = "pointer";}function outdate(obj) {obj.style.background = "#EDFBFB";}function displayCalendar(month, year) {var dateDiv = $("dateDiv");var html = "&lt;table id=\"dateTab\"&gt;&lt;tr class=\"day\"&gt;&lt;td&gt;日&lt;/td&gt;&lt;td&gt;一&lt;/td&gt;&lt;td&gt;二&lt;/td&gt;&lt;td&gt;三&lt;/td&gt;&lt;td&gt;四&lt;/td&gt;&lt;td&gt;五&lt;/td&gt;&lt;td&gt;六&lt;/td&gt;&lt;/tr&gt;";month = parseInt(month);year = parseInt(year);var i = 0;var days = getDaysInMonth(month + 1, year);var firstOfMonth = new Date(year, month, 1);//创建某年某月的第一天日期对象var startingPos = firstOfMonth.getDay();//得到这个月第一天是星期几var today = new Date();var tDate = today.getDate();var tMonth = today.getMonth();var tYear = today.getYear();days += startingPos;html += "&lt;tr class='date'&gt;";for (i = 0; i &lt; startingPos; i++) {html += "&lt;td&gt;&nbsp&lt;/td&gt;";}var j = 0;for (i = startingPos; i &lt; days; i++) {j++;var date = "";if ( i%7 == 0 ) html += "&lt;/tr&gt;&lt;tr class='date'&gt;";if (i - startingPos + 1 &lt; 10)date += "0";date += i - startingPos + 1;if (i%7 == 0 || (i+1)%7 == 0) {// 周六或周日if (j == tDate && tMonth == month && tYear == year) // 今天html += "&lt;td class='thisDay' onmouseover='overdate(this)' onmouseout='outdate(this)' onmousedown='selectDate(this)'&gt;" + date + "&lt;/td&gt;";else html += "&lt;td class='weekday' onmouseover='overdate(this)' onmouseout='outdate(this)' onmousedown='selectDate(this)'&gt;" + date + "&lt;/td&gt;";} else {// 周一至周五if (j == tDate && tMonth == month && tYear == year)// 今天html += "&lt;td class='thisDay' onmouseover='overdate(this)' onmouseout='outdate(this)' onmousedown='selectDate(this)'&gt;" + date + "&lt;/td&gt;";elsehtml += "&lt;td onmouseover='overdate(this)' onmouseout='outdate(this)' onmousedown='selectDate(this)'&gt;" + date + "&lt;/td&gt;";}}if (days &lt; 35 && days &gt; 28) {for (i = days; i &lt; 35; i++) {html += "&lt;td&gt;&nbsp;&lt;/td&gt;";}} else if (days &gt; 35) {for (i = days; i &lt; 42; i++) {html += "&lt;td&gt;&nbsp;&lt;/td&gt;";}}html += "&lt;/tr&gt;&lt;/table&gt;";dateDiv.innerHTML = html;}function isFourDigitYear(year) {if (year.length != 4) {alert ("Sorry, the year must be four-digits in length.");$("year").select();$("year").focus();return false;} else { return true; }}function getMonthIndex(month) {for (var i = 0; i &lt; monthArr.length; i++) {if (month == monthArr[i]) {return i;}}return 0;}function setPreviousYear() {var year  = $("year").value;if (isFourDigitYear(year)) {var month = getMonthIndex($("month").value);year--;$("year").value = year;displayCalendar(month, year);   }}function setPreviousMonth() {var year  =$("year").value;if (isFourDigitYear(year)) {var month = getMonthIndex($("month").value);if (month == 0) {month = 11;if (year &gt; 1000) {year--;$("year").value = year;}} else { month--; }$("month").value = monthArr[month];displayCalendar(month, year);   }}function setNextMonth() {var year  =$("year").value;if (isFourDigitYear(year)) {var month = getMonthIndex($("month").value);if (month == 11) {month = 0;year++;$("year").value = year;} else { month++; }$("month").value = monthArr[month];displayCalendar(month, year);   }}function setNextYear() {var year  =$("year").value;if (isFourDigitYear(year)) {var month = getMonthIndex($("month").value);year++;$("year").value = year;displayCalendar(month, year);   }}function leftFill(str, digit, char) {var string = str.toString();var ret = "";if (string.length &lt; digit) {for (var i = 0; i &lt; digit - string.length; i++) {ret += char;}} else {return string;}ret += string;return ret;}//设置今天日期function setToday() {var now   = new Date();var day   = now.getDate();var month = now.getMonth();var year  = now.getYear();var hour = leftFill(now.getHours(), 2, "0");var minute = leftFill(now.getMinutes(), 2, "0");var second = leftFill(now.getSeconds(), 2, "0");if (year &lt; 2000)    // Y2K Fix, Isaac Powellyear = year + 1900; $("month").value = monthArr[month];$("year").value = year;displayCalendar(month, year);$("hh").value = hour;$("mm").value = minute;$("ss").value = second;}function selectMonth(month) {var year  = $("year").value;$("month").value = monthArr[month];displayCalendar(month, year);closeMonthDiv();}function selectYear(year) {var month = getMonthIndex($("month").value);$("year").value = year;displayCalendar(month, year);closeYearDiv();}var curFocus = null;function selectInput(obj) {curFocus = obj;obj.select();}function increaseTime() {var hh = $("hh");if (curFocus == null) {return;}var curValue = parseInt(curFocus.value, 10);var value;if ((curFocus == hh && curValue &lt; 23) || (curFocus != hh && curValue &lt; 59)) {value = curValue + 1;} else {value = 0;}curFocus.value = leftFill(value, 2, "0");curFocus.focus();}function decreaseTime() {var hh = $("hh");if (curFocus == null) {return;}var curValue = parseInt(curFocus.value, 10);var value;if (curValue &gt; 0) {value = curValue - 1;} else { if (curFocus == hh) value = 23; else value = 59;}curFocus.value = leftFill(value, 2, "0");curFocus.focus();}function getScriptPath() {var elements = document.getElementsByTagName("script");for (var i = 0; i &lt; elements.length; i++) {        if (elements[i].src && elements[i].src.match(/date[\w\-\.]*\.js/) != null) {            return elements[i].src.substring(0, elements[i].src.lastIndexOf('/') + 1);        }    }return "";}var object = null;var mainDiv = null;var scriptPath = getScriptPath();function DateHandler(obj) {closeDate();//确保已存在的日期窗口被关闭，一个页面中同时只能存在一个日期窗口object = obj;var str = ""+ "&lt;div class='WdateDiv'&gt;"+ "&lt;div id='dpTitle'&gt;"+ "&lt;div style='float:left;margin:2px;width:45px'&gt;"+ "&lt;img style='cursor:pointer;' src='" + scriptPath + "images/navLeft.gif' onclick='setPreviousYear()'&gt;"+ "&lt;img style='cursor:pointer;' src='" + scriptPath + "images/left.gif' onclick='setPreviousMonth()'&gt;"+ "&lt;/div&gt;"+ "&lt;div style='float:left;margin:2px;'&gt;"+ "&lt;div style='width:62px' class='ymsel' id='monthDiv'&gt;"+ "&lt;table&gt;";for (var i = 0; i &lt; 6; i++) {var monthTd1 = "&lt;td onmouseover=\"this.className='mouseover'\" onmouseout=\"this.className='mouseout'\" onmousedown=\"selectMonth(" + i + ")\"&gt;" + monthArr[i] + "&lt;/td&gt;";var monthTd2 = "&lt;td onmouseover=\"this.className='mouseover'\" onmouseout=\"this.className='mouseout'\" onmousedown=\"selectMonth(" + (i+7) + ")\"&gt;" + monthArr[i+7] + "&lt;/td&gt;";var xTd = "&lt;td onmouseover=\"this.className='mouseover'\" onmouseout=\"this.className='mouseout'\" onmousedown=\"closeMonthDiv()\"&gt;x&lt;/td&gt;";str += "&lt;tr&gt;";if (i != 5) {str += monthTd1 + monthTd2;} else {str += monthTd1 + xTd;}str += "&lt;/tr&gt;";}str += "&lt;/table&gt;"+ "&lt;/div&gt;"+ "&lt;input id='month' style='margin-top:1px;width:30px;' maxlength='3' onfocus='mInuptOnfocus()' onblur='mInputOnblur()' onkeydown='return false' /&gt;"+ "&lt;/div&gt;"+ "&lt;div style='float:left;margin:2px;'&gt;"+ "&lt;div class='ymsel' id=\"yearDiv\"&gt;&lt;/div&gt;"+ "&lt;input id=\"year\" style='width:40px;' maxlength=4 onfocus=\"yInuptOnfocus()\" onblur=\"yInputOnblur()\"&gt;"+ "&lt;/div&gt;"+ "&lt;div style='float:right;margin:2px;'&gt;"+ "&lt;img style='cursor:pointer;' src='" + scriptPath + "images/right.gif' onclick='setNextMonth()'&gt;"+ "&lt;img style='cursor:pointer;' src='" + scriptPath + "images/navRight.gif' onclick='setNextYear()'&gt;"+ "&lt;/div&gt;"+ "&lt;/div&gt;"+ "&lt;div id=\"dateDiv\"&gt;&lt;/div&gt;"+ "&lt;div style='float:left;&gt;"+ "&lt;div id='timeDiv' style='float:left;margin-top:3px;text-align:left;'&gt;"+ "&lt;table class='timeTab'&gt;&lt;tr&gt;&lt;td rowspan='2'&gt;&lt;span class='time'&gt;时间&lt;/span&gt;"+ "&lt;span class='timeSpan'&gt;&lt;input id='hh' class='time' type='text' value='' size='2' onfocus='selectInput(this)' /&gt;:"+ "&lt;input id='mm' class='time' type='text' value='' size='2' onfocus='selectInput(this)' /&gt;:"+ "&lt;input id='ss' class='time' type='text' value='' size='2' onfocus='selectInput(this)' /&gt;&lt;/span&gt;&lt;/td&gt;"+ "&lt;td&gt;&lt;button class='selTimeBtn' onclick='increaseTime()'&gt;&lt;img style='cursor:pointer' src='" + scriptPath + "images/timeUp.gif' /&gt;&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;"+ "&lt;tr&gt;&lt;td&gt;&lt;button class='selTimeBtn' onclick='decreaseTime()'&gt;&lt;img style='cursor:pointer;margin-left:1px;' src='" + scriptPath + "images/timeDown.gif' /&gt;&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;"+ "&lt;/div&gt;"+ "&lt;div id=dpButton style='float:right;margin-top:3px;text-align:right;'&gt;"+ "&lt;input class=\"bttn\" type=button value=\"今天\" onclick=\"setToday()\" /&gt;" + "&lt;/div&gt;"+ "&lt;/div&gt;"+ "&lt;/div&gt;";if (mainDiv == null) {mainDiv = document.createElement("div");mainDiv.innerHTML = str;var top = object.offsetTop + object.clientTop;var left = object.offsetLeft + object.clientLeft;var height = object.clientHeight;mainDiv.style.position = "absolute";mainDiv.style.left = left+7 + "px";mainDiv.style.top = top + height+17 + "px";document.body.appendChild(mainDiv);}mainDiv.style.display = "block";setToday();}function closeDate() {if (mainDiv != null) {mainDiv.style.display = "none";mainDiv.innerHTML = "";mainDiv = null;}}function selectDate(obj) {var year = $("year").value;var month = getMonthIndex($("month").value) + 1;var date = obj.childNodes[0].nodeValue;var str = year + "-";str += leftFill(month, 2, "0");str += "-" + date;str += " " + $("hh").value + ":" + $("mm").value + ":" + $("ss").value;object.value = str;closeDate();}

date.css源代码：

.WdateDiv{width:190px;background-color:#FFFFFF;border:#C5E1E4 1px solid;padding:2px;}.WdateDiv *{font-size:9pt;}.WdateDiv #dpTitle{height:24px;border: solid 1px #C5E1E4;color:#13777E;background:url(images/bg.jpg) repeat #EDFBFB;margin-bottom:2px;}/* 年份月份选择框 DIV */.ymsel{position:absolute;margin-left:0px;top:28px;background-color:#FFFFFF;padding:2px;border:#A3C6C8 1px solid;display:none;text-align:center;}#month {background:transparent;border:solid 1px transparent;color:#08575B;cursor:pointer;}#year {background:transparent;border:solid 1px transparent;color:#08575B;cursor:pointer;}.bttn {background:#CFEBEE;border:solid 1px #38B1B9;color:#08575B;text-align:center;padding-top:2px;}.timeSpan {border:solid 1px #38B1B9;}.time {color:#085758;background:#FFFFFF;border:none;text-align:center;}.timeTab {border-collapse:collapse;border-spacing:0px;border:none;}.selTimeBtn {background:#FFFFFF;border:none;text-align:center;height:8px;}#dateTab {background:#EDFBFB;width:100%;border-collapse:collapse;border:solid 1px #C5E1E4;}.day {background:#BDEBEE;margin:0px;padding:0px;}.day td {color:#13777E;width:14%;margin:0px;padding:2px;text-align:center;}.date {background:#EDFBFB;}.date td {color:#13777E;margin:0px;padding:2px;text-align:center;}td.weekday {color:#CD527B;}td.thisDay {color:red;}.mouseover{background:#B3E6EA;cursor:pointer;color:#13777E;text-align:center;}.mouseout {background:#FFFFFF;color:#13777E;text-align:center;}

images目录下放置了所有使用到的图片.

下面是一个使用这个空间的测试页面：

&lt;?xml version="1.0" encoding="GBK" ?&gt;&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=GBK" /&gt;&lt;title&gt;Insert title here&lt;/title&gt;&lt;link rel="stylesheet" type="text/css" href="./date/date.css"/&gt;&lt;script type="text/javascript" src="./date/date.js"&gt;&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;input type="text" onfocus="new DateHandler(this)"/&gt;&lt;/body&gt;&lt;/html&gt;

年历日期控件

热点推荐