Monday, 14 November 2011

ASP: how to create effective date fields for forms


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:
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;
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>
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>
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>
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>")
    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>
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!

0 thoughts:

Post a Comment

Comments are moderated. I apologize if I don't publish comments immediately.

However, I do answer to all the comments.