Link to home
Start Free TrialLog in
Avatar of Meps
MepsFlag for United States of America

asked on

Help with a JavaScript Popup calendar

I hope this is going to be an easy question.  I have a piece of code that I am using that I downloaded from a site, and I need to change it slightly, it is freeware, and I haven't gotten any feedback from the developer about how to do this.

I need to have the month back work.  It only shows from the current month to the next 12 months.  And I want to go back in time.   I want to be able to select previous months as well.  Can it go back as far as 12 months? and also go forward 12 months?

Here is the code.
/* PopUp Calendar v2.1
© PCI, Inc.,2000 • Freeware
webmaster@personal-connections.com
+1 (925) 955 1624
Permission granted  for unlimited use so far
as the copyright notice above remains intact. */

/* Settings. Please read readme.html file for instructions*/
var ppcDF = "m/d/Y";
var ppcMN = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
var ppcWN = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var ppcER = new Array(4);
ppcER[0] = "Required DHTML functions are not supported in this browser.";
ppcER[1] = "Target form field is not assigned or not accessible.";
ppcER[2] = "Sorry, the chosen date is not acceptable. Please read instructions on the page.";
ppcER[3] = "Unknown error occured while executing this script.";
var ppcUC = false;
 var ppcUX = 4;
 var ppcUY = 4;

/* Do not edit below this line unless you are sure what are you doing! */

var ppcIE=(navigator.appName == "Microsoft Internet Explorer");
var ppcNN=((navigator.appName == "Netscape")&&(document.layers));
var ppcTT="<table width=\"200\" cellspacing=\"1\" cellpadding=\"2\" border=\"1\" bordercolorlight=\"#000000\" bordercolordark=\"#000000\">\n";
var ppcCD=ppcTT;var ppcFT="<font face=\"MS Sans Serif, sans-serif\" size=\"1\" color=\"#000000\">";var ppcFC=true;
var ppcTI=false;var ppcSV=null;var ppcRL=null;var ppcXC=null;var ppcYC=null;
var ppcML=new Array(31,28,31,30,31,30,31,31,30,31,30,31);
var ppcWE=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var ppcNow=new Date();var ppcPtr=new Date();
if (ppcNN) {
 window.captureEvents(Event.RESIZE);
 window.onresize = restoreLayers;
 document.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
 document.onmousedown = recordXY;
 document.onmouseup = confirmXY;}
function restoreLayers(e) {
 if (ppcNN) {
  with (window.document) {
   open("text/html");
   write("<html><head><title>Restoring the layer structure...</title></head>");
   write("<body bgcolor=\"#FFFFFF\" onLoad=\"history.go(-1)\">");
   write("</body></html>");
   close();}}}
function recordXY(e) {
 if (ppcNN) {
  ppcXC = e.x;
  ppcYC = e.y;
  document.routeEvent(e);}}
function confirmXY(e) {
 if (ppcNN) {
  ppcXC = (ppcXC == e.x) ? e.x : null;
  ppcYC = (ppcYC == e.y) ? e.y : null;
  document.routeEvent(e);}}
function getCalendarFor(target,rules) {
 ppcSV = target;
 ppcRL = rules;
 if (ppcFC) {setCalendar();ppcFC = false;}
 if ((ppcSV != null)&&(ppcSV)) {
  if (ppcIE) {
   var obj = document.all['PopUpCalendar'];
   obj.style.left = document.body.scrollLeft+event.clientX;
   obj.style.top  = document.body.scrollTop+event.clientY;
   obj.style.visibility = "visible";}
  else if (ppcNN) {
   var obj = document.layers['PopUpCalendar'];
   obj.left = ppcXC
   obj.top  = ppcYC
   obj.visibility = "show";}
  else {showError(ppcER[0]);}}
 else {showError(ppcER[1]);}}
function switchMonth(param) {
 var tmp = param.split("|");
 setCalendar(tmp[0],tmp[1]);}
function moveMonth(dir) {
 var obj = null;
 var limit = false;
 var tmp,dptrYear,dptrMonth;
 if (ppcIE) {obj = document.ppcMonthList.sItem;}
 else if (ppcNN) {obj = document.layers['PopUpCalendar'].document.layers['monthSelector'].document.ppcMonthList.sItem;}
 else {showError(ppcER[0]);}
 if (obj != null) {
  if ((dir.toLowerCase() == "back")&&(obj.selectedIndex > 0)) {obj.selectedIndex--;}
  else if ((dir.toLowerCase() == "forward")&&(obj.selectedIndex < 12)) {obj.selectedIndex++;}
  else {limit = true;}}
 if (!limit) {
  tmp = obj.options[obj.selectedIndex].value.split("|");
  dptrYear  = tmp[0];
  dptrMonth = tmp[1];
  setCalendar(dptrYear,dptrMonth);}
 else {
  if (ppcIE) {
   obj.style.backgroundColor = "#FF0000";
   window.setTimeout("document.ppcMonthList.sItem.style.backgroundColor = '#FFFFFF'",50);}}}
function selectDate(param) {
 var arr   = param.split("|");
 var year  = arr[0];
 var month = arr[1];
 var date  = arr[2];
 var ptr = parseInt(date);
 ppcPtr.setDate(ptr);
 if ((ppcSV != null)&&(ppcSV)) {
  if (validDate(date)) {ppcSV.value = dateFormat(year,month,date);hideCalendar();}
  else {showError(ppcER[2]);if (ppcTI) {clearTimeout(ppcTI);ppcTI = false;}}}
 else {
  showError(ppcER[1]);
  hideCalendar();}}
function setCalendar(year,month) {
 if (year  == null) {year = getFullYear(ppcNow);}
 if (month == null) {month = ppcNow.getMonth();setSelectList(year,month);}
 if (month == 1) {ppcML[1]  = (isLeap(year)) ? 29 : 28;}
 ppcPtr.setYear(year);
 ppcPtr.setMonth(month);
 ppcPtr.setDate(1);
 updateContent();}
function updateContent() {
 generateContent();
 if (ppcIE) {document.all['monthDays'].innerHTML = ppcCD;}
 else if (ppcNN) {
  with (document.layers['PopUpCalendar'].document.layers['monthDays'].document) {
   open("text/html");
   write("<html>\n<head>\n<title>DynDoc</title>\n</head>\n<body bgcolor=\"#FFFFFF\">\n");
   write(ppcCD);
   write("</body>\n</html>");
   close();}}
 else {showError(ppcER[0]);}
 ppcCD = ppcTT;}
function generateContent() {
 var year  = getFullYear(ppcPtr);
 var month = ppcPtr.getMonth();
 var date  = 1;
 var day   = ppcPtr.getDay();
 var len   = ppcML[month];
 var bgr,cnt,tmp = "";
 var j,i = 0;
 for (j = 0; j < 7; ++j) {
  if (date > len) {break;}
  for (i = 0; i < 7; ++i) {
   bgr = ((i == 0)||(i == 6)) ? "#FFFFCC" : "#FFFFFF";
   if (((j == 0)&&(i < day))||(date > len)) {tmp  += makeCell(bgr,year,month,0);}
   else {tmp  += makeCell(bgr,year,month,date);++date;}}
  ppcCD += "<tr align=\"center\">\n" + tmp + "</tr>\n";tmp = "";}
 ppcCD += "</table>\n";}
function makeCell(bgr,year,month,date) {
 var param = "\'"+year+"|"+month+"|"+date+"\'";
 var td1 = "<td width=\"20\" bgcolor=\""+bgr+"\" ";
 var td2 = (ppcIE) ? "</font></span></td>\n" : "</font></a></td>\n";
 var evt = "onMouseOver=\"this.style.backgroundColor=\'#FF0000\'\" onMouseOut=\"this.style.backgroundColor=\'"+bgr+"\'\" onMouseUp=\"selectDate("+param+")\" ";
 var ext = "<span Style=\"cursor: hand\">";
 var lck = "<span Style=\"cursor: default\">";
 var lnk = "<a href=\"javascript:selectDate("+param+")\" onMouseOver=\"window.status=\' \';return true;\">";
 var cellValue = (date != 0) ? date+"" : "&nbsp;";
 if ((ppcNow.getDate() == date)&&(ppcNow.getMonth() == month)&&(getFullYear(ppcNow) == year)) {
  cellValue = "<b>"+cellValue+"</b>";}
 var cellCode = "";
 if (date == 0) {
  if (ppcIE) {cellCode = td1+"Style=\"cursor: default\">"+lck+ppcFT+cellValue+td2;}
  else {cellCode = td1+">"+ppcFT+cellValue+td2;}}
 else {
  if (ppcIE) {cellCode = td1+evt+"Style=\"cursor: hand\">"+ext+ppcFT+cellValue+td2;}
  else {
   if (date < 10) {cellValue = "&nbsp;" + cellValue + "&nbsp;";}
   cellCode = td1+">"+lnk+ppcFT+cellValue+td2;}}
 return cellCode;}
function setSelectList(year,month) {
 var i = 0;
 var obj = null;
 if (ppcIE) {obj = document.ppcMonthList.sItem;}
 else if (ppcNN) {obj = document.layers['PopUpCalendar'].document.layers['monthSelector'].document.ppcMonthList.sItem;}
 else {/* NOP */}
 while (i < 13) {
  obj.options[i].value = year + "|" + month;
  obj.options[i].text  = year + " • " + ppcMN[month];
  i++;
  month++;
  if (month == 12) {year++;month = 0;}}}
function hideCalendar() {
 if (ppcIE) {document.all['PopUpCalendar'].style.visibility = "hidden";}
 else if (ppcNN) {document.layers['PopUpCalendar'].visibility = "hide";window.status = " ";}
 else {/* NOP */}
 ppcTI = false;
 setCalendar();
 ppcSV = null;
 if (ppcIE) {var obj = document.ppcMonthList.sItem;}
 else if (ppcNN) {var obj = document.layers['PopUpCalendar'].document.layers['monthSelector'].document.ppcMonthList.sItem;}
 else {/* NOP */}
 obj.selectedIndex = 0;}
function showError(message) {
 window.alert("[ PopUp Calendar ]\n\n" + message);}
function isLeap(year) {
 if ((year%400==0)||((year%4==0)&&(year%100!=0))) {return true;}
 else {return false;}}
function getFullYear(obj) {
 if (ppcNN) {return obj.getYear() + 1900;}
 else {return obj.getYear();}}
function validDate(date) {
 var reply = true;
 if (ppcRL == null) {/* NOP */}
 else {
  var arr = ppcRL.split(":");
  var mode = arr[0];
  var arg  = arr[1];
  var key  = arr[2].charAt(0).toLowerCase();
  if (key != "d") {
   var day = ppcPtr.getDay();
   var orn = isEvenOrOdd(date);
   reply = (mode == "[^]") ? !((day == arg)&&((orn == key)||(key == "a"))) : ((day == arg)&&((orn == key)||(key == "a")));}
  else {reply = (mode == "[^]") ? (date != arg) : (date == arg);}}
 return reply;}
function isEvenOrOdd(date) {
 if (date - 21 > 0) {return "e";}
 else if (date - 14 > 0) {return "o";}
 else if (date - 7 > 0) {return "e";}
 else {return "o";}}
function dateFormat(year,month,date) {
 if (ppcDF == null) {ppcDF = "m/d/Y";}
 var day = ppcPtr.getDay();
 var crt = "";
 var str = "";
 var chars = ppcDF.length;
 for (var i = 0; i < chars; ++i) {
  crt = ppcDF.charAt(i);
  switch (crt) {
   case "M": str += ppcMN[month]; break;
   case "m": str += (month<9) ? ("0"+(++month)) : ++month; break;
   case "Y": str += year; break;
   case "y": str += year.substring(2); break;
   case "d": str += ((ppcDF.indexOf("m")!=-1)&&(date<10)) ? ("0"+date) : date; break;
   case "W": str += ppcWN[day]; break;
    default: str += crt;}}
 return unescape(str);}

Thanks
Avatar of MGrassman
MGrassman
I use a vbScript that will let you go back or forward many years.  Hope it helps.

Place this code in your HTML Document.

------------------------------------------------------------------------------------------
This is the input box that you would use along with the image that opens
the calander page.
------------------------------------------------------------------------------------------

<input type="text" name="StartDate" size="10" language="vbscript" onblur="ValidDate StartDate,StartDate.value,4" tabindex="1" >
<img SRC="images/Calender5.gif" onclick="StartDate.value = doOpen" language="vbscript" size="5" Title="Start Date Calendar" align="absbottom" WIDTH="31" HEIGHT="25">


------------------------------------------------------------------------------------------
This script goes in you HTML HEAD Section
------------------------------------------------------------------------------------------
<script language=javascript>

function ValidDate(dateobj,dateStr,yrPos) {
// Checks for the following valid date formats:
// MM/DD/YY   MM/DD/YYYY   MM-DD-YY   MM-DD-YYYY
// Also separates date into month, day, and year variables
if (dateStr=="") {
      return}
var datePat = /^(\d{1,2})(\/|-)(\d{1,2})\2(\d{2}|\d{4})$/;

// To require a 4 digit year entry, use this line instead:
// var datePat = /^(\d{1,2})(\/|-)(\d{1,2})\2(\d{4})$/;

var matchArray = dateStr.match(datePat); // is the format ok?
if (matchArray == null) {
alert( dateStr + " : Date is not in a valid format. (MM/DD/YYYY)")
dateobj.value = "";
dateobj.focus();
return false;
}
month = matchArray[1]; // parse date into variables
day = matchArray[3];
year = matchArray[4];
if (month < 1 || month > 12) { // check month range
alert("Month must be between 1 and 12.");
dateobj.value = "";
dateobj.focus();
return false;
}
if (day < 1 || day > 31) {
alert("Day must be between 1 and 31.");
dateobj.value = "";
dateobj.focus();
return false;
}
if ((month==4 || month==6 || month==9 || month==11) && day==31) {
alert("Month "+month+" doesn't have 31 days!");
dateobj.value = "";
dateobj.focus();
return false
}
if (month == 2) { // check for february 29th
var isleap = (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0));
if (day>29 || (day==29 && !isleap)) {
alert("February " + year + " doesn't have " + day + " days!");
dateobj.value = "";
dateobj.focus();
return false;
   }
}
if (yrPos == 4){
      if (year < 100)
            {if (year < 50)
                  {year= "20" + year}
            else
                  {year = "19" + year}
      };
      if (month.length < 2){
            {month = "0" + month};
            }
      if (day.length < 2){
            {day = "0" + day};
      }
};
dateobj.value = month + "/" + day + "/" + year
return true;  // date is valid
}
//  End -->
</script>      
------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------
<script LANGUAGE="vbscript">
Function doOpen()
      strURL = "calendar.html"
      doOpen = window.showModalDialog(strURL,,"dialogWidth:181px; dialogHeight:245px; resize:yes; status:no; center:no; dialogTop:" & window.event.y & "px; dialogLeft:" & window.event.x & "px; help:no; minimize:no; maximize:no; border:thin; statusbar:no;")
END Function
</script>

------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------

Placed the following code in seperate html file.

-------------------------------------          Calander.html        ---------------------------------------------------
<html>
<head>

<STYLE>

      TABLE       {
            border-left:solid buttonface 1;
            border-top:solid buttonface 1;
            border-right:solid buttonface 1;
            border-bottom:solid buttonface 1;
            margin:0;
            padding:0;}
      TH       {
            height:25;
            border-left:solid black 1;
            border-top:solid black 1;
            border-right:solid silver 1;
            border-bottom:solid silver 1;}
      TD       {
            text-align:center;}
      BODY       {
            background:buttonface;}#theDate {
            border:solid buttonface 1;
            background:buttonface ;}
      #CalendarTable {
            width:175;
            height:200;
            left:0;
            top:0;
            margin:0;
            padding:0;}
      TD.CalendarToDay {
            width:25;
            height:20;
            border-left:solid black 1;
            border-top:solid black 1;
            border-right:solid silver 1;
            border-bottom:solid silver 1;
            font:8pt arial;
            background:khaki;  
            text-align:center; }
      TD.CalendarDay {
            width:25;
            height:20;
            border-left:solid black 1;
            border-top:solid black 1;
            border-right:solid silver 1;
            border-bottom:solid silver 1;
            font:8pt arial;
            text-align:center; }
      TD.CalendarEmptyDay {
            width:25;
            height:20;
            border-left:solid black 1;
            border-top:solid black 1;
            border-right:solid silver 1;
            border-bottom:solid silver 1;
            background:gainsboro; }
      TD.Highlighted {
            width:25;
            height:20;
            border-left:solid gainsboro 1;
            border-top:solid gainsboro 1;
            border-right:solid black 1;
            border-bottom:solid black 1;
            cursor:hand;
            background:steelblue;
            color:white;}.Calendar {
            font:8pt arial;
            color:navy;
            background:white;}
      .CalendarMonthTitle {
            font: 8pt arial;
            font-weight:bold;}
      .CalendarDayTitle {
            font:8pt arial narrow;
            background:beige; }
      .changeDate {
            font:15pt arial; }
      .small       {border:0;}
      
</STYLE>

</head>

<title>Date Picker</title>

<body leftmargin=0 topmargin=0 SCROLL=NO>

   <!-- This OBJECT is the Right-Click Month List popup menu -->
   <OBJECT
        style="display:none;"
        id=popMenu
        classid="clsid:7823A620-9DD9-11CF-A662-00AA00C066D2"
        width=1
        height=1
        align=left
        hspace=0
        vspace=0>
         <PARAM NAME="Menuitem[0]" value="January">
         <PARAM NAME="Menuitem[1]" value="February">
         <PARAM NAME="Menuitem[2]" value="March">
         <PARAM NAME="Menuitem[3]" value="April">
         <PARAM NAME="Menuitem[4]" value="May">
         <PARAM NAME="Menuitem[5]" value="June">
         <PARAM NAME="Menuitem[6]" value="July">
         <PARAM NAME="Menuitem[7]" value="August">
         <PARAM NAME="Menuitem[8]" value="September">
         <PARAM NAME="Menuitem[9]" value="October">
         <PARAM NAME="Menuitem[10]" value="November">
         <PARAM NAME="Menuitem[11]" value="December">
         <PARAM NAME="Menuitem[12]" value="">
         <PARAM NAME="Menuitem[13]" value="Go to Today">
</object>

<!-- This DIV is where the Calendar is contained -->
<DIV align=center id=calendar></DIV>

<script language=vbscript id="JerryNixon">

ON ERROR RESUME NEXT

' **** Instanciate global variables
Dim intMonth
Dim intYear
Dim intDay

sub window_onLoad ' **** Execute as window is opened

      ' **** Verify script version
      If Not isObject(document.scripts(mid(window.location,_
            inStr(window.location,"t/")+1+1,10))) Then Exit Sub

      ' **** Set Global Variables
      intMonth = month(date)
      intYear = year(date)
      intDay = ""

      ' **** Set Environment Variables
      window.dialogWidth = "181px"
      window.dialogHeight = "245px"

      ' **** Create Calendar
      Call doCalendar()

end sub

sub window_onUnload ' **** Execute as window is closed

      ' **** Ensure date was selected before returning value
      If not isObject(window.event.srcelement) And window.returnValue <> date() Then _
            window.returnValue = ""

end sub

sub doCalendar ' **** Generate or Update Calendar Display

      ' **** Populate Claendar container with generated HTML
      calendar.innerHtml = GenerateCalendar(intMonth, intYear)

      ' **** Populate date detail with current date.
      thedate.innertext = getTheDate(intDate)

end sub

sub popMenu_Click(ByVal intMenuItem) ' **** handle click of popup menu

      ' **** if item is "Go To Today"
      If intMenuItem = 13 Then
            ' **** Reset globalvariables
            intMonth = month(date)
            intYear = year(date)
            intDay = day(date())

            ' **** redraw Calendar
            Call doCalendar()

            ' **** Insert new defaulted return value
            window.returnValue = date()

            ' **** End Processing
            Exit Sub

      End If

      ' **** Update global vairable
      intMonth = intMenuItem

      ' **** Redraw Calendar
      Call doCalendar()

end sub

sub changeDate(intAmount,strMeans) ' **** Change the currently displayed calendar

      ' **** Get current Date based on globals
      myDate = dateSerial(intYear,intMonth,1)

      ' **** Alter date based on means and amount
      myDate = dateAdd(strMeans,intAmount,myDate)

      ' **** Update global variables
      intMonth = month(myDate)
      intYear = year(myDate)

      ' **** Update Calendar display
      Call doCalendar()

end sub

' **** instanciate the pseudo fromElement
Dim strLastClass, objFromElement

sub document_onmousemove ' **** Handle all mouse action

      ' **** Retrieve activating element
      set x = window.event.srcElement

      ' **** Only deal with Table cells
      If x.tagname <> "TD" Then exit sub

      Select Case lcase(x.classname)

       ' **** Hover is Valid Day
       Case "calendarday": Call doHighlight(x)

       ' **** Hover is Valid Day
       Case "calendartoday": Call doHighlight(x)

       ' **** Hover is Self, disregard
       Case "highlighted"

       ' **** Hover is Invalid Day
       Case Else: Call doHighlight("-")

      End Select

end sub

sub doHighlight(x) ' **** Make valid cell highlighted, and unhighlight previous - if any

      ' **** No valid cell hovered
      If x = "-" and isobject(objFromElement) Then objFromElement.className = strLastClass

      ' **** Update From Element Classname      
      If isobject(objFromElement) Then  objFromElement.className = strLastClass

      ' **** create pseudo fromElement object based on current hover
      If isObject(x) Then
            Set objFromElement = x
            strLastClass = x.classname
            x.classname = "highlighted"
            thedate.innertext = getTheDate(x.innertext)
      End If

end sub

Function getTheDate(intLocalDay) ' **** create, format, return date based on global variables & hover

      ' **** Handle null values
      If intLocalDay = "" Then intLocalDay = day(date())

      ' *** Build Date
      myDate = dateSerial(intYear,intMonth,intLocalDay)

      ' **** Update global variable
      intDay = x

      ' **** Display hover date
      getTheDate = formatDateTime(myDate,vbLongDate)

End Function

sub document_onmousedown ' **** Handle all mouse clicks

      If window.event.button = 2 Then

            ' **** Richt-Click Pop Up Menu
            popMenu.popup()

      Else

        Select Case lcase(window.event.srcelement.id)

          ' **** Month (+) Advance and Update Calendar by 1 month
          Case "monthforward": Call changeDate(1,"m")

          ' **** Month (-) Back Up and Update Calendar by 1 month
          Case "monthback": Call changeDate(-1,"m")

          ' **** Blank Cell at end of month, advance and update calendar by 1 month
          Case "dayforward": Call changeDate(1,"m")

          ' **** Blank Cell at beginning of month, back up and update calendar by 1 month
          Case "dayback": Call changeDate(-1,"m")

        End Select

        ' **** Valid day, record date and close window
       ''' RETURN VALUE SET HERE !!!!!!!!
        Select Case lcase(window.event.srcelement.classname)
          Case "highlighted"
            '' pb commented next line as test
            if intMonth < 10 then
                  intMonth = "0" & intMonth
            end if
            intDay = window.event.srcelement.innerText
            if intDay < 10 then
                  intDay = "0"& intDay
            end if
'            intMonth = 12
'            window.returnValue = dateserial(intYear,intMonth,window.event.srcelement.innerText)
            window.returnValue = intMonth & "/" & intDay & "/" & intYear
'            window.returnValue = 12/01/2022"

            window.close
        End Select

      End IF

end sub

Function GenerateCalendar(m,y) ' **** Generate HTML for calendar

      ' **** Get date of Month's first day
      Dim FirstDay, TheDay
      FirstDay = WeekDay(Dateserial(y,m,1)) : TheDay = 0

      ' **** Get total number of days in Month
      Dim DaysInMonth
      DaysInMonth= Day(Dateserial(y,m+1,1)-1): GenerateCalendar = ""

      ' **** Get Name of Current Month
      Dim ThisMonth
      ThisMonth=MonthName(Month(Dateserial(y,m,1))) & " " & Year(Dateserial(y,m,1))

      ' **** Set code for Month Navigation
      goMonthBack = "<span class=changeDate id=monthBack style=""cursor:hand"" onclick=""call changeDate(-1,'m')"" language=vbscript> - </span>"
      goMonthForward = "<span class=changeDate id=monthForward style=""cursor:hand"" onmousedown=""Call changeDate(1,'m')"" language=vbscript> + </span>"

      ' **** Set code for Year Navigation
      goYearBack = "<span class=changeDate id=back style=""cursor:hand"" onclick=""doYearBack"" language=vbscript> - </span>"
      goYearForward = "<span class=changeDate id=forward style=""cursor:hand"" onmousedown=""goYearForward"" language=vbscript> + </span>"

      ' **** Open Calendar Table
      GenerateCalendar = GenerateCalendar & "<TABLE style=""position:absolute;"" align=center BORDER=0 CLASS=Calendar CELLPADDING=0 CELLSPACING=0 id=CalendarTable>"

      GenerateCalendar = GenerateCalendar & "<TR CLASS=CalendarMonthTitle>"
      GenerateCalendar = GenerateCalendar & "<TH COLSPAN=7>"

          ' **** Open title table
          GenerateCalendar = GenerateCalendar & "<table border=0 cellpadding=0 cellspacing=0 width=100% class=small>"
 
           ' **** Place Month Back Navigation
           GenerateCalendar = GenerateCalendar & "<td class=small width=10>" & goMonthBack & "</td>"
 
           ' **** Insert current Month and Year
           GenerateCalendar = GenerateCalendar & "<th class=small TITLE=""" & ThisMonth & """>" & ThisMonth & "</th>"

          ' **** Place Month Forward Navigation
          GenerateCalendar = GenerateCalendar & "<td class=small width=10>" & goMonthForward & "</td>"

          ' **** Close title table
          GenerateCalendar = GenerateCalendar & "</table>"

      GenerateCalendar = GenerateCalendar & "</TH>"
      GenerateCalendar = GenerateCalendar & "</TR>"

      ' **** Day Titles
      GenerateCalendar = GenerateCalendar & "<TR CLASS=CalendarDayTitle>"
      For intDayNumber = 1 to 7
            strDayName = weekdayname(intDayNumber)
            GenerateCalendar = GenerateCalendar & "<TH TITLE=" & strDayName & ">" & left(strDayName,1) & "</TH>"
      Next
      GenerateCalendar = GenerateCalendar & "</TR>"
      

      ' **** Build Month Rows
      For Row=1 to 6

            ' **** Open new row
            GenerateCalendar = GenerateCalendar & "<TR>"
      
            ' **** Build day columns
            For Col=1 to 7

                  If Row=1 AND Col=FirstDay Then TheDay=1
                  strDayTitle = formatDateTime(dateserial(y,m,TheDay),vbLongDate)

                  ' **** If Calendar Day is today
                  If dateserial(y,m,TheDay) = Date  And TheDay <= DaysInMonth And TheDay <> 0 Then
                        GenerateCalendar = GenerateCalendar & "<TD TITLE=""" & strDayTitle & """ CLASS=CalendarToDay>" & TheDay

                  ' **** If Calendar Day is any other day
                  ElseIf TheDay <= DaysInMonth And TheDay <> 0 Then
                        GenerateCalendar = GenerateCalendar & "<TD TITLE=""" & strDayTitle & """ CLASS=CalendarDay>" & TheDay

                  ' **** If Calendar Day is empty at beginning of month
                  ElseIf (TheDay > DaysInMonth Or TheDay = 0) And Col < 4 Then
                        GenerateCalendar = GenerateCalendar & "<TD CLASS=CalendarEmptyDay id=DayBack>&nbsp;"

                  ' **** If Calendar Day is empty at end of month
                  ElseIf (TheDay > DaysInMonth Or TheDay = 0) And Col => 4  Then
                        GenerateCalendar = GenerateCalendar & "<TD CLASS=CalendarEmptyDay id=DayForward>&nbsp;"
                  End If
      
                  ' **** If calendar started, increment the day's value
                  If TheDay > 0 Then TheDay=TheDay+1

                  ' **** Close current cell
                  GenerateCalendar = GenerateCalendar & "</TD>"

            Next

            ' **** Close current row
            GenerateCalendar = GenerateCalendar & "</TR>"

            ' **** Exit if all days created
            If TheDay > DaysInMonth Then Exit For

      Next

      ' **** Ensure the calendar has six rows
      If Row = 5 Then GenerateCalendar = GenerateCalendar & "<tr><td class=CalendarEmptyDay id=DayForward>&nbsp;</td><td class=CalendarEmptyDay id=DayForward>&nbsp;</td><td class=CalendarEmptyDay id=DayForward>&nbsp;</td><td class=CalendarEmptyDay id=DayForward>&nbsp;</td><td class=CalendarEmptyDay id=DayForward>&nbsp;</td><td class=CalendarEmptyDay id=DayForward>&nbsp;</td><td class=CalendarEmptyDay id=DayForward>&nbsp;</td></tr>"

      ' **** Add the date detail row
      GenerateCalendar = GenerateCalendar & "<tr><td colspan=7 align=center id=theDate>&nbsp;</td></tr>"

      ' **** Close the calendar table
      GenerateCalendar = GenerateCalendar & "</TABLE>"

End Function

</SCRIPT>
</body>
</html>



------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------


Michael Grassman
{personal website url removed - ee_ai_construct, cs moderator}
Avatar of justinbillig
justinbillig
by calender i assume you mean date picker, so heres one i wrote myself



<!--
      // --------------------------------------------------------------------------------
      //        Name:      DatePicker.html
      //  Author:      Justin Billig
      // Version: 1.0   5/18/2004
      //   Notes: Version 1.0 is the basic date picker.
      //
      //                  Version 1.0 has only been tested on
      //                                OS:      Windows 2000, Windows XP
      //                        Browsers:      Any Internet Explorer > 4.0
      //                  
      //                  The Function below that is commented out is the function.
      //                  you need to put on the button onclick event for the page
      //                  that needs the date returned to. Script language is javascript.
      //
      //                  Please leave author as Justin Billig.
      //                  I know there's no way to enforce this,  it but stealing code is crappy.
      // --------------------------------------------------------------------------------
      
      
                  
      // ------------------------------------------------------------------------
      // Name: DatePicker(objTargetTextBox
      // Abstract: Open the calender window. Return the date.
      //
      // NOTE: THIS FUNCTION MUST BE IN THE PAGE THAT OPENS THE CALENDER
      //        JUST PASTE THIS FUCNTION IN THAT PAGE AND CALL IT WHEREVER YOU
      //        NEED. objTargetTextBox IS THE TEXT BOX YOU WANT THE DATE TO GO
      //        BACK TO.
      //
      // ------------------------------------------------------------------------
      function DatePicker(objTargetTextBox )
      {
            // Variable Decleration
            var strDate = new String( );
            var intOffSetLeft = 0;
            var intOffSetTop = 0;
            
            // Find the x and y of the text box
            intOffSetLeft = objTargetTextBox.offsetLeft + window.screenLeft;
            intOffSetTop = objTargetTextBox.offsetTop + window.screenTop;
            
            // Add the height of the text box to make it go down (it's inverse)
            intOffSetTop = intOffSetTop + 25;
            
            // Yes, Open it below the target
            strDate = showModalDialog("DatePicker.html","","dialogWidth=315pt;dialogHeight=225pt;dialogLeft=" + intOffSetLeft + ";dialogTop=" + intOffSetTop);
                              
            // Did the user choose a value?
            if (strDate != "")
            {
                  // Yes, set the value
                  objTargetTextBox.value= strDate;
                  
                  // If the user chooses a valid date, take the focus off all controls
                  // so they dont accidentally re-open date picker or delete the chosen date
                  objTargetTextBox.focus( );
                  objTargetTextBox.blur( );
                  

            }

-->
<html>
      <head>
            <title>Date Picker</title>
            <script language="JavaScript">
      <!--
            // --------------------------------------------------------------------
            // Name: Today( )
            // Abstract: Store current day information.
            // --------------------------------------------------------------------
            function Today( )
            {
            // Generate today's date.
            this.m_dtmNow = new Date( );
           
            // Parse the date into each different part
            this.m_intYear = this.m_dtmNow.getFullYear( );
            this.m_intMonth = this.m_dtmNow.getMonth( );  
            this.m_intDay = this.m_dtmNow.getDate( );
         }
         
         
            // --------------------------------------------------------------------
            // Name: GetTotalDaysInMonth( )
            // Abstract: Return the Total Days in the month.
            // --------------------------------------------------------------------
            function GetTotalDaysInMonth( intMonth, strYear )
            {
                  // Variable Decleration
                  var aintNumberOfDaysInMonth = new Array(31, 0, 31, 30, 31, 30, 31, 31,
            30, 31, 30, 31);
            var intYear = 0;
           
            // Get the year
            intYear = parseInt( strYear );
           
                       
            // Is the month Feburary?
            if( intMonth == 1 )
            {
                        // Yes, Check for leap year
                        if( ((( intYear % 4 ) == 0) && (( intYear % 100 ) != 0 )) || ( intYear % 400 ) == 0 )
                        {
                              // Yes, Set Febuary to 29 Days
                              aintNumberOfDaysInMonth[ 1 ] = 29
                        }
                        else
                        {
                              // No, Set Febuary to 28 Days
                              aintNumberOfDaysInMonth[ 1 ] = 28
                        }
                  }
                  
                  return aintNumberOfDaysInMonth[ intMonth ];
            }
                  
                        
         
         
        // --------------------------------------------------------------------
            // Name: PopulateMonthsWithCurrentMonthSelected( )
            // Abstract: Populate the month information.
            //                   Select current month.
            // --------------------------------------------------------------------
            function PopulateMonthsWithCurrentMonthSelected( intNumberOfTabs )
            {
                  // Variable Decleration
                  var astrMonths = new Array("January", "February", "March",
            "April", "May", "June", "July", "August", "September",
            "October", "November", "December");  
            var intIndex = 0;
                  var clsToday = new Today( );
                  var intMonth = 0;
                  var strTabs = new String( );
                                    
                  // Get the current month
                  intMonth = clsToday.m_intMonth;
                  
                  // Initilize the number of tabs
                  for( intIndex = 0; intIndex <= intNumberOfTabs; intIndex++)
                  {
                        strTabs = strTabs + "\t";
                  }
                  
                  // Iterate through each month and
            for( intIndex = 0; intIndex < astrMonths.length; intIndex++)
            {
                        // Is this the current month?
                        if( intIndex == intMonth )
                        {
                              // Yes, this one is selected
                              document.write( strTabs + "<option value=\"" + astrMonths[ intIndex ] + "\" selected>" + astrMonths[ intIndex ] + "</option>\n" );
                        }
                        else
                        {
                              // No, just write this month
                              document.write( strTabs + "<option value=\"" + astrMonths[ intIndex ] + "\">" + astrMonths[ intIndex ] + "</option>\n" );
                        }
                  }
            }
            
            
            // --------------------------------------------------------------------
            // Name: PopulateYearsWithCurrentYearSelected( )
            // Abstract: Populate the year information.
            //                   Select current year.
            // --------------------------------------------------------------------
            function PopulateYearsWithCurrentYearSelected( intNumberOfTabs, intNumberOfYearsBack, intNumberOfYearsForward )
            {
                  // Variable Decleration
                  var intIndex = 0;
                  var strTabs = new String( );
                  var clsToday = new Today( );
                  var intYear = 0;
                  
                  // Get the current year
                  intYear = clsToday.m_intYear;
                  
                  // Initilize the number of tabs
                  for( intIndex = 0; intIndex <= intNumberOfTabs; intIndex++)
                  {
                        strTabs = strTabs + "\t";
                  }
                  
                        
                  // Write the years, Start at current year minus number of years back, Go to current year + number of years forward
                  for( intIndex = (intYear - intNumberOfYearsBack); intIndex <= (intYear + intNumberOfYearsForward); intIndex++)
                  {
                        // Is this the current year?
                        if( intIndex == intYear )
                        {
                              // Yes, select this one
                              document.write( strTabs + "<option value=\"" + intIndex + "\" selected>" + intIndex + "</option>\n" );
                        }
                        else
                        {
                              // No, just write it
                              document.write( strTabs + "<option value=\"" + intIndex + "\">" + intIndex + "</option>\n" );
                        }
                  }
            }
                              
            
            
            // --------------------------------------------------------------------
            // Name: OutputDaysOfTheWeek( )
            // Abstract: Write the current days of the week
            // --------------------------------------------------------------------      
            function OutputDaysOfTheWeek( intNumberOfTabs )
            {
                  // Variable Decleration
                  var astrDaysOfWeek = new Array("Sunday", "Monday", "Tuesday",
            "Wednesday", "Thursday", "Friday", "Saturday");
            var intIndex = 0;
            var strTabs = new String( )
           
            // Intialize the tabs.
            for( intIndex = 0; intIndex <= intNumberOfTabs; intIndex++ )
            {
                        strTabs = strTabs + "\t";
                  }
                  
                  // Write the days of the week
                  for( intIndex = 0; intIndex < astrDaysOfWeek.length; intIndex++)
                  {
                        document.write( strTabs + "<td align=\"center\">\n" )
                        document.write( strTabs + "\t" + astrDaysOfWeek[ intIndex ] + "\n" );
                        document.write( strTabs + "</td>\n");
                  }
            }
                        

            // --------------------------------------------------------------------
            // Name: CreateDaysInMonthShell( )
            // Abstract: Create the body shell for the table
            // --------------------------------------------------------------------
            function CreateDaysInMonthShell( intNumberOfTabs )
            {
                  // Variable Decleration
                  var strTabs = new String( );
                  var intRow = 0;
                  var intColumn = 0;
                  var intIndex = 1;
                  
                  // Initialize tabs
                  for( intIndex = 0; intIndex <= intNumberOfTabs; intIndex++ )
                  {
                        strTabs = strTabs + "\t";
                  }
                  
                  // Reset index to zero so we can use it in our cell index
                  intIndex = 0;
                  
                  // This loop write's the rows
                  for( intRow = 0; intRow <= 5; intRow++ )
                  {
                        document.write( strTabs + "<tr>\n" );
                         
                        // This loop writes the columns
                        for( intColumn = 0; intColumn <= 6; intColumn++ )
                        {
                              // Write the cell
                              document.write ( strTabs + "\t<td id=\"tblBodyCells" + intIndex + "\" style=\"background-color:white\">\n" );
                              document.write ( strTabs + "\t\t" + intIndex + "\n" );                              
                              document.write ( strTabs + "\t</td>\n" );
                              intIndex++;
                        }
                        
                        document.write( strTabs + "</tr>\n" );
                  }
            }

            
            // --------------------------------------------------------------------
            // Name: GetDateUserChooses( )
            // Abstract: Get the date the user selected
            // --------------------------------------------------------------------
            function GetDateUserChooses( )
            {
                  // Variable Decleration
                  var intYear = 0;
                  var intMonth = 0;
                  var intDay = 0;
                  
                                                      
                  // Did the user select a cell that has a value?
                  if( event.srcElement.innerText != "" )
                  {
                        // Yes, get the values
                        intYear = parseInt( document.frmMain.cmbYears[ document.frmMain.cmbYears.selectedIndex ].value );
                        intMonth = document.frmMain.cmbMonths.selectedIndex + 1;
                        intDay = event.srcElement.innerText;
                        
                        // Set the selected value and close the window
                        document.frmMain.strDateSelected.value = intMonth + "/" + intDay + "/" + intYear;
                        window.close( );
                  }
            }
            
            // --------------------------------------------------------------------
            // Name: HighliteDateChosen( )
            // Abstract: Change the background color of the chosen date
            // --------------------------------------------------------------------
            function HighliteDateChosen( )
            {
                  // Variable Delceration
                  var intYear = 0;
                  var intMonth = 0;
                  var intDay = 0;
                  
                  // Toggle color on and off
                  if( event.srcElement.style.backgroundColor == "white" && event.srcElement.innerText != "" )
                  {
                        // Unhighlite previous selection
                        DeHightliteAll( );
                  
                        // This is the seleted Date. Change the color
                        event.srcElement.style.backgroundColor = "#dddddd";
            
                        // Set this as the selected value
                        intYear = parseInt( document.frmMain.cmbYears[ document.frmMain.cmbYears.selectedIndex ].value );
                        intMonth = document.frmMain.cmbMonths.selectedIndex + 1;
                        intDay = event.srcElement.innerText;
                        
                        // Set the selected value and close the window
                        document.frmMain.strDateSelected.value = intMonth + "/" + intDay + "/" + intYear
                  }
                  else
                  {
                        event.srcElement.style.backgroundColor = "white";
                  }
                  
            }
                  

            
            // --------------------------------------------------------------------
            // Name: GetDayOfWeekMonthStartsOn( )
            // Abstract: Return the first day of a month for a selected year
            // --------------------------------------------------------------------
            function GetDayOfWeekMonthStartsOn( intSelectedYear, intSelectedMonth )
            {
                  // Variable Decleration
                  var intFirstDay = 0;
                  
                  // Get the first day of this year
                  intFirstDay = new Date( intSelectedYear, intSelectedMonth, 1).getDay( );
                  
                  return intFirstDay;
            }
            
            
            // --------------------------------------------------------------------
            // Name: Cancel( )
            // Abstract: Close window and return no value
            // --------------------------------------------------------------------
            function Cancel( )
            {
                  // Set the form value to nothing
                  document.frmMain.strDateSelected.value = "";
                  
                  window.close( );
            }
            
            
            // --------------------------------------------------------------------
            // Name: UpdateDaysInMonthKeepSelectedDateHighlited( )
            // Abstract: Change the days in the month
            // --------------------------------------------------------------------
            function UpdateDaysInMonthKeepSelectedDateHighlited( )
            {
            
                  // Variable Decleration
                  var intIndex = 0;
                  var intDayOfWeekMonthStartsOn = 0;
                  var intDay = 1;
                  var intArrayIndex = 0;
                  var intSelectedDay = 0;
                  var aobjTableBodyCells = new Array( );
                  
                        
                  // Initialize the array that holds the table body cells
                  // start at 6, why i dont know but it says the first six are null
                  // and it starts at the first cell so i dont now
                  for( intIndex = 0; intIndex < 42; intIndex++)
                  {
                        // Set each position of the array to the cell.
                        aobjTableBodyCells[ intArrayIndex ] = document.getElementById("tblBodyCells" + intIndex);
                        
                        // Check to see if this day is selected?
                        if( aobjTableBodyCells[ intArrayIndex ].style.backgroundColor == "#dddddd" )
                        {
                              // Yes, set this as the selected day
                              intSelectedDay = aobjTableBodyCells[ intArrayIndex ].innerText;
                        }
                        intArrayIndex++;
                  }
                  
                  
                  // Get the day of hte week the month starts on
                  intDayOfWeekMonthStartsOn = GetDayOfWeekMonthStartsOn( parseInt(document.frmMain.cmbYears[ document.frmMain.cmbYears.selectedIndex ].value), document.frmMain.cmbMonths.selectedIndex );
                  intMaximumDaysInMonth = GetTotalDaysInMonth( document.frmMain.cmbMonths.selectedIndex, parseInt( document.frmMain.cmbYears[ document.frmMain.cmbYears.selectedIndex ].value) );
            
                  
                  
                  // Loop through and set the value of each cell
                  for( intIndex = 0; intIndex < 42; intIndex++ )
                  {
                        // Since were zero based go to one less than the max
                        
                        // Have we reached the first day of the month yet?
                        if( (intIndex >= intDayOfWeekMonthStartsOn) && (intDay <= intMaximumDaysInMonth)  )
                        {
                              // Yes, set this day
                              aobjTableBodyCells[ intIndex ].innerText = intDay;
                              intDay++;
                        }
                        else
                        {
                              // No, set this to blank
                              aobjTableBodyCells[ intIndex ].innerText = "";
                        }
                  }
                  
                  // Hightlite The previously selected day
                  HightlitePreviousDay( aobjTableBodyCells, intSelectedDay );
                  
            }
            
            
            
            // --------------------------------------------------------------------
            // Name: HightlitePreviousDay( )
            // Abstract: Hightlite the Previously Selected Day
            //                   Default to today if its the first day
            // --------------------------------------------------------------------
            function HightlitePreviousDay( aobjTableBodyCells, intSelectedDay )
            {
                  // Variable Decleration
                  var intIndex = 0;
                  var clsToday = new Today( );
                  
                  // Make all cells white
                  DeHightliteAll( );
                  
                  // blur the documnent so nothing has focus
                  document.frmMain.cmbMonths.blur( );
                  
                  // Did we have a day selected?
                  if( intSelectedDay == 0 )
                  {
                        // No, then it must have been the first time being loaded
                        // Default to today
                        intSelectedDay = clsToday.m_intDay;
                  }
                  
                  // Iterate through the days to hightlite today
                  for( intIndex = 0; intIndex < aobjTableBodyCells.length; intIndex++ )
                  {
                        // Is this the preselected day?
                        if( aobjTableBodyCells[ intIndex ].innerText == intSelectedDay )
                        {
                              // Yes, select it and set the value
                              aobjTableBodyCells[ intIndex ].style.backgroundColor = "#dddddd";
                              
                              document.frmMain.strDateSelected.value = clsToday.m_intMonth + "/" + clsToday.m_intDay + "/" + clsToday.m_intYear;
                              break;
                        }
                  }
            }
            
            
            // --------------------------------------------------------------------
            // Name: DeHighliteAll( )
            // Abstract: Indisciminately unhighlites everything
            // --------------------------------------------------------------------
            function DeHightliteAll( )
            {
                  // Variable Decleration
                  var aobjTableBodyCells = new Array( );
                  var intIndex = 0;
                  
                  // Loop through each cell
                  for( intIndex = 0; intIndex < 42; intIndex++ )
                  {
                        // Is this the cell we need?
                        if( document.getElementById("tblBodyCells" + intIndex).style.backgroundColor == "#dddddd" )
                        {
                              // Yes
                              document.getElementById("tblBodyCells" + intIndex).style.backgroundColor = "white";
                              break;
                        }
                  }
            }
            
            
            
      -->
            </script>
      </head>
      <!-- Start Page Body Here
      onload="UpdateCalenderDays( )" OnUnload="window.returnValue = document.all.ret.value;"
      -->
      <body onload="UpdateDaysInMonthKeepSelectedDateHighlited( )" onUnload="window.returnValue = document.frmMain.strDateSelected.value">
            <!-- This form holds all the contorls -->
            <form name="frmMain">
                  <!-- This is the main calender table. -->
                  <table border="0" id="TCalender" cellspacing="2" align="center" valign="center">
                        <tr> <!--
                              <td colspan="1" align="left">
                                    <input type="button" name="btnBack" value="&nbsp;<&nbsp;" onclick="MoveCalenderOneMonth( this )">
                              </td>-->
                              <td colspan="4" align="center">
                                    <!-- This is the combo box that will hold the months -->
                                    <select name="cmbMonths" size="1" onchange="UpdateDaysInMonthKeepSelectedDateHighlited( )">
                                          <script language="JavaScript">
                                          <!--
                                                // Populate the months and highlite the current month
                                                PopulateMonthsWithCurrentMonthSelected( 8 );
                                          -->
                                          </script>
                                    </select>
                              </td>
                              <td colspan="3" align="left">
                                    <!-- This combo box will hold the years -->
                                    <select name="cmbYears" size="1" onchange="UpdateDaysInMonthKeepSelectedDateHighlited( )">
                                          <script language="JavaScript">
                                          <!--
                                                // Populate the years and highlite the current year
                                                PopulateYearsWithCurrentYearSelected( 8, 2, 4 );
                                          -->
                                          </script>
                                    </select>
                              </td> <!--
                              
                              <td colspan="1" align="right">
                                    <input type="button" name="btnForward" value="&nbsp;>&nbsp;" size="10" onclick="MoveCalenderOneMonth( this )">
                              </td>-->
                        <tr class="DaysOfWeek">
                              <!-- Column heading for each day in the week -->
                              <SCRIPT LANGUAGE="JavaScript">
                              <!--
                                    // Output the days of the week
                                    OutputDaysOfTheWeek( 5 );
                              -->
                              </SCRIPT>
                        </tr>
                        <!-- Begin Table Body -->
                        <tbody id="tblBody" align="center" onclick="HighliteDateChosen( )" ondblclick="GetDateUserChooses( )">
                              <!-- Ouput the days in this month -->
                              <script language="JavaScript">
                        <!--
                              // Output each row with current days in this week
                              CreateDaysInMonthShell( 5 );
                        -->          
                              </script>
                        </tbody> <!-- End Table Body -->
                        <!-- Begin Table Footer -->
                        <tfoot id="tblFoot">
                              <tr>
                                    <td colspan="4" align="center">
                                          <input type="button" style="width:50" name="btnOk" value="OK" OnClick="window.close( )">
                                    </td>
                                    <td align="left" colspan="3">
                                          <input style="width:50" type="button" name="btnCancel" value="Cancel" OnClick="Cancel();">
                                    </td>
                              </tr>
                        </tfoot> <!-- End Table Footer -->
                  </table> <!-- End Table -->
                  <input type="hidden" name="strDateSelected" value="">
            </form> <!-- End Form -->
      </body>
</html>
Avatar of KNVB HK
KNVB HK
Flag of Hong Kong image
You may reference my web site:
http://cstsang.no-ip.com:53/css&dhtml/f4.htm
Avatar of Meps
Meps
Flag of United States of America image

ASKER

Thank you everyone for your suggestions, but what I need is to figure out what is wrong with my current code.  The look and feel of this particular date picker has been requested, but it needs to be modified a little to also include the previous month.  

So far I have gotten it to display the previous month, but the only problem is that it starts out with this that month, and not the current month.  I need it to back into July, but still show August as the starting current month.

cstsang your link didn't work.

Here is the code I am using:
/* PopUp Calendar v2.1
© PCI, Inc.,2000 • Freeware
webmaster@personal-connections.com
+1 (925) 955 1624
Permission granted  for unlimited use so far
as the copyright notice above remains intact. */

/* Settings. Please read readme.html file for instructions*/
var ppcDF = "m/d/Y";
var ppcMN = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
var ppcWN = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var ppcER = new Array(4);
ppcER[0] = "Required DHTML functions are not supported in this browser.";
ppcER[1] = "Target form field is not assigned or not accessible.";
ppcER[2] = "Sorry, the chosen date is not acceptable. Please read instructions on the page.";
ppcER[3] = "Unknown error occured while executing this script.";
var ppcUC = false;
 var ppcUX = 4;
 var ppcUY = 4;

/* Do not edit below this line unless you are sure what are you doing! */

var ppcIE=(navigator.appName == "Microsoft Internet Explorer");
var ppcNN=((navigator.appName == "Netscape")&&(document.layers));
var ppcTT="<table width=\"200\" cellspacing=\"1\" cellpadding=\"2\" border=\"1\" bordercolorlight=\"#000000\" bordercolordark=\"#000000\">\n";
var ppcCD=ppcTT;var ppcFT="<font face=\"MS Sans Serif, sans-serif\" size=\"1\" color=\"#000000\">";var ppcFC=true;
var ppcTI=false;var ppcSV=null;var ppcRL=null;var ppcXC=null;var ppcYC=null;
var ppcML=new Array(31,28,31,30,31,30,31,31,30,31,30,31);
var ppcWE=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var ppcNow=new Date();var ppcPtr=new Date();
if (ppcNN) {
 window.captureEvents(Event.RESIZE);
 window.onresize = restoreLayers;
 document.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
 document.onmousedown = recordXY;
 document.onmouseup = confirmXY;}
 
function restoreLayers(e) {
 if (ppcNN) {
  with (window.document) {
   open("text/html");
   write("<html><head><title>Restoring the layer structure...</title></head>");
   write("<body bgcolor=\"#FFFFFF\" onLoad=\"history.go(-1)\">");
   write("</body></html>");
   close();}}}
   
function recordXY(e) {
 if (ppcNN) {
  ppcXC = e.x;
  ppcYC = e.y;
  document.routeEvent(e);}}
 
function confirmXY(e) {
 if (ppcNN) {
  ppcXC = (ppcXC == e.x) ? e.x : null;
  ppcYC = (ppcYC == e.y) ? e.y : null;
  document.routeEvent(e);}}
 
function getCalendarFor(target,rules) {
 ppcSV = target;
 ppcRL = rules;
 if (ppcFC) {setCalendar();ppcFC = false;}
 if ((ppcSV != null)&&(ppcSV)) {
  if (ppcIE) {
   var obj = document.all['PopUpCalendar'];
   obj.style.left = document.body.scrollLeft+event.clientX;
   obj.style.top  = document.body.scrollTop+event.clientY;
   obj.style.visibility = "visible";}
  else if (ppcNN) {
   var obj = document.layers['PopUpCalendar'];
   obj.left = ppcXC
   obj.top  = ppcYC
   obj.visibility = "show";}
  else {showError(ppcER[0]);}}
 else {showError(ppcER[1]);}}
 
function switchMonth(param) {
 var tmp = param.split("|");
 setCalendar(tmp[0],tmp[1]);}
 
function moveMonth(dir) {
 var obj = null;
 var limit = false;
 var tmp,dptrYear,dptrMonth;
 if (ppcIE) {obj = document.ppcMonthList.sItem;}
 else if (ppcNN) {obj = document.layers['PopUpCalendar'].document.layers['monthSelector'].document.ppcMonthList.sItem;}
 else {showError(ppcER[0]);}
 if (obj != null) {
  if ((dir.toLowerCase() == "back")&&(obj.selectedIndex > 0)) {obj.selectedIndex--;}
  else if ((dir.toLowerCase() == "forward")&&(obj.selectedIndex < 12)) {obj.selectedIndex++;}
  else {limit = true;}}
 if (!limit) {
  tmp = obj.options[obj.selectedIndex].value.split("|");
  dptrYear  = tmp[0];
  dptrMonth = tmp[1];
  setCalendar(dptrYear,dptrMonth);}
 else {
  if (ppcIE) {
   obj.style.backgroundColor = "#FF0000";
   window.setTimeout("document.ppcMonthList.sItem.style.backgroundColor = '#FFFFFF'",50);}}}
   
function selectDate(param) {
 var arr   = param.split("|");
 var year  = arr[0];
 var month = arr[1];
 var date  = arr[2];
 var ptr = parseInt(date);
 ppcPtr.setDate(ptr);
 if ((ppcSV != null)&&(ppcSV)) {
  if (validDate(date)) {ppcSV.value = dateFormat(year,month,date);hideCalendar();}
  else {showError(ppcER[2]);if (ppcTI) {clearTimeout(ppcTI);ppcTI = false;}}}
 else {
  showError(ppcER[1]);
  hideCalendar();}}
 
//-----------------------------------------
//I changed this portion of the code
//----------------------------------------

function setCalendar(year,month) {
 if (year  == null) {year = getFullYear(ppcNow);}
 if (month == null) {month = ppcNow.getMonth();month = month -1;setSelectList(year,month);}
 if (month == 1) {ppcML[1]  = (isLeap(year)) ? 29 : 28;}
 ppcPtr.setYear(year);
 ppcPtr.setMonth(month);
 ppcPtr.setDate(1);
 updateContent();}
 
function updateContent() {
 generateContent();
 if (ppcIE) {document.all['monthDays'].innerHTML = ppcCD;}
 else if (ppcNN) {
  with (document.layers['PopUpCalendar'].document.layers['monthDays'].document) {
   open("text/html");
   write("<html>\n<head>\n<title>DynDoc</title>\n</head>\n<body bgcolor=\"#FFFFFF\">\n");
   write(ppcCD);
   write("</body>\n</html>");
   close();}}
 else {showError(ppcER[0]);}
 ppcCD = ppcTT;}
 
function generateContent() {
 var year  = getFullYear(ppcPtr);
 var month = ppcPtr.getMonth();
 var date  = 1;
 var day   = ppcPtr.getDay();
 var len   = ppcML[month];
 var bgr,cnt,tmp = "";
 var j,i = 0;
 for (j = 0; j < 7; ++j) {
  if (date > len) {break;}
  for (i = 0; i < 7; ++i) {
   bgr = ((i == 0)||(i == 6)) ? "#FFFFCC" : "#FFFFFF";
   if (((j == 0)&&(i < day))||(date > len)) {tmp  += makeCell(bgr,year,month,0);}
   else {tmp  += makeCell(bgr,year,month,date);++date;}}
  ppcCD += "<tr align=\"center\">\n" + tmp + "</tr>\n";tmp = "";}
 ppcCD += "</table>\n";}
 
function makeCell(bgr,year,month,date) {
 var param = "\'"+year+"|"+month+"|"+date+"\'";
 var td1 = "<td width=\"20\" bgcolor=\""+bgr+"\" ";
 var td2 = (ppcIE) ? "</font></span></td>\n" : "</font></a></td>\n";
 var evt = "onMouseOver=\"this.style.backgroundColor=\'#FF0000\'\" onMouseOut=\"this.style.backgroundColor=\'"+bgr+"\'\" onMouseUp=\"selectDate("+param+")\" ";
 var ext = "<span Style=\"cursor: hand\">";
 var lck = "<span Style=\"cursor: default\">";
 var lnk = "<a href=\"javascript:selectDate("+param+")\" onMouseOver=\"window.status=\' \';return true;\">";
 var cellValue = (date != 0) ? date+"" : "&nbsp;";
 if ((ppcNow.getDate() == date)&&(ppcNow.getMonth() == month)&&(getFullYear(ppcNow) == year)) {
  cellValue = "<b>"+cellValue+"</b>";}
 var cellCode = "";
 if (date == 0) {
  if (ppcIE) {cellCode = td1+"Style=\"cursor: default\">"+lck+ppcFT+cellValue+td2;}
  else {cellCode = td1+">"+ppcFT+cellValue+td2;}}
 else {
  if (ppcIE) {cellCode = td1+evt+"Style=\"cursor: hand\">"+ext+ppcFT+cellValue+td2;}
  else {
   if (date < 10) {cellValue = "&nbsp;" + cellValue + "&nbsp;";}
   cellCode = td1+">"+lnk+ppcFT+cellValue+td2;}}
 return cellCode;}
 
function setSelectList(year,month) {
 var i = 0;
 var obj = null;
 if (ppcIE) {obj = document.ppcMonthList.sItem;}
 else if (ppcNN) {obj = document.layers['PopUpCalendar'].document.layers['monthSelector'].document.ppcMonthList.sItem;}
 else {/* NOP */}
 while (i < 13) {
  obj.options[i].value = year + "|" + month;
  obj.options[i].text  = year + " • " + ppcMN[month];
  i++;
  month++;
  if (month == 12) {year++;month = 0;}}}
 
function hideCalendar() {
 if (ppcIE) {document.all['PopUpCalendar'].style.visibility = "hidden";}
 else if (ppcNN) {document.layers['PopUpCalendar'].visibility = "hide";window.status = " ";}
 else {/* NOP */}
 ppcTI = false;
 setCalendar();
 ppcSV = null;
 if (ppcIE) {var obj = document.ppcMonthList.sItem;}
 else if (ppcNN) {var obj = document.layers['PopUpCalendar'].document.layers['monthSelector'].document.ppcMonthList.sItem;}
 else {/* NOP */}
 obj.selectedIndex = 0;}
 
function showError(message) {
 window.alert("[ PopUp Calendar ]\n\n" + message);}
 
function isLeap(year) {
 if ((year%400==0)||((year%4==0)&&(year%100!=0))) {return true;}
 else {return false;}}
 
function getFullYear(obj) {
 if (ppcNN) {return obj.getYear() + 1900;}
 else {return obj.getYear();}}
 
function validDate(date) {
 var reply = true;
 if (ppcRL == null) {/* NOP */}
 else {
  var arr = ppcRL.split(":");
  var mode = arr[0];
  var arg  = arr[1];
  var key  = arr[2].charAt(0).toLowerCase();
  if (key != "d") {
   var day = ppcPtr.getDay();
   var orn = isEvenOrOdd(date);
   reply = (mode == "[^]") ? !((day == arg)&&((orn == key)||(key == "a"))) : ((day == arg)&&((orn == key)||(key == "a")));}
  else {reply = (mode == "[^]") ? (date != arg) : (date == arg);}}
 return reply;}
 
function isEvenOrOdd(date) {
 if (date - 21 > 0) {return "e";}
 else if (date - 14 > 0) {return "o";}
 else if (date - 7 > 0) {return "e";}
 else {return "o";}}
 
function dateFormat(year,month,date) {
 if (ppcDF == null) {ppcDF = "m/d/Y";}
 var day = ppcPtr.getDay();
 var crt = "";
 var str = "";
 var chars = ppcDF.length;
 for (var i = 0; i < chars; ++i) {
  crt = ppcDF.charAt(i);
  switch (crt) {
   case "M": str += ppcMN[month]; break;
   case "m": str += (month<9) ? ("0"+(++month)) : ++month; break;
   case "Y": str += year; break;
   case "y": str += year.substring(2); break;
   case "d": str += ((ppcDF.indexOf("m")!=-1)&&(date<10)) ? ("0"+date) : date; break;
   case "W": str += ppcWN[day]; break;
    default: str += crt;}}
 return unescape(str);}
Avatar of Meps
Meps
Flag of United States of America image

ASKER

I found the answer to my question, again thank you everyone for helping.  What I did in the select list was start the month list back one month, then set it forward one month.

/* PopUp Calendar v2.1
© PCI, Inc.,2000 • Freeware
webmaster@personal-connections.com
+1 (925) 955 1624
Permission granted  for unlimited use so far
as the copyright notice above remains intact. */

/* Settings. Please read readme.html file for instructions*/
var ppcDF = "m/d/Y";
var ppcMN = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
var ppcWN = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var ppcER = new Array(4);
ppcER[0] = "Required DHTML functions are not supported in this browser.";
ppcER[1] = "Target form field is not assigned or not accessible.";
ppcER[2] = "Sorry, the chosen date is not acceptable. Please read instructions on the page.";
ppcER[3] = "Unknown error occured while executing this script.";
var ppcUC = false;
 var ppcUX = 4;
 var ppcUY = 4;

/* Do not edit below this line unless you are sure what are you doing! */

var ppcIE=(navigator.appName == "Microsoft Internet Explorer");
var ppcNN=((navigator.appName == "Netscape")&&(document.layers));
var ppcTT="<table width=\"200\" cellspacing=\"1\" cellpadding=\"2\" border=\"1\" bordercolorlight=\"#000000\" bordercolordark=\"#000000\">\n";
var ppcCD=ppcTT;var ppcFT="<font face=\"MS Sans Serif, sans-serif\" size=\"1\" color=\"#000000\">";var ppcFC=true;
var ppcTI=false;var ppcSV=null;var ppcRL=null;var ppcXC=null;var ppcYC=null;
var ppcML=new Array(31,28,31,30,31,30,31,31,30,31,30,31);
var ppcWE=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var ppcNow=new Date();var ppcPtr=new Date();
if (ppcNN) {
 window.captureEvents(Event.RESIZE);
 window.onresize = restoreLayers;
 document.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
 document.onmousedown = recordXY;
 document.onmouseup = confirmXY;}
 
function restoreLayers(e) {
 if (ppcNN) {
  with (window.document) {
   open("text/html");
   write("<html><head><title>Restoring the layer structure...</title></head>");
   write("<body bgcolor=\"#FFFFFF\" onLoad=\"history.go(-1)\">");
   write("</body></html>");
   close();}}}
   
function recordXY(e) {
 if (ppcNN) {
  ppcXC = e.x;
  ppcYC = e.y;
  document.routeEvent(e);}}
 
function confirmXY(e) {
 if (ppcNN) {
  ppcXC = (ppcXC == e.x) ? e.x : null;
  ppcYC = (ppcYC == e.y) ? e.y : null;
  document.routeEvent(e);}}
 
function getCalendarFor(target,rules) {
 ppcSV = target;
 ppcRL = rules;
 if (ppcFC) {setCalendar();ppcFC = false;}
 if ((ppcSV != null)&&(ppcSV)) {
  if (ppcIE) {
   var obj = document.all['PopUpCalendar'];
   obj.style.left = document.body.scrollLeft+event.clientX;
   obj.style.top  = document.body.scrollTop+event.clientY;
   obj.style.visibility = "visible";}
  else if (ppcNN) {
   var obj = document.layers['PopUpCalendar'];
   obj.left = ppcXC
   obj.top  = ppcYC
   obj.visibility = "show";}
  else {showError(ppcER[0]);}}
 else {showError(ppcER[1]);}}
 
function switchMonth(param) {
 var tmp = param.split("|");
 setCalendar(tmp[0],tmp[1]);}
 
function moveMonth(dir) {
 var obj = null;
 var limit = false;
 var tmp,dptrYear,dptrMonth;
 if (ppcIE) {obj = document.ppcMonthList.sItem;}
 else if (ppcNN) {obj = document.layers['PopUpCalendar'].document.layers['monthSelector'].document.ppcMonthList.sItem;}
 else {showError(ppcER[0]);}
 if (obj != null) {
  if ((dir.toLowerCase() == "back")&&(obj.selectedIndex > 0)) {obj.selectedIndex--;}
  else if ((dir.toLowerCase() == "forward")&&(obj.selectedIndex < 12)) {obj.selectedIndex++;}
  else {limit = true;}}
 if (!limit) {
  tmp = obj.options[obj.selectedIndex].value.split("|");
  dptrYear  = tmp[0];
  dptrMonth = tmp[1];
  setCalendar(dptrYear,dptrMonth);}
 else {
  if (ppcIE) {
   obj.style.backgroundColor = "#FF0000";
   window.setTimeout("document.ppcMonthList.sItem.style.backgroundColor = '#FFFFFF'",50);}}}
   
function selectDate(param) {
 var arr   = param.split("|");
 var year  = arr[0];
 var month = arr[1];
 var date  = arr[2];
 var ptr = parseInt(date);
 ppcPtr.setDate(ptr);
 if ((ppcSV != null)&&(ppcSV)) {
  if (validDate(date)) {ppcSV.value = dateFormat(year,month,date);hideCalendar();}
  else {showError(ppcER[2]);if (ppcTI) {clearTimeout(ppcTI);ppcTI = false;}}}
 else {
  showError(ppcER[1]);
  hideCalendar();}}
 
function setCalendar(year,month) {
 if (year  == null) {year = getFullYear(ppcNow);}
 if (month == null) {month = ppcNow.getMonth();month = month -1;setSelectList(year,month);}
 if (month == 1) {ppcML[1]  = (isLeap(year)) ? 29 : 28;}
 ppcPtr.setYear(year);
 ppcPtr.setMonth(month);
 ppcPtr.setDate(1);
 updateContent();}
 
function updateContent() {
 generateContent();
 if (ppcIE) {document.all['monthDays'].innerHTML = ppcCD;}
 else if (ppcNN) {
  with (document.layers['PopUpCalendar'].document.layers['monthDays'].document) {
   open("text/html");
   write("<html>\n<head>\n<title>DynDoc</title>\n</head>\n<body bgcolor=\"#FFFFFF\">\n");
   write(ppcCD);
   write("</body>\n</html>");
   close();}}
 else {showError(ppcER[0]);}
 ppcCD = ppcTT;}
 
function generateContent() {
 var year  = getFullYear(ppcPtr);
 var month = ppcPtr.getMonth();
 var date  = 1;
 var day   = ppcPtr.getDay();
 var len   = ppcML[month];
 var bgr,cnt,tmp = "";
 var j,i = 0;
 for (j = 0; j < 7; ++j) {
  if (date > len) {break;}
  for (i = 0; i < 7; ++i) {
   bgr = ((i == 0)||(i == 6)) ? "#FFFFCC" : "#FFFFFF";
   if (((j == 0)&&(i < day))||(date > len)) {tmp  += makeCell(bgr,year,month,0);}
   else {tmp  += makeCell(bgr,year,month,date);++date;}}
  ppcCD += "<tr align=\"center\">\n" + tmp + "</tr>\n";tmp = "";}
 ppcCD += "</table>\n";}
 
function makeCell(bgr,year,month,date) {
 var param = "\'"+year+"|"+month+"|"+date+"\'";
 var td1 = "<td width=\"20\" bgcolor=\""+bgr+"\" ";
 var td2 = (ppcIE) ? "</font></span></td>\n" : "</font></a></td>\n";
 var evt = "onMouseOver=\"this.style.backgroundColor=\'#FF0000\'\" onMouseOut=\"this.style.backgroundColor=\'"+bgr+"\'\" onMouseUp=\"selectDate("+param+")\" ";
 var ext = "<span Style=\"cursor: hand\">";
 var lck = "<span Style=\"cursor: default\">";
 var lnk = "<a href=\"javascript:selectDate("+param+")\" onMouseOver=\"window.status=\' \';return true;\">";
 var cellValue = (date != 0) ? date+"" : "&nbsp;";
 if ((ppcNow.getDate() == date)&&(ppcNow.getMonth() == month)&&(getFullYear(ppcNow) == year)) {
  cellValue = "<b>"+cellValue+"</b>";}
 var cellCode = "";
 if (date == 0) {
  if (ppcIE) {cellCode = td1+"Style=\"cursor: default\">"+lck+ppcFT+cellValue+td2;}
  else {cellCode = td1+">"+ppcFT+cellValue+td2;}}
 else {
  if (ppcIE) {cellCode = td1+evt+"Style=\"cursor: hand\">"+ext+ppcFT+cellValue+td2;}
  else {
   if (date < 10) {cellValue = "&nbsp;" + cellValue + "&nbsp;";}
   cellCode = td1+">"+lnk+ppcFT+cellValue+td2;}}
 return cellCode;}
 
function setSelectList(year,month) {
 var i = 0;
 var obj = null;
 if (ppcIE) {obj = document.ppcMonthList.sItem;}
 else if (ppcNN) {obj = document.layers['PopUpCalendar'].document.layers['monthSelector'].document.ppcMonthList.sItem;}
 else {/* NOP */}
 while (i < 13) {
  obj.options[i].value = year + "|" + month;
  obj.options[i].text  = year + " • " + ppcMN[month];
  i++;
  month++;
  if (month == 12) {year++;month = 0;}}
  {obj.selectedIndex++;}}
 
function hideCalendar() {
 if (ppcIE) {document.all['PopUpCalendar'].style.visibility = "hidden";}
 else if (ppcNN) {document.layers['PopUpCalendar'].visibility = "hide";window.status = " ";}
 else {/* NOP */}
 ppcTI = false;
 setCalendar();
 ppcSV = null;
 if (ppcIE) {var obj = document.ppcMonthList.sItem;}
 else if (ppcNN) {var obj = document.layers['PopUpCalendar'].document.layers['monthSelector'].document.ppcMonthList.sItem;}
 else {/* NOP */}
 obj.selectedIndex = 0;}
 
function showError(message) {
 window.alert("[ PopUp Calendar ]\n\n" + message);}
 
function isLeap(year) {
 if ((year%400==0)||((year%4==0)&&(year%100!=0))) {return true;}
 else {return false;}}
 
function getFullYear(obj) {
 if (ppcNN) {return obj.getYear() + 1900;}
 else {return obj.getYear();}}
 
function validDate(date) {
 var reply = true;
 if (ppcRL == null) {/* NOP */}
 else {
  var arr = ppcRL.split(":");
  var mode = arr[0];
  var arg  = arr[1];
  var key  = arr[2].charAt(0).toLowerCase();
  if (key != "d") {
   var day = ppcPtr.getDay();
   var orn = isEvenOrOdd(date);
   reply = (mode == "[^]") ? !((day == arg)&&((orn == key)||(key == "a"))) : ((day == arg)&&((orn == key)||(key == "a")));}
  else {reply = (mode == "[^]") ? (date != arg) : (date == arg);}}
 return reply;}
 
function isEvenOrOdd(date) {
 if (date - 21 > 0) {return "e";}
 else if (date - 14 > 0) {return "o";}
 else if (date - 7 > 0) {return "e";}
 else {return "o";}}
 
function dateFormat(year,month,date) {
 if (ppcDF == null) {ppcDF = "m/d/Y";}
 var day = ppcPtr.getDay();
 var crt = "";
 var str = "";
 var chars = ppcDF.length;
 for (var i = 0; i < chars; ++i) {
  crt = ppcDF.charAt(i);
  switch (crt) {
   case "M": str += ppcMN[month]; break;
   case "m": str += (month<9) ? ("0"+(++month)) : ++month; break;
   case "Y": str += year; break;
   case "y": str += year.substring(2); break;
   case "d": str += ((ppcDF.indexOf("m")!=-1)&&(date<10)) ? ("0"+date) : date; break;
   case "W": str += ppcWN[day]; break;
    default: str += crt;}}
 return unescape(str);}
ASKER CERTIFIED SOLUTION
Avatar of CetusMOD
CetusMOD
Flag of Netherlands image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial