Version complète: jsB@nk » Heure » Calendrier » Calendrier dynamique Menu déroulant
URL: https://www.javascriptbank.com/dynamic-calendar-dropdown-menu-script.html
JavaScript calendriers ont existé depuis longtemps, mais jamais ils ont l'air (littéralement), jusqu'à l'arrivée DHTML. Consultez Constantin cool DHTML calendrier, qui ne ressemble pas beau, mais vous permet de chercher dynamiquement le calendrier pour un mois/année. Cool!
Version complète: jsB@nk » Heure » Calendrier » Calendrier dynamique Menu déroulant
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-->