Select Menus and Date Object Validation

Select a month from the 1st menu and the correct number of days in that month will be displayed in the 2nd menu.

First an array containing the months of the year stored as strings is created, and a new Date object used to retrieve the integer representing the current month (0-11) and the current date. Both are used to dynamically write the select menus so that the current month and date are displayed.

var months = new Array() // array holding months of the year
months[1] = "Jan" // start array index at 1 for easy reading
months[2] = "Feb"
months[3] = "Mar"
months[4] = "Apr"
months[5] = "May"
months[6] = "Jun"
months[7] = "Jul"
months[8] = "Augt"
months[9] = "Sep"
months[10] = "Oct"
months[11] = "Nov"
months[12] = "Dec"

var today = new Date() // create new Date object
var month = today.getMonth()+1 // store integer representing current month in variable, "month". add 1 for easy reading
var date = today.getDate() // store current date in variable, "date"

The HTML select menus' options are created dynamically using the months array, and the month and date variables:

<form>
<select onchange="correctDate(this.form,this)"> see this keyword and forms lesson for use of the "this" keyword
  <script type="text/javascript>
  // loop will iterate 12 times. when counter equals current month, var "sel" = "selected"
   for(i=1; i<=12; i++){
      if(i==month){
      sel = "selected"
      }
      else{
      sel = "" // for all other iterations, var "sel" equals an empty string
      }
//each option is written along with its corresponding value in the month array. the value of "sel" is included in the string and will determine which option is selected by default
   document.write("<option value="+months[i]+" "+sel+">"+months[i]+"\n")
   }
</script>
</select>

<select>
<script language="JavaScript">
// if month is 4, 6, 9 or 11, daysInMonth = 30. if month is 2, daysInMonth = 28. otherwise daysInMonth = 31
  var daysInMonth=(month==4 || month==6 || month==9 || month==11) ? 30 : (month==2) ? 28 : 31
  for(j=1; j<=daysInMonth; j++){ // the number of options in the 2nd menu depends on the daysInMonth variable
      if(j==date){ // if the counter is equal to today's date, var "sel" = "selected"
      sel = "selected"
      }
      else{
      sel = ""
      }
  document.write("<option value="+j+" "+sel+">"+j+"\n") // write each option
  }
</script>
</select>
</form>

Because the menus' options are created dynamically, they will conveniently display the current month and date. To make sure the user will not select a non-existing date such as "Feb 31", the 1st menu invokes a function from within its onChange event handler which changes the number of options in the date menu to reflect the actual number of days in the selected month.

function correctDate(form,monthMenu){
// 'form' is a reference to the form, 'monthMenu' is a reference to the 1st menu in that form. both are passed from the onChange event handler of the 1st select menu which invokes this function
// loop through the form's elements for the purpose of creating a variable representing the 2nd menu   for(i = 0; i < form.elements.length; i++){
    if(form.elements[i] == monthMenu){
    var dateMenu = form.elements[i+1]
    break
    }
  }
var formerlength = dateMenu.options.length //formerlength is number of options currently in menu
var thelength // thelength is number of options the menu will have, based on the month selected
// if 2nd option (feb) is selected,
  if(monthMenu.options[1].selected){
  thelength = 28 // thelength is 28
  }
// if 3rd (apr), 5th (jun), 8th (sep) or 10th (nov) option is selected,
  else if(monthMenu.options[3].selected || monthMenu.options[5].selected || monthMenu.options[8].selected || monthMenu.options[10].selected){
  thelength = 30 // thelength is 30
  }
  else{
  thelength = 31 //otherwise thelength is 31
  }

dateMenu.options.length = thelength //re-set the number of options displayed in dateMenu

  for(i=formerlength; i<thelength; i++){ // if number of current options is less than options to be displayed, write more options
  dateMenu.options[i].value=i+1 // give each option a value and text label
  dateMenu.options[i].text=i+1
  }

dateMenu.selectedIndex = thelength-1 // display the last day of selected month

}

There ya have it. A handy little script that will keep your date menu true to its month menu.

Home | Contact