自己做了一个日历日期控件,说实话,还存在很多问题,不过基本可以用,呵呵,先发出来再慢慢改。
目录结构见附件图片。
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 = "<td οnmοuseοver=\"this.className='mouseover'\" οnmοuseοut=\"this.className='mouseout'\" οnmοusedοwn=\"backYear()\">←</td>"; var xYearTd = "<td οnmοuseοver=\"this.className='mouseover'\" οnmοuseοut=\"this.className='mouseout'\" οnmοusedοwn=\"closeYearDiv()\">x</td>"; var forwardYearTd = "<td οnmοuseοver=\"this.className='mouseover'\" οnmοuseοut=\"this.className='mouseout'\" οnmοusedοwn=\"forwardYear()\">→</td>"; function showYearDiv() { var yearDiv = $("yearDiv"); var year = parseInt($("year").value); var html = "<table>"; for (var i = 0; i < 5; i++) { html += "<tr><td colspan=\"3\" οnmοuseοver=\"this.className='mouseover'\" οnmοuseοut=\"this.className='mouseout'\" οnmοusedοwn=\"selectYear(" + (year+i-2) + ")\">" + (year+i-2) + "</td></tr>"; } html += "<tr>"; html += backYearTd + xYearTd + forwardYearTd; html += "</tr>"; html += "<table>"; yearDiv.innerHTML = html; yearDiv.style.display = "block"; } function backYear() { var yearDiv = $("yearDiv"); var year = parseInt((yearDiv.getElementsByTagName("td"))[0].childNodes[0].nodeValue); var html = "<table>"; for (var i = 0; i < 5; i++) { html += "<tr><td colspan=\"3\" οnmοuseοver=\"this.className='mouseover'\" οnmοuseοut=\"this.className='mouseout'\" οnmοusedοwn=\"selectYear(" + (year+i-1) + ")\">" + (year+i-1) + "</td></tr>"; } html += "<tr>"; html += backYearTd + xYearTd + forwardYearTd; html += "</tr>"; html += "<table>"; yearDiv.innerHTML = html; yearDiv.style.display = "block"; } function forwardYear() { var yearDiv = $("yearDiv"); var year = parseInt((yearDiv.getElementsByTagName("td"))[0].childNodes[0].nodeValue); var html = "<table>"; for (var i = 0; i < 5; i++) { html += "<tr><td colspan=\"3\" οnmοuseοver=\"this.className='mouseover'\" οnmοuseοut=\"this.className='mouseout'\" οnmοusedοwn=\"selectYear(" + (year+i+1) + ")\">" + (year+i+1) + "</td></tr>"; } html += "<tr>"; html += backYearTd + xYearTd + forwardYearTd; html += "</tr>"; html += "<table>"; 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 = "<table id=\"dateTab\"><tr class=\"day\"><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>"; 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 += "<tr class='date'>"; for (i = 0; i < startingPos; i++) { html += "<td> </td>"; } var j = 0; for (i = startingPos; i < days; i++) { j++; var date = ""; if ( i%7 == 0 ) html += "</tr><tr class='date'>"; if (i - startingPos + 1 < 10) date += "0"; date += i - startingPos + 1; if (i%7 == 0 || (i+1)%7 == 0) {// 周六或周日 if (j == tDate && tMonth == month && tYear == year) // 今天 html += "<td class='thisDay' οnmοuseοver='overdate(this)' οnmοuseοut='outdate(this)' οnmοusedοwn='selectDate(this)'>" + date + "</td>"; else html += "<td class='weekday' οnmοuseοver='overdate(this)' οnmοuseοut='outdate(this)' οnmοusedοwn='selectDate(this)'>" + date + "</td>"; } else {// 周一至周五 if (j == tDate && tMonth == month && tYear == year) // 今天 html += "<td class='thisDay' οnmοuseοver='overdate(this)' οnmοuseοut='outdate(this)' οnmοusedοwn='selectDate(this)'>" + date + "</td>"; else html += "<td οnmοuseοver='overdate(this)' οnmοuseοut='outdate(this)' οnmοusedοwn='selectDate(this)'>" + date + "</td>"; } } if (days < 35 && days > 28) { for (i = days; i < 35; i++) { html += "<td> </td>"; } } else if (days > 35) { for (i = days; i < 42; i++) { html += "<td> </td>"; } } html += "</tr></table>"; 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 < 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 > 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 < digit) { for (var i = 0; i < 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 < 2000) // Y2K Fix, Isaac Powell year = 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 < 23) || (curFocus != hh && curValue < 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 > 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 < 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 = "" + "<div class='WdateDiv'>" + "<div id='dpTitle'>" + "<div style='float:left;margin:2px;width:45px'>" + "<img style='cursor:pointer;' src='" + scriptPath + "images/navLeft.gif' οnclick='setPreviousYear()'>" + "<img style='cursor:pointer;' src='" + scriptPath + "images/left.gif' οnclick='setPreviousMonth()'>" + "</div>" + "<div style='float:left;margin:2px;'>" + "<div style='width:62px' class='ymsel' id='monthDiv'>" + "<table>"; for (var i = 0; i < 6; i++) { var monthTd1 = "<td οnmοuseοver=\"this.className='mouseover'\" οnmοuseοut=\"this.className='mouseout'\" οnmοusedοwn=\"selectMonth(" + i + ")\">" + monthArr[i] + "</td>"; var monthTd2 = "<td οnmοuseοver=\"this.className='mouseover'\" οnmοuseοut=\"this.className='mouseout'\" οnmοusedοwn=\"selectMonth(" + (i+7) + ")\">" + monthArr[i+7] + "</td>"; var xTd = "<td οnmοuseοver=\"this.className='mouseover'\" οnmοuseοut=\"this.className='mouseout'\" οnmοusedοwn=\"closeMonthDiv()\">x</td>"; str += "<tr>"; if (i != 5) { str += monthTd1 + monthTd2; } else { str += monthTd1 + xTd; } str += "</tr>"; } str += "</table>" + "</div>" + "<input id='month' style='margin-top:1px;width:30px;' maxlength='3' οnfοcus='mInuptOnfocus()' οnblur='mInputOnblur()' οnkeydοwn='return false' />" + "</div>" + "<div style='float:left;margin:2px;'>" + "<div class='ymsel' id=\"yearDiv\"></div>" + "<input id=\"year\" style='width:40px;' maxlength=4 οnfοcus=\"yInuptOnfocus()\" οnblur=\"yInputOnblur()\">" + "</div>" + "<div style='float:right;margin:2px;'>" + "<img style='cursor:pointer;' src='" + scriptPath + "images/right.gif' οnclick='setNextMonth()'>" + "<img style='cursor:pointer;' src='" + scriptPath + "images/navRight.gif' οnclick='setNextYear()'>" + "</div>" + "</div>" + "<div id=\"dateDiv\"></div>" + "<div style='float:left;>" + "<div id='timeDiv' style='float:left;margin-top:3px;text-align:left;'>" + "<table class='timeTab'><tr><td rowspan='2'><span class='time'>时间</span>" + "<span class='timeSpan'><input id='hh' class='time' type='text' value='' size='2' οnfοcus='selectInput(this)' />:" + "<input id='mm' class='time' type='text' value='' size='2' οnfοcus='selectInput(this)' />:" + "<input id='ss' class='time' type='text' value='' size='2' οnfοcus='selectInput(this)' /></span></td>" + "<td><button class='selTimeBtn' οnclick='increaseTime()'><img style='cursor:pointer' src='" + scriptPath + "images/timeUp.gif' /></button></td></tr>" + "<tr><td><button class='selTimeBtn' οnclick='decreaseTime()'><img style='cursor:pointer;margin-left:1px;' src='" + scriptPath + "images/timeDown.gif' /></button></td></tr></table>" + "</div>" + "<div id=dpButton style='float:right;margin-top:3px;text-align:right;'>" + "<input class=\"bttn\" type=button value=\"今天\" οnclick=\"setToday()\" />" + "</div>" + "</div>" + "</div>"; 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目录下放置了所有使用到的图片.
下面是一个使用这个空间的测试页面:
<?xml version="1.0" encoding="GBK" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="./date/date.css"/>
<script type="text/javascript" src="./date/date.js"></script>
</head>
<body>
<input type="text" οnfοcus="new DateHandler(this)"/>
</body>
</html>