【ife】任务四十二:UI组件之日历组件(三)

2017-01-13 19:20:11来源:CSDN作者:zhouziyu2011人点击

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.getElementById("date");var dateBegin = document.getElementById("dateBegin");var dateEnd = document.getElementById("dateEnd");var calendar = document.getElementById("calendar");var certain = document.getElementById("certain");var cancel = document.getElementById("cancel");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()); 	function bindOneDate() {		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"; 			}		}	}	function bindSomeDate() {		var selectNum = 0;		var firstDate;		for (var i = 0; i < tds.length; i++) {			tds[i].onclick = function() {				dateBegin.value = "";				dateEnd.value = "";				if (this.getAttribute("name") != "current") {					alert("请选择当月日期");					return;				}				selectNum++;				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;				}				if (selectNum == 1)					firstDate = value;				else { 					if (judgeDate(firstDate, value) == -1) {						dateBegin.value = firstDate;						dateEnd.value = value;					}					else{						dateBegin.value = value;						dateEnd.value = firstDate;					}					selectNum = 0;				}			}		}	}	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";		certain.style.display = "none";		cancel.style.display = "none";		bindOneDate();	}	input.onclick = function() {		if (calendar.style.display == "none") {			calendar.style.display = "block";			certain.style.display = "none"; 			cancel.style.display = "none"; 			bindOneDate();		}		else			calendar.style.display = "none";	}	dateBegin.onclick = function() {		if (calendar.style.display == "none") {			calendar.style.display = "block";			certain.style.display = "block";			cancel.style.display = "block";			bindSomeDate();		}		else			calendar.style.display = "none";	}	dateEnd.onclick = function() {		if (calendar.style.display == "none") {			calendar.style.display = "block";			certain.style.display = "block";			cancel.style.display = "block"; 			bindSomeDate();		}		else			calendar.style.display = "none";	}	certain.onclick = function() {		var flag = 0;		if (dateBegin.value != "" && dateEnd.value != "") {			for (var i = 0; i < tds.length; i++) {				if (judge(dateBegin.value, tds[i])) {					tds[i].style.background = "#cccccc";					flag = 1;				}				if (judge(dateEnd.value, tds[i])) {					tds[i].style.background = "#cccccc";					flag = 0;				}				if (flag == 1)					tds[i].style.background = "#cccccc";			}		}		else			alert("请选择起止日期");	}	cancel.onclick = function() {		dateBegin.value = "";		dateEnd.value = "";		bindSomeDate();		for (var i = 0; i < tds.length; i++) 			tds[i].style.background = "#ffffff";	}	function judge(value, td) {		var values = value.split("-");		if (td.firstChild.nodeValue != values[2])			return false;		if (td.getAttribute("name") != "current") 			return false;		return true;	}	function judgeDate(date1, date2) {		var date_1 = date1.split("-");		var date_2 = date2.split("-");		if (parseInt(date_1[2]) == parseInt(date_2[2]))			return 0;		else if (parseInt(date_1[2]) > parseInt(date_2[2]))			return 1;		else			return -1;	}	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"); 			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");		}	}}

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台