ASP: how to create effective date fields for forms

Tweet

Today we are going to create a date field for a form. The goal is to make it beautiful to see, easy to use and with validation. We are going to use ASP and just a touch of CSS.
The form element will look like:

Day 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 Month 01 02 03 04 05 06 07 08 09 10 11 12 Year 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011

In the example above, I have inserted all the options manually, but as I will show you, we are going to make the values of the three option controls automatic. - Note that if you are reading this post via your RSS reader you might not see the above example in the way it was meant.

Ok. Let's start with the code.


Some variables and a little bit of style
First of all we need to set some variables:

<%
Dim compl_date, dsend, i, y, x, yend, ystart
%>

compl-date will be our complete date;
dsend will be the value of the submit button;
i, y, x are the variables used in the For...Next cycles respectively for days, months and years;
yend is the last year in the year select box;
ystart is the first year in the year select box.

After that, we style the select boxes a little bit:

<style type="text/css">
select {
    background-color: #CCCCCC;
    border-style: outset;
    border-bottom-color: #666666;
    border-left-color: #666666;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}
</style>

Nothing incredibly complicated, as you can see.

The form

Let's now build the form. It will contain the three select boxes which will be dynamically populated. I need to explain the code thoroughly, so please, follow me.

<form method="post" action="test.asp">

The form will post results to the same page, so "test.asp" must be the name of the document containing the form and all the code.

<select name="day" id="day">
<option value="" selected="selected">Day</option>
<% For i = 1 to 31
    if Len(i) < 2 then
      i = "0" & i
    End if
%>
  <option <%If CStr(i) = CStr(Request.Form("day")) then response.write "SELECTED" end if%> value="<%=i%>"><%=i%></option>
<%Next%>
</select>

The above is the first select box for days. We populate the list box dynamically with numbers starting from 1 to 31 (days) and adding a leading 0 when needed (if the length of "i" is less then 2).
In the option tag, we check if "i" is equal to the already submitted day; if so the option will be selected.

<select name="month" id="month">
<option value="" selected="selected">Month</option>
<% For y = 1 to 12
    if Len(y) < 2 then
      y = "0" & y
    End if
%>
  <option <%If CStr(y) = CStr(Request.Form("month")) then response.write "SELECTED" end if%> value="<%=y%>"><%=y%></option>
<%Next%>
</select>

We do the same for the months. "y" will go from 1 to 12.

<select name="year" id="year">
<option value="" selected="selected">Year</option>
<%
yend = year(now())
ystart = year(now())-70
For x = ystart to yend
%>
  <option <%If CStr(x) = CStr(Request.Form("year")) then response.write "SELECTED" end if%> value="<%=x%>"><%=x%></option>
<%Next%>
</select>

The above is for the years. This is a little bit different because the range will be from the current year to the current year minus 70 (from 2011 to 1941). The "70" number can be adjusted as needed; here I assume the date represents a birth date.

Create the complete date and check it

Now we want to "assemble" the date and check if the result is a real date (for validation).

<%
compl_date = Request.Form("day") & "/" & Request.Form("month") & "/" & Request.Form("year")

Here we compose the date adding slashes in between. Now be careful, because in our example the date has the DD/MM/YYYY format. Remember that you might need to submit the date in a different format, according to your database settings.

dsend = Request.Form("dsend")
if dsend <> "" and compl_date <> "" then
    if isDate(compl_date) <> True then
    Response.Write ("<span style=""color:#FF0000"">Please select a valid date</span>")
    Else
    Response.Write compl_date
    End if
End if
%>

With the above snippet, we check if the submit button has been pressed (dsend <> "") and data have been sent (compl_date <> ""). If so, we check if the date is a real date (isDate(compl_date) <> True). If not we show a warning ("Please select a valid date") otherwise we show the resulting date.
Just after the "Else" - where we response write the complete date - is where you should insert the code needed to submit the data to your database or whatever else you need to do with the submitted data.

    <p><input type="Submit" name="dsend" value="Submit"></p>
</form>

We finally insert the submit button and close the form.

That's all for today. I believe the resulting date element (or should I say elements?) is quite effective. The user won't be able to submit a non-valid date, so it will be easy to avoid errors. At the same time, filling the form will be very easy.

Happy coding to all of you!