Date Select Dropdown Example

Updated 12/09/2001: Fixed inline script bug in Netscape 6.x browsers that prevented the date object from being initialized properly. This caused invalid date selection to be posted if the default value of the date drop downs were used.

This example dynamically builds drop down date selection objects on an ASP page. Returning valid dates from a client's browser has always been a problem. Was a valid date entered, is the client's date format MM/DD/YYYY or DD/MM/YYYY. The solution used here is to create three seperate dropdown objects for month, day and year. A hidden object type is also created to hold the selected date. The date format returned to the server is selectable.

To generate the dropdown date selection objects is as simple as calling a subroutine from your script:

GenDateDropDown(objref, objname, setdate, begyear, endyear, datemode)
   
'Parameters:
'  objref   = object's form reference
'  objname  = date selection object name
'             creates three dropdowns for day, month and year
'             dropdown names will be the objname plus d, m and y added as a suffix
'             a hidden object of the objname is created to hold the selected date
'  setdate  = default date selection
'  begyear  = minimum year range in year drop down, values prior to 1970 not allowed
'  endyear  = maximum year range in year drop down
'  datemode = determines date format returned in the hidden object's value
'             datemode = 1 - MM/DD/YYYY
'             datemode = 2 - DD/MM/YYYY
'             datemode = 3 - YYYYMMDD
'             datemode = 4 - universal format

Example: GenDateDropDown "document.forms[0]", "date1", date(), 1990, 2020, 1

The above example generates a date selection named "date1". It presets the displayed date to today, makes the year range from 1990 - 2020, and sets the returned date format to MM/DD/YYYY. The date object's form reference "objref" will generally be fixed. By including the form reference as a parameter allows the ability to place date objects on a document with multiple forms.

Here is the example of the date object at work. Notice how the "day" dropdown adjusts to the selected month:

Select a Date:

Your selected Date:

The form objects created with the above example are:
date1  = value equals the selected date
date1d = value equals the selected day
date1m = value equals the selected month
date1y = value equals the selected year

All of these form objects may be accessed by the form's posted ASP page using the request.form object.

You may create as many date objects as you wish per form. You simply need to change the object name so that each name is unique. The next example creates two date objects on the same form and sets the begin date 7 days prior to today:

Example:
GenDateDropDown "document.forms[0]", "begdate", date()-7, 1990, 2030, 1
GenDateDropDown "document.forms[0]", "enddate", date(), 1990, 2030, 1

Begin Date:
End Date:

Seen Enough? Yes I want the code!

Back to ASP Examples