Calendar Popup [Javascript Toolbox] [Example] [Source]

Description: This script uses DHTML or Popup windows to display a calendar for the user to select a date. It was designed to look and behave like Microsoft Outlook. It can be implemented in only a few lines of code, yet also provides customization options to make it work correctly in any country's display format, etc. Note: Why are form elements or <SELECT> boxes showing over top of the DIV-style calendar popup? It's not a bug in the javascript - it's a bug/feature of browsers. See this explanation by WebReference. Example: Below are multiple examples of the CalendarPopup in use. Each is slightly different to show different capabilities of the script. Click the "Show Source" links for each example to see how it was done, and hover over the "Select" links to see how they are coded. Or view the source of the entire page! I have also provided a The Simplest Possible Implementation Of A Calendar Popup in case you're overwhelmed by this page :) Default calendar. + Show Source `var cal1 = new CalendarPopup();` select Default calendar using the DIV-style display. + Show Source `var cal1x = new CalendarPopup("testdiv1");` select Default calendar using the DIV-style display, with navigation drop-downs enabled. + Show Source `var cal1xx = new CalendarPopup("testdiv1"); cal1xx.showNavigationDropdowns();` select DIV-style calendar using a CSS prefix and different styles define in this HTML page (view source to see the defined styles) + Show Source `var cal18 = new CalendarPopup("testdiv1"); cal18.setCssPrefix("TEST");` select Some dates manually disabled from selection. Dates disabled: Anything up to today, December 25, 2007, and anything after January 1, 2008. + Show Source `var now = new Date(); var cal17 = new CalendarPopup("testdiv1"); cal17.addDisabledDates(null,formatDate(now,"yyyy-MM-dd")); cal17.addDisabledDates("12/25/2007"); cal17.addDisabledDates("Jan 1, 2008",null);` select Week-end select. + Show Source `var cal8 = new CalendarPopup(); cal8.setDisplayType("week-end");` select Calendar with showYearNavigation() enabled. + Show Source `var cal2 = new CalendarPopup(); cal2.showYearNavigation();` select Calendar with showYearNavigation() enabled and showYearNavigationInput() enabled, to allow manual entering of years + Show Source `var cal19 = new CalendarPopup(); cal19.showYearNavigation(); cal19.showYearNavigationInput();` select Calendar with only Saturdays allowed to be selected enabled. + Show Source `var cal3 = new CalendarPopup(); cal3.setDisabledWeekDays(0,1,2,3,4,5);` select German Calendar, with modified month names, day names, and week starting on Monday. Date format changed to dd/MM/yyyy + Show Source `var cal4 = new CalendarPopup(); cal4.setMonthNames('Januar','Februar','März','April','Mag','Juni','Juli','August','September','Oktober','November','Dezember'); cal4.setDayHeaders('S','M','D','M','D','F','S'); cal4.setWeekStartDay(1); cal4.setTodayText("Heute");` select Month-select calendar + Show Source `var cal5 = new CalendarPopup(); cal5.setDisplayType("month"); cal5.setReturnMonthFunction("monthReturn"); cal5.showYearNavigation(); function monthReturn(y,m) { document.forms[0].date5.value=m+"/"+y; }` select Quarter-select calendar + Show Source `var cal6 = new CalendarPopup(); cal6.setDisplayType("quarter"); cal6.setReturnQuarterFunction("quarterReturn"); cal6.showYearNavigation(); function quarterReturn(y,q) { document.forms[0].date6.value="Quarter "+q+", "+y; }` select Year-select calendar + Show Source `var cal7 = new CalendarPopup(); cal7.setDisplayType("year"); cal7.setReturnYearFunction("yearReturn"); cal7.showYearNavigation(); function yearReturn(y) { document.forms[0].date7.value=y; }` select Default calendar, but results are split into multiple fields. + Show Source `var cal9 = new CalendarPopup(); cal9.setReturnFunction("setMultipleValues"); function setMultipleValues(y,m,d) { document.forms[0].date9_year.value=y; document.forms[0].date9_month.value=m; document.forms[0].date9_date.value=d; }` / / (m/d/y) select + Show Source `var cal10 = new CalendarPopup(); cal10.setReturnFunction("setMultipleValues2"); function setMultipleValues2(y,m,d) { document.forms[0].date10_year.value=y; document.forms[0].date10_month.value=LZ(m); document.forms[0].date10_date.value=LZ(d); }` / / (mm/dd/yyyy) select + Show Source `var cal11 = new CalendarPopup(); cal11.setReturnFunction("setMultipleValues3"); function setMultipleValues3(y,m,d) { document.forms[0].date11_year.value=y; document.forms[0].date11_month.selectedIndex=m; document.forms[0].date11_date.selectedIndex=d; }` / select Calendar with popup pre-selected to be January 29, 1974 (my birthday!) + Show Source `var cal12 = new CalendarPopup();` select Start date and end date, with end date popup defaulting to same date as start date + Show Source `var cal13 = new CalendarPopup();` Start: select End: select + Show Source `var cal15 = new CalendarPopup(); cal15.setReturnFunction("setMultipleValues4"); function setMultipleValues4(y,m,d) { document.forms[0].date15_year.value=y; document.forms[0].date15_month.selectedIndex=m; for (var i=0; i<document.forms[0].date15_date.options.length; i++) { if (document.forms[0].date15_date.options[i].value==d) { document.forms[0].date15_date.selectedIndex=i; } } } var cal16 = new CalendarPopup(); cal16.setReturnFunction("setMultipleValues5"); function setMultipleValues5(y,m,d) { document.forms[0].date16_year.value=y; document.forms[0].date16_month.selectedIndex=m; for (var i=0; i<document.forms[0].date16_date.options.length; i++) { if (document.forms[0].date16_date.options[i].value==d) { document.forms[0].date16_date.selectedIndex=i; } } } function getDateString(y_obj,m_obj,d_obj) { var y = y_obj.options[y_obj.selectedIndex].value; var m = m_obj.options[m_obj.selectedIndex].value; var d = d_obj.options[d_obj.selectedIndex].value; if (y=="" || m=="") { return null; } if (d=="") { d=1; } return str= y+'-'+m+'-'+d; }` Start: / select End: / select |