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:
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:
compl-date will be our complete date;
Dim compl_date, dsend, i, y, x, yend, ystart
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:
Nothing incredibly complicated, as you can see.
The formLet'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.
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.
<form method="post" action="test.asp">
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).
<select name="day" id="day">
<option value="" selected="selected">Day</option>
<% For i = 1 to 31
if Len(i) < 2 then
i = "0" & i
<option <%If CStr(i) = CStr(Request.Form("day")) then response.write "SELECTED" end if%> value="<%=i%>"><%=i%></option>
In the option tag, we check if "i" is equal to the already submitted day; if so the option will be selected.
We do the same for the months. "y" will go from 1 to 12.
<select name="month" id="month">
<option value="" selected="selected">Month</option>
<% For y = 1 to 12
if Len(y) < 2 then
y = "0" & y
<option <%If CStr(y) = CStr(Request.Form("month")) then response.write "SELECTED" end if%> value="<%=y%>"><%=y%></option>
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.
<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>
Create the complete date and check itNow we want to "assemble" the date and check if the result is a real date (for validation).
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.
compl_date = Request.Form("day") & "/" & Request.Form("month") & "/" & Request.Form("year")
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.
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>")
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.
We finally insert the submit button and close the form.
<p><input type="Submit" name="dsend" value="Submit"></p>
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!