当前位置： 代码迷 >> Web前端 >> 年历日期控件
  详细解决方案

年历日期控件

热度：325   发布时间：2012-11-23 00:03:43.0
日历日期控件

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

?

目录结构见附件图片。

?

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 onmouseover=\"this.className='mouseover'\" onmouseout=\"this.className='mouseout'\" onmousedown=\"backYear()\">←</td>";
var xYearTd = "<td onmouseover=\"this.className='mouseover'\" onmouseout=\"this.className='mouseout'\" onmousedown=\"closeYearDiv()\">x</td>";
var forwardYearTd = "<td onmouseover=\"this.className='mouseover'\" onmouseout=\"this.className='mouseout'\" onmousedown=\"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\" onmouseover=\"this.className='mouseover'\" onmouseout=\"this.className='mouseout'\" onmousedown=\"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\" onmouseover=\"this.className='mouseover'\" onmouseout=\"this.className='mouseout'\" onmousedown=\"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\" onmouseover=\"this.className='mouseover'\" onmouseout=\"this.className='mouseout'\" onmousedown=\"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>&nbsp</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' onmouseover='overdate(this)' onmouseout='outdate(this)' onmousedown='selectDate(this)'>" + date + "</td>";
			else 
				html += "<td class='weekday' onmouseover='overdate(this)' onmouseout='outdate(this)' onmousedown='selectDate(this)'>" + date + "</td>";
		} else {// 周一至周五
			if (j == tDate && tMonth == month && tYear == year)
				// 今天
				html += "<td class='thisDay' onmouseover='overdate(this)' onmouseout='outdate(this)' onmousedown='selectDate(this)'>" + date + "</td>";
			else
				html += "<td onmouseover='overdate(this)' onmouseout='outdate(this)' onmousedown='selectDate(this)'>" + date + "</td>";
		}
	}
	if (days < 35 && days > 28) {
		for (i = days; i < 35; i++) {
			html += "<td>&nbsp;</td>";
		}
	} else if (days > 35) {
		for (i = days; i < 42; i++) {
			html += "<td>&nbsp;</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' onclick='setPreviousYear()'>"
					+ "<img style='cursor:pointer;' src='" + scriptPath + "images/left.gif' onclick='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 onmouseover=\"this.className='mouseover'\" onmouseout=\"this.className='mouseout'\" onmousedown=\"selectMonth(" + i + ")\">" + monthArr[i] + "</td>";
								var monthTd2 = "<td onmouseover=\"this.className='mouseover'\" onmouseout=\"this.className='mouseout'\" onmousedown=\"selectMonth(" + (i+7) + ")\">" + monthArr[i+7] + "</td>";
								var xTd = "<td onmouseover=\"this.className='mouseover'\" onmouseout=\"this.className='mouseout'\" onmousedown=\"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' onfocus='mInuptOnfocus()' onblur='mInputOnblur()' onkeydown='return false' />"
				+ "</div>"
				+ "<div style='float:left;margin:2px;'>"
					+ "<div class='ymsel' id=\"yearDiv\"></div>"
					+ "<input id=\"year\" style='width:40px;' maxlength=4 onfocus=\"yInuptOnfocus()\" onblur=\"yInputOnblur()\">"
				+ "</div>"
				+ "<div style='float:right;margin:2px;'>"
					+ "<img style='cursor:pointer;' src='" + scriptPath + "images/right.gif' onclick='setNextMonth()'>"
					+ "<img style='cursor:pointer;' src='" + scriptPath + "images/navRight.gif' onclick='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' onfocus='selectInput(this)' />:"
					+ "<input id='mm' class='time' type='text' value='' size='2' onfocus='selectInput(this)' />:"
					+ "<input id='ss' class='time' type='text' value='' size='2' onfocus='selectInput(this)' /></span></td>"
					+ "<td><button class='selTimeBtn' onclick='increaseTime()'><img style='cursor:pointer' src='" + scriptPath + "images/timeUp.gif' /></button></td></tr>"
					+ "<tr><td><button class='selTimeBtn' onclick='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=\"今天\" onclick=\"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" onfocus="new DateHandler(this)"/>
</body>
</html>

?

?

  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.