Phiên bản đầy đủ: jsB@nk » Thời gian » Lịch » Bộ lịch chọn
URL: https://www.javascriptbank.com/dynamic-calendar-dropdown-menu-script.html
Hiệu ứng tạo ra một tờ lịch tháng với các menu sổ dọc dùng để chọn tháng và năm. Muốn biết lịch của tháng-năm nào, bạn chỉ cần nhấp chuột và chọn.
Phiên bản đầy đủ: jsB@nk » Thời gian » Lịch » Bộ lịch chọn
URL: https://www.javascriptbank.com/dynamic-calendar-dropdown-menu-script.html
<SCRIPT LANGUAGE="JavaScript"><!-- Beginvar dDate = new Date();var dCurMonth = dDate.getMonth();var dCurDayOfMonth = dDate.getDate();var dCurYear = dDate.getFullYear();var objPrevElement = new Object();function fToggleColor(myElement) {var toggleColor = "#ff0000";if (myElement.id == "calDateText") {if (myElement.color == toggleColor) {myElement.color = "";} else {myElement.color = toggleColor; }} else if (myElement.id == "calCell") {for (var i in myElement.children) {if (myElement.children[i].id == "calDateText") {if (myElement.children[i].color == toggleColor) {myElement.children[i].color = "";} else {myElement.children[i].color = toggleColor; } } } }}function fSetSelectedDay(myElement){if (myElement.id == "calCell") {if (!isNaN(parseInt(myElement.children["calDateText"].innerText))) {myElement.bgColor = "#FF9900";objPrevElement.bgColor = "";document.all.calSelectedDate.value = parseInt(myElement.children["calDateText"].innerText);objPrevElement = myElement; } }}function fGetDaysInMonth(iMonth, iYear) {var dPrevDate = new Date(iYear, iMonth, 0);return dPrevDate.getDate();}function fBuildCal(iYear, iMonth, iDayStyle) {var aMonth = new Array();aMonth[0] = new Array(7);aMonth[1] = new Array(7);aMonth[2] = new Array(7);aMonth[3] = new Array(7);aMonth[4] = new Array(7);aMonth[5] = new Array(7);aMonth[6] = new Array(7);var dCalDate = new Date(iYear, iMonth-1, 1);var iDayOfFirst = dCalDate.getDay();var iDaysInMonth = fGetDaysInMonth(iMonth, iYear);var iVarDate = 1;var i, d, w;if (iDayStyle == 2) {aMonth[0][0] = "Sunday";aMonth[0][1] = "Monday";aMonth[0][2] = "Tuesday";aMonth[0][3] = "Wednesday";aMonth[0][4] = "Thursday";aMonth[0][5] = "Friday";aMonth[0][6] = "Saturday";} else if (iDayStyle == 1) {aMonth[0][0] = "Sun";aMonth[0][1] = "Mon";aMonth[0][2] = "Tue";aMonth[0][3] = "Wed";aMonth[0][4] = "Thu";aMonth[0][5] = "Fri";aMonth[0][6] = "Sat";} else {aMonth[0][0] = "Su";aMonth[0][1] = "Mo";aMonth[0][2] = "Tu";aMonth[0][3] = "We";aMonth[0][4] = "Th";aMonth[0][5] = "Fr";aMonth[0][6] = "Sa";}for (d = iDayOfFirst; d < 7; d++) {aMonth[1][d] = iVarDate;iVarDate++;}for (w = 2; w < 7; w++) {for (d = 0; d < 7; d++) {if (iVarDate <= iDaysInMonth) {aMonth[w][d] = iVarDate;iVarDate++; } }}return aMonth;}function fDrawCal(iYear, iMonth, iCellWidth, iCellHeight, sDateTextSize, sDateTextWeight, iDayStyle) {var myMonth;myMonth = fBuildCal(iYear, iMonth, iDayStyle);document.write("<table border='1' cellpadding=1 cellspacing=0>")document.write("<tr>");document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][0] + "</td>");document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][1] + "</td>");document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][2] + "</td>");document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][3] + "</td>");document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][4] + "</td>");document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][5] + "</td>");document.write("<td align='center' style='FONT-FAMILY:Arial;FONT-SIZE:12px;FONT-WEIGHT: bold'>" + myMonth[0][6] + "</td>");document.write("</tr>");for (w = 1; w < 7; w++) {document.write("<tr>")for (d = 0; d < 7; d++) {document.write("<td align='left' valign='top' width='" + iCellWidth + "' height='" + iCellHeight + "' id=calCell style='CURSOR:Hand' onMouseOver='fToggleColor(this)' onMouseOut='fToggleColor(this)' onclick=fSetSelectedDay(this)>");if (!isNaN(myMonth[w][d])) {document.write("<font id=calDateText onMouseOver='fToggleColor(this)' style='CURSOR:Hand;FONT-FAMILY:Arial;FONT-SIZE:" + sDateTextSize + ";FONT-WEIGHT:" + sDateTextWeight + "' onMouseOut='fToggleColor(this)' onclick=fSetSelectedDay(this)>" + myMonth[w][d] + "</font>");} else {document.write("<font id=calDateText onMouseOver='fToggleColor(this)' style='CURSOR:Hand;FONT-FAMILY:Arial;FONT-SIZE:" + sDateTextSize + ";FONT-WEIGHT:" + sDateTextWeight + "' onMouseOut='fToggleColor(this)' onclick=fSetSelectedDay(this)> </font>");}document.write("</td>")}document.write("</tr>");}document.write("</table>")}function fUpdateCal(iYear, iMonth) {myMonth = fBuildCal(iYear, iMonth);objPrevElement.bgColor = "";document.all.calSelectedDate.value = "";for (w = 1; w < 7; w++) {for (d = 0; d < 7; d++) {if (!isNaN(myMonth[w][d])) {calDateText[((7*w)+d)-7].innerText = myMonth[w][d];} else {calDateText[((7*w)+d)-7].innerText = " "; } } }}// End --></script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script language="JavaScript" for=window event=onload><!-- Beginvar dCurDate = new Date();frmCalendarSample.tbSelMonth.options[dCurDate.getMonth()].selected = true;for (i = 0; i < frmCalendarSample.tbSelYear.length; i++)if (frmCalendarSample.tbSelYear.options[i].value == dCurDate.getFullYear())frmCalendarSample.tbSelYear.options[i].selected = true;// End --></script><form name="frmCalendarSample" method="post" action=""><input type="hidden" name="calSelectedDate" value=""><table border="1" cellspacing=0 cellpadding=2><tr><td><select name="tbSelMonth" onchange='fUpdateCal(frmCalendarSample.tbSelYear.value, frmCalendarSample.tbSelMonth.value)'><option value="1">January</option><option value="2">February</option><option value="3">March</option><option value="4">April</option><option value="5">May</option><option value="6">June</option><option value="7">July</option><option value="8">August</option><option value="9">September</option><option value="10">October</option><option value="11">November</option><option value="12">December</option></select> <select name="tbSelYear" onchange='fUpdateCal(frmCalendarSample.tbSelYear.value, frmCalendarSample.tbSelMonth.value)'><option value="1998">1998</option><option value="1999">1999</option><option value="2000">2000</option><option value="2001">2001</option><option value="2002">2002</option><option value="2003">2003</option><option value="2004">2004</option></select></td></tr><tr><td><script language="JavaScript">var dCurDate = new Date();fDrawCal(dCurDate.getFullYear(), dCurDate.getMonth()+1, 30, 30, "12px", "bold", 1);</script> </td></tr></table></form><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->