Javascripts > Javascript Calendars > Calendar Popup
Script Title: Calendar Popup
Description: Pops up a small calendar (like VB6 dtPicker) and set a text-box value to the user selection. it's also highlights the current day, and has a 'today' link.
Example: Available
Copy the following code into your <HEAD></HEAD> tags.<script language="JavaScript"> <!-- var months = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"); var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); var days = new Array("S", "M", "T", "W", "T", "F", "S"); today = new getToday(); var element_id; function getDays(month, year) { // Test for leap year when February is selected. if (1 == month) return ((0 == year % 4) && (0 != (year % 100))) || (0 == year % 400) ? 29 : 28; else return daysInMonth[month]; } function getToday() { // Generate today's date. this.now = new Date(); this.year = this.now.getFullYear() ; // Returned year XXXX this.month = this.now.getMonth(); this.day = this.now.getDate(); } function newCalendar() { var parseYear = parseInt(document.all.year [document.all.year.selectedIndex].text); var newCal = new Date(parseYear , document.all.month.selectedIndex, 1); var day = -1; var startDay = newCal.getDay(); var daily = 0; today = new getToday(); // 1st call if ((today.year == newCal.getFullYear() ) && (today.month == newCal.getMonth())) day = today.day; // Cache the calendar table's tBody section, dayList. var tableCal = document.all.calendar.tBodies.dayList; var intDaysInMonth = getDays(newCal.getMonth(), newCal.getFullYear() ); for (var intWeek = 0; intWeek < tableCal.rows.length; intWeek++) for (var intDay = 0; intDay < tableCal.rows[intWeek].cells.length; intDay++) { var cell = tableCal.rows[intWeek].cells[intDay]; // Start counting days. if ((intDay == startDay) && (0 == daily)) daily = 1; // Highlight the current day. cell.style.color = (day == daily) ? "red" : ""; if(day == daily) { document.all.todayday.innerText= "Today: " + day + "/" + (newCal.getMonth()+1) + "/" + newCal.getFullYear() ; } // Output the day number into the cell. if ((daily > 0) && (daily <= intDaysInMonth)) cell.innerText = daily++; else cell.innerText = ""; } } function getTodayDay() { document.all[element_id].value = today.day + "/" + (today.month+1) + "/" + today.year; //document.all.calendar.style.visibility="hidden"; document.all.calendar.style.display="none"; document.all.year.selectedIndex =100; document.all.month.selectedIndex = today.month; } function getDate() { // This code executes when the user clicks on a day // in the calendar. if ("TD" == event.srcElement.tagName) // Test whether day is valid. if ("" != event.srcElement.innerText) { var mn = document.all.month.selectedIndex+1; var Year = document.all.year [document.all.year.selectedIndex].text; document.all[element_id].value=event.srcElement.innerText+"/"+mn +"/" +Year; //document.all.calendar.style.visibility="hidden"; document.all.calendar.style.display="none"; } } function GetBodyOffsetX(el_name, shift) { var x; var y; x = 0; y = 0; var elem = document.all[el_name]; do { x += elem.offsetLeft; y += elem.offsetTop; if (elem.tagName == "BODY") break; elem = elem.offsetParent; } while (1 > 0); shift[0] = x; shift[1] = y; return x; } function SetCalendarOnElement(el_name) { if (el_name=="") el_name = element_id; var shift = new Array(2); GetBodyOffsetX(el_name, shift); document.all.calendar.style.pixelLeft = shift[0]; // - document.all.calendar.offsetLeft; document.all.calendar.style.pixelTop = shift[1] + 25 ; } function ShowCalendar(elem_name) { if (elem_name=="") elem_name = element_id; element_id = elem_name; // element_id is global variable newCalendar(); SetCalendarOnElement(element_id); //document.all.calendar.style.visibility = "visible"; document.all.calendar.style.display="inline"; } function HideCalendar() { //document.all.calendar.style.visibility="hidden"; document.all.calendar.style.display="none"; } function toggleCalendar(elem_name) { //if (document.all.calendar.style.visibility == "hidden") if(document.all.calendar.style.display=="none") ShowCalendar(elem_name); else HideCalendar(); } --> </script> <style> .today {COLOR: black; FONT-FAMILY: sans-serif; FONT-SIZE: 10pt; FONT-WEIGHT: bold} .days {COLOR: navy; FONT-FAMILY: sans-serif; FONT-SIZE: 10pt; FONT-WEIGHT: bold; TEXT-ALIGN: center} .dates {COLOR: black; FONT-FAMILY: sans-serif; FONT-SIZE: 10pt} </style>
Copy the following code between the <BODY></BODY> tags of your html page.<FORM name=myForm> <INPUT id=MyDate name=MyDate size=15> <a href="JavaScript:;" onClick="toggleCalendar('MyDate')">Calendar</a> </form> <TABLE bgColor=#ffffff border=1 cellPadding=0 cellSpacing=3 id=calendar style="DISPLAY: none; POSITION: absolute; Z-INDEX: 4"> <TBODY> <TR> <TD colSpan=7 vAlign=center> <!-- Month combo box --> <SELECT id=month onchange=newCalendar()> <SCRIPT language=JavaScript> // Output months into the document. // Select current month. for (var intLoop = 0; intLoop < months.length; intLoop++) document.write("<OPTION " + (today.month == intLoop ? "Selected" : "") + ">" + months[intLoop]); </SCRIPT> </SELECT> <!-- Year combo box --> <SELECT id=year onchange=newCalendar()> <SCRIPT language=JavaScript> // Output years into the document. // Select current year. for (var intLoop = 1900; intLoop < 2028; intLoop++) document.write("<OPTION " + (today.year == intLoop ? "Selected" : "") + ">" + intLoop); </SCRIPT> </SELECT> </TD> </TR> <TR class=days> <!-- Generate column for each day. --> <SCRIPT language=JavaScript> // Output days. for (var intLoop = 0; intLoop < days.length; intLoop++) document.write("<TD>" + days[intLoop] + "</TD>"); </SCRIPT> </TR> <TBODY class=dates id=dayList onclick="getDate('')" vAlign=center> <!-- Generate grid for individual days. --> <SCRIPT language=JavaScript> for (var intWeeks = 0; intWeeks < 6; intWeeks++) { document.write("<TR>"); for (var intDays = 0; intDays < days.length; intDays++) document.write("<TD></TD>"); document.write("</TR>"); } </SCRIPT> <!-- Generate today day. --></TBODY> <TBODY> <TR> <TD class=today colSpan=5 id=todayday onclick=getTodayDay()></TD> <TD align=right colSpan=2><A href="javascript:HideCalendar();"><SPAN style="COLOR: black; FONT-SIZE: 10px"><B>Hide</B></SPAN></A></TD> </TR> </TBODY> </TABLE>