## Calculate AGE based on Date of birth using jQuery Calendar

Hi guys, Bushan here, welcome back to B2 Tech! Today in this video, I will show you how to calculate Age based on Date of birth using jQuery Calendar so let’s get started! If you are creating any kind of registration form, having fields like Date of birth and Age is very very common, the user will enter the date of birth and we need to calculate the age based on the date of birth, we should not allow the user to enter Age manually that’s a bad idea. Age will always depend on the date of birth so today in this article let’s find out how to achieve that.

The first step is to create a new HTML file, jqueryAgeCalculator.html and add all the boilerplate code

The third step is to create 2 textboxes and give an ID to each textbox.

```<body>
Enter Date of Birth: <input type="text" id = "dob" /><br/><br/>
Age: <input type="text" id = "age" readonly/>
</body>```

The fourth step is to add this jquery code inside the script tag, to calculate the Age

```<script type="text/javascript">
var age = "";
\$('#dob').datepicker({
onSelect: function(value, ui) {
var today = new Date();
age = today.getFullYear() - ui.selectedYear;
\$('#age').val(age);
},
changeMonth: true,
changeYear: true
})
})
</script>```

Here is the complete source code,

jqueryAgeCalculator.html

```<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="jquery-ui.css" />
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
<script type = "text/javascript">
var age = "";
\$('#dob').datepicker({
onSelect: function (value, ui) {
var today = new Date();
age = today.getFullYear() - ui.selectedYear;
\$('#age').val(age);
},
changeMonth: true,
changeYear: true
})
})
</script>
<body>
Enter Date of Birth: <input type="text" id = "dob" /><br/><br/>
Age: <input type="text" id = "age" readonly/>
</body>
</html>```

### Bushan Sirgur

Hey guys, I am Bushan Sirgur from Banglore, India. Currently, I am working as an Associate project in an IT company.

### This Post Has 7 Comments

1. I have noticed you don’t monetize bushansirgur.in, don’t waste your traffic, you can earn additional cash
every month with new monetization method. This is the best adsense alternative for any type
of website (they approve all websites), for more details
simply search in gooogle: murgrabia’s tools

1. Sure thank you 🙂

2. krishna maurya

jquery.min.js:2 Uncaught TypeError: \$(…).datepicker is not a function
why its happen?

1. Hello,

Have you added the jQuery UI library ? because datepicker() is available in the UI library. Please cross check once.

Thanks and Regards,
B2Tech Team

3. Crystal Steele

Crystal, Steele

4. naz

Hi, Im followed your steps but still cant get the age.

5. subha