<!DOCTYPE html> <html> <head> <link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" /> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> <script type="text/javascript" src="date.js"></script> <style> label {display: inline-block; width: 100px; text-align: right; font-weight: bold; color: blue;} input[type='text'] {width: 250px; padding: 2px; margin: 3px;} </style> <meta charset="utf-8"> <title>Calculate Your Age</title> </head> <body> <script type="text/javascript"> $(function () { $(document).ready(function () { $('#txtDate').datepicker({ changeYear: true, dateFormat: 'd-M-yy', yearRange: "-100:+0", onClose: function () { var txtDate; var sum; if($("#txtDate").val() != '') { txtDate = $("#txtDate").val(); sum = cal_workyears(txtDate); $("#txtAge").val(sum); }else { } } }); }); }); function cal_workyears(dateString) { var today = new Date(); var yearNow = today.getFullYear(); var monthNow = today.getMonth(); var dateNow = today.getDate(); var dob = Date.parse(dateString); var yearDob = dob.getFullYear(); var monthDob = dob.getMonth(); var dateDob = dob.getDate(); var age = {}; var ageString = ""; var yearString = ""; var monthString = ""; var dayString = ""; yearAge = yearNow - yearDob; if(monthNow >= monthDob) { var monthAge = monthNow - monthDob; }else { yearAge--; var monthAge = 12 + monthNow - monthDob; } if(dateNow >= dateDob) { var dateAge = dateNow - dateDob; }else { monthAge--; var dateAge = 31 + dateNow - dateDob; if(monthAge < 0) { monthAge = 11; yearAge--; } } // Object assigned by an object literal age = {years: yearAge, months: monthAge, days: dateAge}; if( age.years > 1 ){ yearString = " Years"; }else { yearString = " Year"; } if( age.months> 1 ) { monthString = " Months"; }else { monthString = " Month"; } if( age.days > 1 ) { dayString = " Days"; }else { dayString = " Day"; } if( (age.years > 0) && (age.months > 0) && (age.days > 0) ) { ageString = age.years + yearString + " " + age.months + monthString + " " + age.days + dayString; }else if( (age.years == 0) && (age.months == 0) && (age.days > 0) ) { ageString = age.days + dayString; }else if( (age.years > 0) && (age.months > 0) && (age.days == 0) ) { ageString = age.years + yearString + " " + age.months + monthString; }else if( (age.years == 0) && (age.months > 0) && (age.days > 0) ) { ageString = age.months + monthString + " " + age.days + dayString; }else if( (age.years > 0) && (age.months == 0) && (age.days > 0) ) { ageString = age.years + yearString + " " + age.days + dayString; }else if( (age.years == 0) && (age.months > 0) && (age.days == 0) ) { ageString = age.months + monthString; }else { ageString = ""; } return ageString; } </script> <div style="display: block;"> <div style="text-align: center;"> <label>Date :</label> <input type="text" id="txtDate"><br> <label>Total :</label> <input type="text" id="txtAge"> </div> </div> </body> </html>