How to Calculate Age by Inserting DOB Manually

Introduction

In one of my previous articles I explained how to calculate the age of a user using Ajax Calendar in ASP.NET Application.

That application provided a good and simple way of calculating the age, but I think there might be a problem in that application. What will happen if the user enters an age manually or if he changes the Date of Birth after selecting it! Nothing will be shown in the result and that's not acceptable in any form of project. So this article will explain how to calculate age by inserting DOB manually.

I will work on the same application on which I had worked on previously (the Ajax Calendar), this will help you to upgrade your application as well.

Let's see the procedure required to create such an application.

Step 1

First add two Textboxes, one for inserting the Date of Birth and the other for showing the age.

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

Step 2

Now we will first add an Ajax Calendar so that if the user wishes to select the date from the Calendar then he can do that.

For this to happen you need to add the Ajax Assembly.

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

Now you can use the Calendar Extender in your application.

      <cc1:CalendarExtender runat="server" TargetControlID="txtDATE_OF_BIRTH" Format="yyyy-MM-dd" OnClientDateSelectionChanged="SelectDate" ID="CalendarExtender1"></cc1:CalendarExtender>

Step 3

Now we will create a function that will work for the Calendar Extender and will help it to find the age.

Write this code in the Script Tag:

        <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())));                

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

            }            

    </script>

As the User select any date this function will come into action and will find the Age.

Let's see what happens when we execute our application.

On running the application you will see two TextBoxes, click on the TextBox on which the Calendar is applied to see the calendar and select a date.

As you select a date, the age will be calculated and will be shown in the second TextBox.

But as I change the date you will see that nothing happens to the second TextBox, it is still showing what it was showing earlier.

This is the problem that will be solved in this article.

Step 4

Now we will create one more JavaScript function that will calculate the age when the user enters or changes the date manually.

Write this code in the same script where the earlier function was written.

            function findage() {

                var PresentDay = new Date();

                var dateOfBirth = (new Date(document.getElementById("txtDATE_OF_BIRTH").value));

                var months = (PresentDay.getMonth() - dateOfBirth.getMonth() + 
               (12 * (PresentDay.getFullYear() - dateOfBirth.getFullYear())));

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

            }

This function is slightly changed from the earlier function. In this function a variable named dateOfBirth will hold the value inserted in the first TextBox and then the same procedure will be executed that was executed in the earlier function.

You also need to make a change in the TextBox that was declared in the first step, this function will work on the Onchange event of the TextBox, you will see that Intellisense is not showing anything like onchange but don't worry, Visual Studio will automatically fix this problem.

    <asp:TextBox ID="txtDATE_OF_BIRTH" runat="server" Onchange="return findage();" Font-Size="12px" ></asp:TextBox>

If you want to add validation on DOB then click on this link:

Apply Client Side Validation on DOB

Apply .NET Validation on DOB

Now you can run your application and check the output.

Output

On running the application you can either enter the date directly without selecting it from the Calendar or you can first select it from the Calendar and then make changes in it.

I will first select the date from the calendar so that it can be checked that both functions are working absolutely fine.

Now if I change the year in the date entered then the age will also be calculated, here is an example: