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.

<%@ 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>

Now in the code behind we need to bind our selectable dates to these dropdownlists

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
For i As Integer = 1 To 31
Next i
For j As Integer = 1920 To 2010
Next j

End Sub
End Class

Next we need to create the client side validation for the Date of Birth check

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>

and finally the server side validate function

    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

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

Leave a Reply

Your email address will not be published. Required fields are marked *