Custom Date of Birth User control .net

Here is a nice solution for a user control for Date of Birth verification, from a user interface perspective its better than a date time popup control as its much quicker to select a day then month then year rather than moving through a popup calendar to find the correct year.

Popup calendars are great when used in the correct place for example booking of a future date like a flight or hotel booking

See live Example

Examaning the Code

This is our content for the Date of Birth control three dropdown lists and customValidator.
[sourcecode language=”vb”]
<%@ Control Language=”VB” AutoEventWireup=”false” CodeFile=”controlDOB.ascx.vb” Inherits=”controlDOB” %>
<div class=”dobPicker”>
<div class=”dateDay”><asp:DropDownList ID=”ddlDay” CausesValidation=”true” runat=”server”></asp:DropDownList></div>
<div class=”dateMonth”><asp:DropDownList ID=”ddlMonth” runat=”server”></asp:DropDownList></div>
<div class=”dateYear”><asp:DropDownList ID=”ddlYear” runat=”server”></asp:DropDownList></div>
<asp:CustomValidator id=”cv1″ runat=”server” Text=”Please enter Date of Birth” EnableClientScript=”true” CssClass=”error” ValidateEmptyText=”true” ></asp:CustomValidator>
</div>
[/sourcecode]
Now in the code behind we need to bind our selectable dates to these dropdownlists
[sourcecode language=”vb”]
Partial Class controlDOB
Inherits System.Web.UI.UserControl</code>

Public theDate As String
Protected Sub Page_Init(sender As Object, e As EventArgs) Handles Me.Init
‘ If Not IsPostBack Then
ddlDay.Items.Add(“DD”)
For i As Integer = 1 To 31
ddlDay.Items.Add(i)
Next i
ddlYear.Items.Add(“YYYY”)
For j As Integer = 1920 To 2010
ddlYear.Items.Add(j)
Next j
ddlMonth.Items.Add(“-Month-“)
ddlMonth.Items.Add(“January”)
ddlMonth.Items.Add(“February”)
ddlMonth.Items.Add(“March”)
ddlMonth.Items.Add(“April”)
ddlMonth.Items.Add(“May”)
ddlMonth.Items.Add(“June”)
ddlMonth.Items.Add(“July”)
ddlMonth.Items.Add(“August”)
ddlMonth.Items.Add(“September”)
ddlMonth.Items.Add(“October”)
ddlMonth.Items.Add(“November”)
ddlMonth.Items.Add(“December”)

End Sub
End Class
[/sourcecode]
Next we need to create the client side validation for the Date of Birth check
[sourcecode language=”vb”]

Dim cstext As New StringBuilder()
‘custom client side validation for DOB checks each drop down returns flase if no value</code>

cstext.Append(“<script type=”text/javascript”>// <![CDATA[
function ShowValue” + ClientID + ” (sender, args) {“)
cstext.Append(” var dropDay = document.getElementById(‘” + ddlDay.ClientID + “‘);”)
cstext.Append(” var dropMonth = document.getElementById(‘” + ddlMonth.ClientID + “‘);”)
cstext.Append(” var dropYear = document.getElementById(‘” + ddlYear.ClientID + “‘);”)
cstext.Append(“if (dropDay.value==’DD’){“)
cstext.Append(“args.IsValid =false }”)
cstext.Append(“else if (dropMonth.value==’-Month-‘){“)
cstext.Append(“args.IsValid =false }”)
cstext.Append(“else if (dropYear.value==’YYYY’){“)
cstext.Append(“args.IsValid =false }”)
cstext.Append(“else {“)
cstext.Append(“args.IsValid =true;} “)
cstext.Append(“}</”) cstext.Append(“script>”)
Page.ClientScript.RegisterClientScriptBlock(GetType(String), ClientID, cstext.ToString(), False)
cv1.ClientValidationFunction = “ShowValue” & ClientID</code>
[/sourcecode]
and finally the server side validate function
[sourcecode language=”vb”]

Protected Sub cv1_ServerValidate(source As Object, args As ServerValidateEventArgs) Handles cv1.ServerValidate
If ddlDay.SelectedIndex = 0 Then
args.IsValid = False
End If
If ddlMonth.SelectedIndex = 0 Then
args.IsValid = False
End If
If ddlYear.SelectedIndex = 0 Then
args.IsValid = False
End If
End Sub
[/sourcecode]

This control can then be added to the page at design time or dynamically