CalendarExtendar control of Ajax in asp.net

Introduction: In this article i am going to explain how to use Ajax calendar extendar control to show/display calendar to select the date while filing the date field e.g.  Date of Birth, Date of joining etc. on the registration form or other input forms.

Description: In previous article i explained How to install Ajax Control Toolkit in Visual Studio and How to allow only numbers, characters in the textbox using FilteredTextBoxExtender control of Ajax in asp.net and Ajax AutoCompleteExtender control example in asp.net using C#,VB.Net without using web service and Ajax AutoCompleteExtender control example in asp.net C#,VB.Net using web service.
While working on web application we frequently require taking the date input from the users e.g. while filling Date of Birth, Date of Joining etc. Ajax made it very easy by providing the CalendarExtendar control. We can implement it on the TextBoxes where user enters his DOB(Date of Birth) or DOJ(Date of joining) etc. Now when user click on TextBox a calendar appears and let the user select the appropriate date from the calendar. Thus it is very user friendly and convenient way to take the date inputs.

Implementation: Place a ScriptManager control, a TextBox and Label control from the Visual studio standard toolkit.

Also place CalendarExtendar control from the AjaxControlToolKit if you have already installed the AjaxControlToolkit.

• If not then you can follow the instruction to install the AjaxControlToolkit from my previous article  “http://www.webcodeexpert.com/2013/02/how-to-install-ajax-control-toolkit-in.html”

  <asp:ScriptManager ID="ScriptManager1" runat="server">

    </asp:ScriptManager>

   <asp:TextBox ID="txtDOB" runat="server"></asp:TextBox>

        <asp:CalendarExtender ID="CalendarExtender1"

        PopupButtonID="txtDOB"

        PopupPosition="BottomLeft"

         TargetControlID="txtDOB"

          Format="dd/MM/yyyy"

          runat="server">

        </asp:CalendarExtender>

        <asp:Button ID="btnSubmit" runat="server" Text="Submit " onclick="btnSubmit_Click" />

        <asp:Label ID="lblDOB" runat="server" Text=""></asp:Label>

C#.Net Code to implement CalendarExtendar control of Ajax in asp.net

• Now in code behind file (.aspx.cs) write the code on Submit button click event as:

protected void btnSubmit_Click(object sender, EventArgs e)

    {

        lblDOB.Text = "Your Date of Birth is: " + txtDOB.Text;

    }

VB.Net Code to implement CalendarExtendar control of Ajax in asp.net

• Now in code behind file (.aspx.vb) write the code on Submit button click event as:

Protected Sub btnSubmit_Click(sender As Object, e As EventArgs)

                    lblDOB.Text = "Your Date of Birth is: " + txtDOB.Text

End Sub

• Tweet
• Share
• Share
• Share

Related Post