display correct age depending on date value

Question

I have a table which have a tbody and x number of rows containing persons and their ages like this..

                <tbody>

                  <tr>
                    <td class="number">4</td>
                    <td class="name">Name</td>
                    <td class="age" data-date="2004-11-22 00:00:00">13</td>
                  </tr>
                  <tr>
                    <td class="number">5</td>
                    <td class="name">Name</td>
                    <td class="age" data-date="2003-11-22 00:00:00">14</td>
                  </tr>

I would like to display the correct age of all persons, but since this depends on the current date I'm thinking of entering the birthdate instead. But I still want to display the actual age of the player. How can I use a jQuery script that iterate all rows of the table and depending on the data-date value display the actual age in the corresponding td cell?

score 0 · Answer 1 · answered Oct 01 '17 at 13:05

Maybe something like this:

function getAge(dateString) {
    var today = new Date();
    var birthDate = new Date(dateString);
    var age = today.getFullYear() - birthDate.getFullYear();
    var m = today.getMonth() - birthDate.getMonth();
    if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
        age--;
    }
    return age;
}

$('.age').each(function(index){
    $(this).html(getAge($(this).data('date')));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td class="number">4</td>
      <td class="name">Name</td>
      <td class="age" data-date="2004-11-22 00:00:00">13</td>
    </tr>
    <tr>
      <td class="number">5</td>
      <td class="name">Name</td>
      <td class="age" data-date="2003-11-22 00:00:00">14</td>
    </tr> 
  </tbody>
</table>

the getAge() function is stolen from here: https://stackoverflow.com/a/7091965/2008111 so maybe you follow that link and upvote also the answer there.

score 0 · Accepted Answer · answered Oct 01 '17 at 13:13

$('.age').each(function(i, e) {
  var now = new Date();
  var date = new Date(e.dataset.date);
  $(this).html(now.getFullYear() - date.getFullYear());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td class="number">4</td>
      <td class="name">Name</td>
      <td class="age" data-date="2004-11-22 00:00:00"></td>
    </tr>
    <tr>
      <td class="number">5</td>
      <td class="name">Name</td>
      <td class="age" data-date="2003-11-22 00:00:00"></td>
    </tr>
  </tbody>
</table>

score 0 · Answer 3 · answered Oct 01 '17 at 13:14

Your HTML page should be like this:

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <table class="persons">
      <tbody>
         <tr>
            <td class="number">4</td>
            <td class="name">Name</td>
            <td class="age" data-date="2004-11-22 00:00:00"></td>
         </tr>
         <tr>
            <td class="number">5</td>
            <td class="name">Name</td>
            <td class="age" data-date="2003-11-22 00:00:00"></td>
         </tr>
       </tbody>
    </table>

The js side should look like this:

$(document).ready(function(){
   $('.persons td.age').each(fucntion(){
      var today = new Date();
      var birthday = new Date($(this).attr('data-date'));
      var ageDifMs = today - birthday.getTime();
      var ageDate = new Date(ageDifMs);
      $(this).html(Math.abs(ageDate.getUTCFullYear() - 1970));    
   });
});

display correct age depending on date value

3 Answers3