Original script by A. Satish and provided by The JavaScript Source. Modifications by LowTechGeezer.com to extend functionality.

In addition to illustrating the script when the page loads, the demo also provides options to change the behavior of the script and allows you to see the effect.

This script is designed to populate three form selection lists (day, month, and year) with the current date and fill each list option with the appropriate date information. A parameter is passed to the script function to tell it how many years to place in the year select option list. In addition to the main script function, three other functions can be accessed to handle each list container separately in case that is all your page needs. The script also provides variables which can be modified to alter the format of the data passed when the form is submitted.

Place the following script in a custom header:

<script type="text/javascript">
 
var monOffset = 1;
var useMonthNames = false;
var months = new Array ('January', 'February', 'March',
                        'April', 'May', 'June',
                        'July', 'August', 'September',
                        'October', 'November', 'December');
 
var today = new Date();
var day = today.getDate();
var month = today.getMonth();
var year = today.getFullYear();

function populateMonth(myForm) {
  for (i=0; i<months.length; i++) {
    if (useMonthNames)
      myForm.month.options[i] = new Option(months[i], months[i]);
    else
      myForm.month.options[i] = new Option(months[i],
                                  (i<=9?'0'+(i+monOffset):i+monOffset));
    if (i == month) myForm.month.options[i].selected = true;
  }
}
 
function populateDay(myForm) {
  for (var i=0; i<31; i++) {
    x = i<=9?'0'+(i+1):i+1;
    myForm.day.options[i] = new Option(x,x);
  }
  for (var i=0; i<31; i++) {
    d = myForm.day.options[i].value;
    if (d == day) {
      myForm.day.options[i].selected=true;
      break;
    }
  }
}
 
function adjustDay(myForm) {
  var mon = 0;
 
  if (myForm.month.options[1].selected)
    mon = 28;
  else if (myForm.month.options[8].selected
            || myForm.month.options[3].selected
            || myForm.month.options[5].selected
            || myForm.month.options[10].selected)
    mon = 30;
  else
    mon = 31;
  for (i=0; i<31; i++) {
    myForm.day.options[i] = null;
  }
 
  for (i=0; i<mon; i++)    {
    x = i<=9?'0'+(i+1):i+1;
    myForm.day.options[i] = new Option(x,x);
  }
}
 
function populateYear(myForm, numYears) {
  for (i=0; i<myForm.year.options.length; i++) {
    myForm.year.options[i] = null;
  }
  myForm.year.options.length = null;
 
  for (var i=0,j=year; i<numYears; i++, j--) {
    y= String(j);
    myForm.year.options[i] = new Option(y,y);
  }
  for (var i=0; i<12; i++) {
    if (i == month) {
      myForm.month.options[i].selected=true;
      break;
    }
  }
}
 
function populateDate(myForm, numYears) {
  populateDay(myForm);
  populateMonth(myForm);
  adjustDay(myForm);
  populateYear(myForm, numYears);
}
</script>

At the top of the script are two variables whose values can be changed to alter the format of the data which is passed by the form when it is submitted. These are:

• monOffset – Initially set to 0. In javascript, month numbers begin with 0. If you need the month values passed by the form to indicate a true month number, set this value to 1.
• useMonthNames – Initially set to false. The default behavior is to pass months by number rather than by name. If you need the month name instead of its number, set this value to true.

The last line of the code entered into the custom header is the statement (shown below) that is used to fill the three selection lists when the page loads.

where form-name is the name of the form containing the day, month, and year selection lists, and years-to-display is the number of years to  display in the year selection list.

Usage

To use the script in your project, place three form selection list objects on your page. Using the Form Editor on each, set each respective Name field to day, month and year. Position the selection lists in the order you wish.

In order for the day of months list to have the correct number of day options for the selected month, you also need to insert an onChange event into the month select list Code Field (shown below). The script function executes when the user selects a month and will adjust the last day option to make sure it is the last valid day for that month.

Extras

Since the form name is used to control loading the data information into the select lists, it is possible to use multiple select lists controlled by different form names to provide something like a start and end date selection (as shown in the demo). To provide such a feature, you will need to add additional select list objects as desired.

You also do not need to use all three select lists. If all you want is a day, month, or year select list (or some combination), simply use only the desired select list and in the custom header, enter an onLoad event to populate the select list(s) you desire.

For the day select list:

For the month select list:

For the year select list:

where the form-name and years-to-display parameters are the same as listed above.

If you plan on using the day select list, remember that it is populated with the number 1 through 31 and will only reflect the valid month end day number when used in conjunction with the month select list.