CODEWITHSUNDEEP
jquery
seoppc
seoppc

Reputation: 2824

JQuery Age calculation on date

Am I missing something in the following jQuery code?

var dob = $('#date').val();
if(dob != ''){
    var today = new Date();
    var dayDiff = Math.ceil(today - dob) / (1000 * 60 * 60 * 24 * 365);
    var age = parseInt(dayDiff);
    $('#age').html(age+' years old');
}

I am getting the pre-fetched value of #date from MySQL db.

<input type="text" value="1988-04-07" id="#date" name="dob" /><p id="age"></p>

It's returning NaN, not the correct value.

Upvotes: 23

Views: 85132

Answers (7)

Dinesh Rabara
Dinesh Rabara

Reputation: 1127

function getAge(dateString) {
  var now = new Date();
 
  var yearNow = now.getFullYear();
  var monthNow = now.getMonth();
  var dateNow = now.getDate();
 //date must be mm/dd/yyyy
  var dob = new Date(dateString.substring(6,10),
                     dateString.substring(0,2)-1,                   
                     dateString.substring(3,5)                  
                     );
 
  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--;
    }
  }
 
  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 + ", and " + age.days + dayString + " old.";
  else if ( (age.years == 0) && (age.months == 0) && (age.days > 0) )
    ageString = "Only " + age.days + dayString + " old!";
  else if ( (age.years > 0) && (age.months == 0) && (age.days == 0) )
    ageString = age.years + yearString + " old. Happy Birthday!!";
  else if ( (age.years > 0) && (age.months > 0) && (age.days == 0) )
    ageString = age.years + yearString + " and " + age.months + monthString + " old.";
  else if ( (age.years == 0) && (age.months > 0) && (age.days > 0) )
    ageString = age.months + monthString + " and " + age.days + dayString + " old.";
  else if ( (age.years > 0) && (age.months == 0) && (age.days > 0) )
    ageString = age.years + yearString + " and " + age.days + dayString + " old.";
  else if ( (age.years == 0) && (age.months > 0) && (age.days == 0) )
    ageString = age.months + monthString + " old.";
  else ageString = "Oops! Could not calculate age!";
 
  return ageString;
}
 
// A bit of jQuery to call the getAge() function and update the page...
$(document).ready(function() {
  $("#submitDate").click(function(e) {
    e.preventDefault();
 
    $("#age").html(getAge($("input#date").val()));
 
  });
});

and HTML IS

Upvotes: 4

Polash
Polash

Reputation: 54

We can calculate age by using moment.min.js. In HTML file, Please add below line

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>

Js Code:

var dob = $('#date').val();
if(dob != ''){
    var age = moment().diff(moment(dob, 'YYYY-MM-DD'), 'years');
    $('#age').html(age+' years old');
}

Hope this will help you.

Upvotes: 1

Adam888
Adam888

Reputation: 57

That's what worked for me while all the rest gave NaN:

That only works if the dob format is mm/dd/yy 

function getAge(dob) { return ~~((new Date()-new Date(dob))/(31556952000)) }
$("#dob").val()
$(dob).change(function(){
  $('.age').val(getAge($(this).val()));
});

Please see my jsfiddle http://jsfiddle.net/A888/98c21nbz/1/

Upvotes: 1

Parveen Chauhan
Parveen Chauhan

Reputation: 1496

 jQuery("#dob").on('change',function(){
       var dob1 = jQuery(this).val();
       var dob = $.datepicker.formatDate('yy-mm-dd', new Date(dob1));
       var str = dob.split('-');    
       var firstdate=new Date(str[0],str[1],str[2]);
       var today = new Date();        
       var dayDiff = Math.ceil(today.getTime() - firstdate.getTime()) / (1000 * 60 * 60 * 24 * 365);
       var age = parseInt(dayDiff);
       jQuery("#age").html(age+' years old');
   });




<input type="text" id="#dob" class="datepicker" name="dob" /><p id="age"></p>

Upvotes: 0

Superve
Superve

Reputation: 11

$("#dob").change(function(){

    var today = new Date();
    var birthDate = new Date($('#dob').val());
    var age = today.getFullYear() - birthDate.getFullYear();
    var m = today.getMonth() - birthDate.getMonth();
    if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
        age--;
    }
   return $('#age').html(age+' years old');
});

It worked for me

Upvotes: 1

Matt Ball
Matt Ball

Reputation: 359776

$('#date').val() returns the string '1988-04-07'. You need to parse it into an actual number.

dob = new Date(dob);
var today = new Date();
var age = Math.floor((today-dob) / (365.25 * 24 * 60 * 60 * 1000));
$('#age').html(age+' years old');

As @esqew points out, you also need to change id="#date" to id="date".

Upvotes: 62

Amritpal Singh
Amritpal Singh

Reputation: 1785

Firstly the id mentioned in the textbox should not contain '#'

I have also Created a fiddle

Oops i had't checked the date it was posted on

Upvotes: 2

Related Questions