JQUERY get Age from DOb & display hidden cells

Question

I have user form, and i would like htat when the user enters the Date of birth, JQUERY to workout their age and if they are over 35 it will show a hidden div.

so far i have managed to piece this together

     $(document).ready(function() {
      $('#dob').datepicker({
    onSelect: function(value, ui) {
        var today = new Date(), 
            dob = new Date(value), 
            age = new Date(today - dob).getFullYear() - 1970;

        $('#age').text(age);
    },
    maxDate: '+0d',
    yearRange: '1960:2010',
    changeMonth: true,
    changeYear: true
});


 if ($(age).val() >= 35) {
    // do something
    alert("35");
}else{
    alert("not 35");
}

   });

But it shows the alert on page load, i sure i have just put something in the wrong place, but i dont know what. I have put the alerts in just to text what was working, i will be replacing that with show() one i get it working. In all fairness im not actually bothered about having the datepicker, it was there in an example i found, so i kept it, if its easier to do with out it, then htats fine.

Thanks.

Check out the accepted answer on this question for a good solution for calculating age (also accounts for leap years): http://stackoverflow.com/questions/4060004/calculate-age-in-javascript and the answer here for tying it into jQuery: http://stackoverflow.com/questions/5925068/jquery-calculating-age-based-on-dob — Jack, Feb 22 '13 at 23:37

score 0 · Answer 1 · answered Feb 22 '13 at 23:37

Your condition is misplaced and you were using $(age) instead of age or $('#age').val()

$(document).ready(function () {
    $('#dob').datepicker({
        onSelect: function (value, ui) {
            var today = new Date(),
                dob = new Date(value),
                age = new Date(today - dob).getFullYear() - 1970;

            $('#age').text(age);

            if (age >= 35) {
                // do something
                alert("35");
            }
            else {
                alert("not 35");
            }
        },
        maxDate: '+0d',
        yearRange: '1960:2010',
        changeMonth: true,
        changeYear: true
    });
});

By the way, this is not the right calculation for the age. You only use the year.

dgvid · Accepted Answer · 2013-02-23T14:49:21.613

You have the block:

if ($(age).val() >= 35) {
    // do something
    alert("35");
}else{
    alert("not 35");
}

after the end of the onSelect function. You need to move that block into onSelect or else put it into change event handler.

For example:

...
onSelect: function(value, ui) {
    var today = new Date(), 
        dob = new Date(value), 
        age = new Date(today - dob).getFullYear() - 1970;

    $('#age').text(age);

    if (age >= 35) {
        // do something
        alert("35");
    }else{
        alert("not 35");
    }
},
...

EDIT The ellipses are to show that I've left out the code that doesn't change from your original example. Here is the full example:

$(document).ready(function() {
    $('#dob').datepicker({
        onSelect: function(value, ui) {
          var today = new Date(), 
              dob = new Date(value), 
              age = new Date(today - dob).getFullYear() - 1970;

          $('#age').text(age);

          if (age >= 35) {
              // do something
              alert("35");
          }
          else {
              alert("not 35");
          }
        },
        maxDate: '+0d',
        yearRange: '1960:2010',
        changeMonth: true,
        changeYear: true
    });    
});

Thanks for the help, but now the datepicker does not show.. here is what i have http://jsfiddle.net/EbLFz/ — Aaron Bannister, Feb 23 '13 at 13:22
Ah, you took me a little too literally. :) The ... in the code was to show that I'd left out the parts that didn't need to change. I have edited my answer to include the complete solution. — dgvid, Feb 23 '13 at 14:50
Thats better, i could have sworn i added the other bit... thanks for your help ! — Aaron Bannister, Feb 23 '13 at 15:43
Don't forget to mark this answer as correct if you're satisfied with it. — dgvid, Feb 23 '13 at 16:40

JQUERY get Age from DOb & display hidden cells

2 Answers2