DateBox UserControl

Introduction

It's very easy to select some date from Calendar Control and attach it with TextBox Control. If we need to type any date and ignore the separator i.e. '"/", "-" or ":".

It is a simple <code>WebUserControl you can use in your Web Application.

Now, there is the steps for creating this  <code>WebUserControl. 

Step 1: Control Design i.e. ASCX File

To create a user control, you need to left click on the solution and click on Add New Item > than in select WebUserControl.  

After you click on Add button, one ASCX file gets created, then you can add the following line of code : 

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="DateBox.ascx.vb" Inherits="DateBox.DateBox" %>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="DateBox.js" type="text/javascript"></script>
<asp:TextBox ID="DateBox" runat="server" MaxLength="10" onfocus="javascript:this.select();" >
</asp:TextBox>

You can use/download any one of updated and released JQuery available in  http://jquery.com/ .

Step 2: Control Code-Behind i.e. .VB File

Once you are done with the control design, you can paste the following code in the codebehind, i.e., .vb file 

Imports System.ComponentModel
Public Class DateBox
    Inherits System.Web.UI.UserControl
    Private _separator As String
    Private _datemask As String 
    Public Property Text As String
        Get
            Return DateBox.Text
        End Get
        Set(value As String)
            DateBox.Text = value
        End Set
    End Property


    <DefaultValue("/")> _
    Public Overridable Property Separator As String
        Get
            If _separator Is Nothing Then
                Dim attributes As AttributeCollection = _
                  TypeDescriptor.GetProperties(Me)("Separator").Attributes
                Dim myattribute As DefaultValueAttribute = _
                  CType(attributes(GetType(DefaultValueAttribute)), DefaultValueAttribute)
                _separator = myattribute.Value
            End If
            Return _separator
        End Get
        Set(value As String)
            _separator = value
        End Set
    End Property

    <Category("Behavior"), DefaultValue("dd/mm/yyyy")> _
    Public Overridable Property DateMask As String
        Get
            If _datemask Is Nothing Then
                Dim attributes As AttributeCollection = _
                  TypeDescriptor.GetProperties(Me)("DateMask").Attributes
                Dim myattribute As DefaultValueAttribute = _
                  CType(attributes(GetType(DefaultValueAttribute)), DefaultValueAttribute)
                _datemask = myattribute.Value
            End If
            Return _datemask
        End Get
        Set(value As String)
            _datemask = value
        End Set
    End Property

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            DateBox.Attributes.Add("Onkeypress", "return AddSeparator(this, event,'" + _
               DateBox.ClientID + "', '" + Separator + "');")
            DateBox.Attributes.Add("OnBlur", "return isValidDate('" + _
               DateBox.ClientID + "', '" + DateMask + "');")
        End If
    End Sub 
End Class

Property

• Separator : Gets/Sets the value of Separator between Date Month Year i.e. "/", "-" or ":" 
• DateMask  : Gets/Sets the value of the mask i.e. "DD/MM/YYYY" or "MM/DD/YYYY" 

Methods

• Page_Laod : Here we have added the attributes for DateBox for adding the define separator while you input the value in DateBox. 

Step 3: Code to Add Separator and Check Date Validity i.e. .JS File 

After you are done with step 2, add a new JavaScript file to your solution and paste the following code in it: 

var txtDate; 
function AddSeparator(obj, e, id, seperator) {
txtDate = ('#' + id);
var whichCode = e.keyCode;
if (window.event)
{
if ((e.keyCode < 48 || e.keyCode > 57) & e.keyCode != 8) {
event.returnValue = false;
return false;
}
}
else {
        if ((e.which < 48 || e.which > 57) & e.which != 8) {
            e.preventDefault();            return false;
        }
    }    if ($(txtDate).val().length == 2) {
        $(txtDate).val($(txtDate).val() + seperator);
    }

    if ($(txtDate).val().length == 5) {
        $(txtDate).val($(txtDate).val() + seperator);
    }
}

function isValidDate(id, mask) {
    var mmddyyyy;
    txtDate = ('#' + id);
    // Checks for the following valid date formats:
    // DD/MM/YY    DD-MM-YYYY

    datePat = /^(\d{1,2})(\/|-)(\d{1,2})\2(\d{4})$/; // requires 4 digit year
    var matchArray = $(txtDate).val().match(datePat); // is the format ok?


    if (matchArray == null) {
        alert("Please Enter Valid date value.");
        $(txtDate).focus();
        return false;
    }

    if (mask == 'dd/mm/yyyy' || mask == 'DD/MM/YYYY') {
        day = matchArray[1]; // parse date into variables
        month = matchArray[3];
        year = matchArray[4];
    }


    if (mask == 'mm/dd/yyyy' || mask == 'MM/DD/YYYY') {
        month = matchArray[1]; // parse date into variables
        day = matchArray[3];
        year = matchArray[4];
    }

    if (month < 1 || month > 12) { // check month range
        alert("Month must be between 1 and 12.");
        $(txtDate).focus();
        return false;
    }

    if (day < 1 || day > 31) {
        alert("Day must be between 1 and 31.");
        $(txtDate).focus();
        return false;
    }

    if ((month == 4 || month == 6 || month == 9 || month == 11) && day == 31) {
        alert("Month " + month + " doesn't have 31 days!");
        $(txtDate).focus();
        return false;
    }

    if (month == 2) { // check for february 29th
        var isleap = (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0));
        if (day > 29 || (day == 29 && !isleap)) {
            alert("February " + year + " doesn't have " + day + " days!");
            $(txtDate).focus();
            return false;
        }
    }
    mmddyyyy = month + "/" + day + "/" + year;
    return mmddyyyy;
}

Step 4: How to Use Control in your Project ASPX File  

<%@ Page Language="vb" AutoEventWireup="false" 
       CodeBehind="Default.aspx.vb" Inherits="DateBox._Default" %>
<%@ Register Src="~/DateBox.ascx" tagname="DateBox" tagprefix="datebox" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>    
        <datebox:DateBox ID="DateBox1" runat="server" DateMask="dd/mm/yyyy" />    
        <asp:Button ID="Button1" runat="server" Text="Button" />
        <br />
        <br />
        <b>
        You have Entered :
        </b>
        <asp:Label ID="LabelDate" runat="server"></asp:Label>    
    </div>
    </form>
</body>
</html>