One Hat Cyber Team

Edit File: date.html

<HTML>

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function gm(num) {
 var mydate = new Date();
 mydate.setDate(1);
 mydate.setMonth(num-1);
 var datestr = "" + mydate;
 return datestr.substring(4,7);
}

function gy(num) {
  var mydate = new Date();
  return (1900 + eval(mydate.getYear()) - 4 + num);
}

function ud(mon) {
  var i = mon.selectedIndex;

if(mon.options[i].value == "2") {
    document.myform.day.options[30] = null;
    document.myform.day.options[29] = null;
    var j = document.myform.year.selectedIndex;
    var year = eval(document.myform.year.options[j].value);
    if ( ((year%400)==0) || (((year%100)!=0) && ((year%4)==0)) ) {
      if (document.myform.day.options[28] == null) {
        document.myform.day.options[28] = new Option("29");
        document.myform.day.options[28].value = "29";
      }
    } else {
      document.myform.day.options[28] = null;
    }

}

if(mon.options[i].value == "1" ||
     mon.options[i].value == "3" ||
     mon.options[i].value == "5" ||
     mon.options[i].value == "7" ||
     mon.options[i].value == "8" ||
     mon.options[i].value == "10" ||
     mon.options[i].value == "12")
  {
    if (document.myform.day.options[28] == null) {
      document.myform.day.options[28] = new Option("29");
      document.myform.day.options[28].value = "29";
    }
    if (document.myform.day.options[29] == null) {
      document.myform.day.options[29] = new Option("30");
      document.myform.day.options[29].value = "30";
    }
    if (document.myform.day.options[30] == null) {
      document.myform.day.options[30] = new Option("31");
      document.myform.day.options[30].value = "31";
    }
  }

if(mon.options[i].value == "4" ||
     mon.options[i].value == "6" ||
     mon.options[i].value == "9" ||
     mon.options[i].value == "11")
  {
    if (document.myform.day.options[28] == null) {
      document.myform.day.options[28] = new Option("29");
      document.myform.day.options[28].value = "29";
    }
    if (document.myform.day.options[29] == null) {
      document.myform.day.options[29] = new Option("30");
      document.myform.day.options[29].value = "30";
    }
    document.myform.day.options[30] = null;
  }

if (document.myform.day.selectedIndex == -1)
    document.myform.day.selectedIndex = 0;

}

function showdate() {
  var i = document.myform.month.selectedIndex;
  var j = document.myform.day.selectedIndex;
  var k = document.myform.year.selectedIndex;
  alert(document.myform.month.options[i].value + "/" +
        document.myform.day.options[j].value + "/" +
        document.myform.year.options[k].value)
}

function putcal(month,year) {
  var version = navigator.appVersion;
  if (navigator.appVersion.indexOf("Mac") != -1) {
    calwin = open("","calwin","width=300,height=300,resizable=yes");
  } else {
    calwin = open("","calwin","width=230,height=280,resizable=yes");
  }

calccal(calwin,month,year);
}

function calccal(targetwin,month,year) {
  var monthname = new Array(12);
  monthname[0] = "January";
  monthname[1] = "February";
  monthname[2] = "March";
  monthname[3] = "April";
  monthname[4] = "May";
  monthname[5] = "June";
  monthname[6] = "July";
  monthname[7] = "August";
  monthname[8] = "September";
  monthname[9] = "October";
  monthname[10] = "November";
  monthname[11] = "December";

var endday = calclastday(eval(month),eval(year));

mystr = month + "/01/" + year;
  mydate = new Date(mystr);
  firstday = mydate.getDay();

var cnt = 0;

var day = new Array(6);
  for (var i=0; i<6; i++)
    day[i] = new Array(7);

for (var r=0; r<6; r++)
  {
    for (var c=0; c<7; c++)
    {
      if ((cnt==0) && (c!=firstday))
        continue;
      cnt++;
      day[r][c] = cnt;
      if (cnt==endday)
        break;
    }
    if (cnt==endday)
      break;
  }

targetwin.document.write("<TABLE><TR VALIGN=TOP><FORM>");

var prevyear = eval(year) - 1;
  targetwin.document.write("<TD><INPUT TYPE=BUTTON NAME=prevyearbutton VALUE='<<'"+
   " onclick='document.clear();opener.calccal(opener.calwin,"+month+","+prevyear+")'></TD>");

var prevmonth = calcprevmonth(month);
  var prevmonthyear = calcprevyear(month,year);
  targetwin.document.write("<TD><INPUT TYPE=BUTTON NAME=prevmonthbutton VALUE='&nbsp;<&nbsp;'"+
   " onclick='document.clear();opener.calccal(opener.calwin,"+prevmonth+","+prevmonthyear+")'></TD>");

targetwin.document.write("<TD COLSPAN=3 ALIGN=CENTER>");
  var index = eval(month) - 1;
  targetwin.document.write("<B>" + monthname[index] + " " + year + "</B></TD>");

var nextmonth = calcnextmonth(month);
  var nextmonthyear = calcnextyear(month,year);
  targetwin.document.write("<TD><INPUT TYPE=BUTTON NAME=nextmonthbutton VALUE='&nbsp;>&nbsp;'"+
   " onclick='document.clear();opener.calccal(opener.calwin,"+nextmonth+","+nextmonthyear+")'></TD>");

var nextyear = eval(year) + 1;
  targetwin.document.write("<TD><INPUT TYPE=BUTTON NAME=nextyearbutton VALUE='>>'"+
   " onclick='document.clear();opener.calccal(opener.calwin,"+month+","+nextyear+")'></TD>");

targetwin.document.write("</TR><TR>");
  targetwin.document.write("<TD>Su</TD>");
  targetwin.document.write("<TD>Mo</TD>");
  targetwin.document.write("<TD>Tu</TD>");
  targetwin.document.write("<TD>We</TD>");
  targetwin.document.write("<TD>Th</TD>");
  targetwin.document.write("<TD>Fr</TD>");
  targetwin.document.write("<TD>Sa</TD>");
  targetwin.document.write("</TR>");

targetwin.document.write("<TR><TD COLSPAN=7><HR NOSHADE></TD></TR>");

var selectedmonth = eval(month) - 1;
  var today = new Date();
  var thisyear = today.getYear() + 1900;
  var selectedyear = eval(year) - thisyear + 4;

var conditionalpadder = "";

for(r=0; r<6; r++)
  {
   targetwin.document.write("<TR>");
   for(c=0; c<7; c++)
   {
    targetwin.document.write("<TD>");
    if(day[r][c] != null) {
      if (day[r][c] < 10)
        conditionalpadder = "&nbsp;"
      else
        conditionalpadder = "";
      targetwin.document.write("<INPUT TYPE=BUTTON NAME="+day[r][c]+
        " VALUE=" + conditionalpadder + day[r][c] + conditionalpadder +
        " onClick='window.close();" +
        "opener.document.myform.month.selectedIndex="+selectedmonth+";" +
        "opener.document.myform.year.selectedIndex="+selectedyear+";"+
        "opener.ud(opener.document.myform.month);"+
	"opener.document.myform.day.selectedIndex=this.name-1;"+
	"';" + ">");
    }
    targetwin.document.write("</TD>");
   }
   targetwin.document.write("</TR>");
  }
  targetwin.document.write("</FORM></TABLE>");

}

function calclastday(month,year) {
  if ((month==2) && ((year%4)==0))
    return 29;

if ((month==2) && ((year%4)!=0))
    return 28;

if ((month==1) || (month == 3) || (month == 5) || (month == 7) ||
      (month==8) || (month == 10) || (month ==12))
    return 31;

return 30;
}

function calcnextmonth(month) {
  if (month=="12")
    return "1";
  else
    return (eval(month)+1);
}

function calcnextyear(month,year) {
  if (month=="12")
    return (eval(year)+1);
  else
    return (year);
}

function calcprevmonth(month) {
  if (month=="1")
    return "12";
  else
    return (eval(month)-1);
}

function calcprevyear(month,year) {
  if (month=="1")
    return (eval(year)-1);
  else
    return (year);
}
</SCRIPT>

<TITLE>Calendar Algorithm Test</TITLE>

</HEAD><BODY>
<H1>JavaScript Date Picker<HR></H1>

This utility could have many generic uses for any web application that requires the user to select a date in a user-friendly manner. Requires Netscape Navigator 3.0.

<SELECT NAME="month" onChange="ud(this)">
 <OPTION VALUE="1">January
 <OPTION VALUE="2">February
 <OPTION VALUE="3">March
 <OPTION VALUE="4">April
 <OPTION VALUE="5">May
 <OPTION VALUE="6">June
 <OPTION VALUE="7">July
 <OPTION VALUE="8">August
 <OPTION VALUE="9">September
 <OPTION VALUE="10">October
 <OPTION VALUE="11">November
 <OPTION VALUE="12">December
</SELECT>

</FORM>

Notice how when the month or year are changed, the number of days automatically update correctly to 28, 29, 30, or 31.<P>

Actually, the feature that took the most work is the least noticed one: the button with the question mark (?) brings up a monthly calendar that can be used to select a date in a very user-friendly manner.<P>

This utility has been tested to work on both Windows95 and Macintosh platforms.  Since this is javascript, you can simply view the source from within your browser to see the code. Thanks for visiting.<P>

<SCRIPT>
var mydate = new Date();
document.myform.month.selectedIndex = mydate.getMonth();
document.myform.day.selectedIndex = mydate.getDate()-1;
document.myform.year.selectedIndex = 4;
ud(document.myform.month);
</SCRIPT>

<HR>
Comments to <A HREF="mailto:esuez@mail.utexas.edu">E. Suez</A><BR>
<A HREF="http://uts.cc.utexas.edu/~esuez/">back to home page</A>

</BODY>

</HTML>