Post
Ask Question

Determine Age Using Ajax Calendar in ASP.Net Application

Introduction

In today's article you will learn how to determine the age of the user using the Ajax Calendar in ASP.NET Application.

You might have used the Ajax Calendar to determine the Date of Birth of the user, but this article will help you to determine the age of the user using that Date of Birth.

Step 1

You need to first download the AjaxControlToolkit. Then add the Toolkit to the Bin folder of your application. Then go to the application and right-click on References to Add Reference.

find age using ajax

Then you need to browse to the Bin folder of your application and select the DLL of the Ajax Toolkit and click "Ok" Now the AjaxToolkit is added to your application.

find age using ajax

Now go to the Toolbox. You will there find an option named "Ajax Extensions". Right-click on it and click on "choose Items".

find age using ajax

A new Wizard will be opened, here if the Ajax Tools already exist then there is no need to do anything else if Ajax Tools are not showing then click on the Browse button and again go to the Bin folder, again select the DLL of the AjaxToolkit and click on the "Ok" button.

find age using ajax

Step 2

Now we will work on the ".aspx.cs" page of our application. Here we will first register the Assembly of Ajax Toolkit. To do that write this single line of code:

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

Now write this code in the application:

<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <table>
    <tr>
    <td>
    <asp:Label ID="Label7" runat="server" CssClass="lbl1" Text="Date Of Birth"></asp:Label>
    </td>
    <td >
        <cc1:CalendarExtender runat="server" TargetControlID="txtDATE_OF_BIRTH" Format="yyyy-MM-dd" OnClientDateSelectionChanged="SelectDate" ID="CalendarExtender1"></cc1:CalendarExtender>
        <script type="text/javascript">
            function SelectDate(e) {
                var PresentDay = new Date();
                var dateOfBirth = e.get_selectedDate();
                var months = (PresentDay.getMonth() - dateOfBirth.getMonth() + (12 * (PresentDay.getFullYear() - dateOfBirth.getFullYear())));
                alert("You Are Of " + Math.round(months / 12) + " Years");
                document.getElementById("txtCONSULTANT_AGE").value = Math.round(months / 12);
            }
    </script>
    <asp:TextBox ID="txtDATE_OF_BIRTH" runat="server" Font-Size="12px" ></asp:TextBox>
    <br />
    <label id="Label34" runat="server" style="color:Gray; font-size:9px">Focus on Textbox to see Calender</label>
    </td>   
    </tr>
    <tr>
    <td >
        <asp:Label ID="Label35" runat="server" CssClass="lbl1" Text="Age"></asp:Label>
    </td>
    <td >
        <asp:TextBox ID="txtCONSULTANT_AGE" ReadOnly="true" runat="server" Font-Size="12px" ></asp:TextBox>
    </tr>
    </table>
    </form>
</body>
</html>

Here first I have added the Script Manager necessary for are working on the Ajax Tools.

Then I created a table, in the second <td> you can see that I hae used "cc1:CalenderExtender". "cc1" is the Tag Prefix for the Ajax Toolkit and CalendarExtender is the Calendar of Ajax. Calendar Extender has some properties that are as follows:

  1. TargetControlId: Here we provide the Id of the Tool on which calendar is to be applied.
  2. Format: Here we provide the format depending on which date will be shown. Here I had used the format in which entries are made in the SQL.
  3. OnClientDateSelectionChanged: Here we pass the name of the function that is working along with this calendar.

Then a function is created named "SelectDate". This function is the main function that will help us to find the age of the user by subtracting the present date from the date that was selectred.

I had shown the age by an alert message.

At the end of the function a single line of code is written:

document.getElementById("txtCONSULTANT_AGE").value = Math.round(months / 12);

This code will transfer the age to the Second TextBox automatically, "txtCONSULTANT_AGE" is the ID of the second TextBox.

I had made a second TextBox as Read Only so that the user can't make the changes in it.

Now your application is created and you can run it to see the output.

Output

On running the application you will get an output like this:

find age using ajax

As you will click on the TextBox a calendar will be opened just below the TextBox from which you need to select your Date of Birth as I had selected.

find age using ajax

On selecting the Date of Birth from the Calendar an alert Box will be opened that will show the age in years.

find age using ajax

If you check your second TextBox then you will find that the same number of years are filled in in the second TextBox also. Since the second TextBox was made readonly the user can't make changes in it but as the user again change the date by selecting the DOB from the calendar this TextBox will also be updated.

find age using ajax


Similar Articles