【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.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();}elsecalendar.style.display = "none";}dateBegin.onclick = function() {if (calendar.style.display == "none") {calendar.style.display = "block";certain.style.display = "block";cancel.style.display = "block";bindSomeDate();}elsecalendar.style.display = "none";}dateEnd.onclick = function() {if (calendar.style.display == "none") {calendar.style.display = "block";certain.style.display = "block";cancel.style.display = "block"; bindSomeDate();}elsecalendar.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";}}elsealert("请选择起止日期");}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;elsereturn -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");}}}