Select Year 2024 2025 2026 2027 2028 2029 2030 2031 2032 2033 2034

Select Month

Select Day

To create the menu above we need to start with some HTML:

              

<style>
.displayDate {
    float:left;
    position:relative;
    display:inline-block;
    width:auto;
}
</style>
<h5 style="margin-bottom:-2px;text-align:left;">Select Date</h5>
<form id="schedule" name="schedule">
    <div class="displayDate">
    <select id="ycount" name="ycount" onchange="setFocusArea()">
        <option value="0">Select Year</option>
        <%
        Dim intYear: intYear = Year(Date)
        For ycount = intYear to intYear+10
            Response.Write " <option value="""&ycount&""">" & ycount & "</option>" & vbcrlf
        Next
        %>
    </select>
    </div>
    <div class="displayDate">
    <span id="mFocus">
        <select name="mcount">
        <option>Select Month</option>
        </select>
    </span>
    </div>
    <div class="displayDate">
    <span id="dFocus">
        <select name="dcount">
        <option>Select Day</option>
        </select>
    </span>
    </div>
</form>
              
            

First some styling to position the select boxes side by side. We give the form an id attribute as well as each select box. 'schedule', 'ycount', 'mcount', and 'dcount' respectively. The month and day select boxes are wrapped in span tags with unigue ID's. The year box is populated using an ASP 'for' loop (That's another article) that displays a ten year span starting with the present year. It also has an onchange event that calls the setFocusArea function.

To explain all this we need some javascript:

              
var aFocusArea = new Array;
aFocusArea[1] = new focusarea(1,31);
aFocusArea[2] = new focusarea(2,29);
aFocusArea[3] = new focusarea(3,31);
aFocusArea[4] = new focusarea(4,30);
aFocusArea[5] = new focusarea(5,31);
aFocusArea[6] = new focusarea(6,30);
aFocusArea[7] = new focusarea(7,31);
aFocusArea[8] = new focusarea(8,31);
aFocusArea[9] = new focusarea(9,30);
aFocusArea[10] = new focusarea(10,31);
aFocusArea[11] = new focusarea(11,30);
aFocusArea[12] = new focusarea(12,31);

function focusarea(iMonthID,iNum) {
  this.Num = iNum;
  this.monthID = iMonthID;
}

function leapYear(lyear) {
  return ((lyear % 4 == 0) && (lyear % 100 != 0)) || (lyear % 400 == 0);
}
              
            

This is the core of the code; we create an array 'aFocusArea' and takes the function 'focusarea' with the number of the month and the number of days in the month. 'focusarea' has two properties 'this.Num' and 'this.monthID' their uses will be explained further down. The leapyear function determines if a given year is a leapyear. In all fairness the core code is not mine and did not account for leap year. I found it years ago and adopted it for the dropdown menu and to account for leapyear.

              
function setFocusArea() {

  var mSelect = '<select id="mcount" name="mcount" onchange="getFocusArea();">';
  mSelect = mSelect + '<option value="0">Select Month</option>';

  for (var x = 1; x <= 12; x++) {
    mSelect = mSelect + '<option value="' + x + '">' + x + '</option>';
  }

  mSelect = mSelect + '</select>';
  document.getElementById('mFocus').innerHTML = "";
  document.getElementById('mFocus').innerHTML = mSelect;

  var sSelect = '<select name="dcount">';
  sSelect = sSelect + '<option>Select Day</option>';
  sSelect = sSelect + '</select>';
  document.getElementById('dFocus').innerHTML = "";
  document.getElementById('dFocus').innerHTML = sSelect;

}
              
            

When a year is selected it calls the setFocusArea function which populates the month select box using a 'for loop' and gives it an onchange event that calls the getFocusArea function. The HTML from 'mSelect' poplates the contents in the span tag 'mFocus', it also resets the day select box in case it has been previously populated. The reason we don't start with the month box already populated is that if you select a year it populates the other boxes dependant on if it is a Leap Year or not. If you selected the wrong year and change it it needs to be repopulated with the correct year.

              

function getFocusArea() {

  var dyear = document.schedule.ycount.value;
  if (leapYear(dyear)) {
    aFocusArea[2] = new focusarea(2,29);
  } else {
    aFocusArea[2] = new focusarea(2,28);
  }

  var selectID = document.schedule.mcount.value;
  var sSelect = '<select id="dcount" name="dcount">';

  for (var i = 1; i < aFocusArea[selectID].Num+1; i++) {
    sSelect = sSelect + '<option>' + [i] + '</option>';
  }

  sSelect = sSelect + '</select>';
  document.getElementById('dFocus').innerHTML = "";
  document.getElementById('dFocus').innerHTML = sSelect;

}

              
            

Here is where the rest of the magic happens. When the getFocusArea is called by selecting a month, it passes the year selected to 'dyear' by getting the value using dot notation 'document.schedule.ycount.value'. where 'schedule' is the ID of the form and 'ycount' is the ID of the year select box. The value gets passed to the 'leapyear' function, if it returns true then the month of February gets set to 29 days otherwise it sets it to 28 days. The month is passed to 'selectID' again using dot notation where 'mcount' the month ID. the 'selectID' is used to determine which aFocusArea needs to be called. It also has the property 'Num', the number of days in the selected month, assigned to it from the focusarea function then uses a 'for loop' to populate the day select box which is passed to the span tag 'dFocus'.

I hope you understood it. It's the best I could explain it. I'm sure there are other coders out there that could do it better but it works and suits my needs and I hope yours too!