【ife】任务四十一：UI组件之日历组件（二）

var table = document.getElementsByTagName("table")[0];
var tds = table.getElementsByTagName("td");
var month = document.getElementById("month");
var year = document.getElementById("year");
var changeDay = document.getElementById("changeDay");
var changeMonth = document.getElementById("changeMonth");
var changeYear = document.getElementById("changeYear");
var left = document.getElementById("left"); 
var right = document.getElementById("right");
var input = document.getElementsByTagName("input")[0];
var img = document.getElementsByTagName("img")[0];
var calendar = document.getElementById("calendar");
window.onload = function() {
	var monthText = "";
	var text = "";
	for (var i = 1; i <= 12; i++) {
		monthText += "<option value=" + i + "月>" + i +"月</option>"; 
		text += "<option value=" + i + ">" + i +"</option>";
	}
	month.innerHTML = monthText;
	changeMonth.innerHTML = text;
	var yearText = "";
	for (var i = 1990; i <= 2090; i++)
		yearText += "<option value=" + i + ">" + i +"</option>";
	year.innerHTML = yearText;
	changeYear.innerHTML = yearText;
	month.onchange = function() {
		showDate(parseInt(year.value), month.value.slice(0, -1), 1);
	}
	year.onchange = function() {
		showDate(parseInt(year.value), month.value.slice(0, -1), 1);
	}
	showchangeDay(1990, 1); 
	changeMonth.onchange = function() { 
		showchangeDay(changeYear.value, changeMonth.value);
	}
	changeYear.onchange = function() { 
		showchangeDay(changeYear.value, changeMonth.value);
	}
	left.onclick = function() {
		if (month.value.slice(0, -1) > "1")
			month.value = month.value.slice(0, -1) -'0' - 1 + "月";
		else {
			month.value = "12月";
			year.value = parseInt(year.value) - 1;
		}
		showDate(parseInt(year.value), month.value.slice(0, -1), 1);
	}
	right.onclick = function() {
		if (month.value.slice(0, -1) != "12") 
			month.value = month.value.slice(0, -1) -'0' + 1 + "月";
		else {
			month.value = "1月";
			year.value = parseInt(year.value) + 1;
		}
		showDate(parseInt(year.value), month.value.slice(0, -1), 1); 
	}
	var date = new Date();
	year.value = date.getFullYear(); 
	month.value = date.getMonth() + 1 + "月"; 
	showDate(date.getFullYear(), date.getMonth() + 1, date.getDate()); 
	for (var i = 0; i < tds.length; i++) {
		tds[i].onclick = function() {
			var value = ""; 
			switch(this.getAttribute("name")) { 
				case "last":
					if (month.value == "1月") {
						value = value + (parseInt(year.value) - 1) + "-12-" + this.firstChild.nodeValue;
						year.value = parseInt(year.value) - 1;
						month.value = "12月";
						showDate(parseInt(year.value) - 1, 12, this.firstChild.nodeValue);
					}
					else { 
						value = value + parseInt(year.value) + "-" + (month.value.slice(0, -1) - '0' - 1) + "-" + this.firstChild.nodeValue;	
						month.value = month.value.slice(0, -1) - '0' - 1 + "月";
						showDate(parseInt(year.value), month.value.slice(0, -1), this.firstChild.nodeValue);
					}
					break;
				case "current":
					value = value + parseInt(year.value) + "-" + month.value.slice(0, -1) + "-"  + this.firstChild.nodeValue; 
					showDate(parseInt(year.value), month.value.slice(0, -1), this.firstChild.nodeValue);
					break;
				case "next":
					if (month.value == "12月") { 
						value = value + (parseInt(year.value) + 1) + "-1-" + this.firstChild.nodeValue;
						year.value = parseInt(year.value) + 1;
						month.value = "1月";
						showDate(parseInt(year.value) + 1, 1, this.firstChild.nodeValue);
					}
					else { 
						value = value + parseInt(year.value) + "-" + (month.value.slice(0, -1) - '0' + 1) + "-" + this.firstChild.nodeValue;
						month.value = month.value.slice(0, -1) - '0' + 1 + "月";	
						showDate(parseInt(year.value), month.value.slice(0, -1), this.firstChild.nodeValue);
					}
					break;
			}
			input.value = value; 
			calendar.style.display = "none"; 
		}
	}
	document.getElementsByTagName("button")[0].onclick = function() {
		showDate(changeYear.value, changeMonth.value, changeDay.value); 
		year.value = changeYear.value; 
		month.value = changeMonth.value + "月"; 
		input.value = changeYear.value + "-" + changeMonth.value + "-" + changeDay.value; 
		for (var i = 0; i < tds.length; i++) {
			if (changeDay.value == tds[i].firstChild.nodeValue && tds[i].getAttribute("name") == "current")
				tds[i].style.background = "#dddddd";
		}
		calendar.style.display = "block"; 
	}
	img.onclick = function() {
		if (calendar.style.display == "none")
			calendar.style.display = "block";
		else
			calendar.style.display = "none";
	}
	input.onclick = function() {
		if (calendar.style.display == "none")
			calendar.style.display = "block";
		else
			calendar.style.display = "none";
	}
	function showchangeDay(year, month) {
		changeDay.innerHTML = "";
		var dayText = "";
		var days = new Date(year, month, 0).getDate(); 
		for (var i = 1; i <= days; i++)
			dayText += "<option value=" + i + ">" + i +"</option>";
		changeDay.innerHTML = dayText;
	}
	function showDate(year, month, day) {
		var firstDay = new Date();
		firstDay.setFullYear(year, month - 1, 1);
		var weekday = firstDay.getDay();
		var tdBegin = 0; 
		if (weekday == 0) 
 			tdBegin = 7;
		for (var i = 0; i < 42; i++) {
			tds[i].innerHTML = "";
			tds[i].style.color = "#000000"; 
			tds[i].style.background = "#ffffff"; 
		}
		var days = new Date(year, month, 0).getDate();
		for (var i = 0; i < (weekday + tdBegin); i++) { 
			var temp = new Date();
			temp.setFullYear(year, month - 1, -i); 
			tds[(weekday + tdBegin) - i - 1].innerHTML = temp.getDate();
			tds[(weekday + tdBegin) - i - 1].style.color = "#aaaaaa"; 
			tds[(weekday + tdBegin) - i - 1].setAttribute("name", "last");
		}
		for (var i = 1; i <= days; i++) { 
			var temp = new Date();
			temp.setFullYear(year, month - 1, i);
			tds[weekday + tdBegin].innerHTML = temp.getDate(); 
			tds[weekday + tdBegin].setAttribute("name", "current"); t
			if (temp.getDate() == day)
				tds[weekday + tdBegin].style.background = "#dddddd";
			weekday++;
		}
		for (var i = 0; i < 42 - (weekday + tdBegin); i++) {
			var temp = new Date();
			temp.setFullYear(year, month - 1, days + i + 1); 
			tds[(weekday + tdBegin) + i].innerHTML = temp.getDate(); 
			tds[(weekday + tdBegin) + i].style.color = "#aaaaaa";
			tds[(weekday + tdBegin) + i].setAttribute("name", "next"); 
		}
	}
}