1

I want to auto-filled my age after selecting the date of birth, I'm using getFullYear. Is it possible to include the getMonth and getDate in selecting the date of birth? Here's my code. Javascript

<script type = "text/javascript">
        $(document).ready(function () {
            var age = "";
            $('#dateofbirth').datepicker({
                onSelect: function (value, ui) {
                    var today = new Date();
                    age = today.getFullYear() - ui.selectedYear;
                    $('#myAge').val(age);
                },
                changeMonth: true,
                changeYear: true
            })
        })
    </script>
Omid Nikrah
  • 2,444
  • 3
  • 15
  • 30
One Piece
  • 13
  • 5
  • Where is PHP part? – Armin Sep 19 '18 at 06:58
  • sorry there is no PHP, It's only Javascript.. I only need a little code to get the age by selected the date of birth.. I'm sorry for my mistake – One Piece Sep 19 '18 at 07:02
  • Possible duplicate of [Calculate age given the birth date in the format YYYYMMDD](https://stackoverflow.com/questions/4060004/calculate-age-given-the-birth-date-in-the-format-yyyymmdd) – Armin Sep 19 '18 at 07:04
  • It is not duplicate sir Armin because the birthday is not specified.. – One Piece Sep 19 '18 at 07:08

1 Answers1

0

$(document).ready(function() {
    $('#dateofbirth').datepicker({
      onSelect: function (value, ui) {
        var selectedDate = new Date(ui.selectedYear, ui.selectedMonth, ui.selectedDay), //Convert value to date
            dateToday = new Date(), //Get the date today.
            age = Math.floor((dateToday - selectedDate) / 31536000000) //Get the difference of dates then convert to number of years.

        $('#age').val(age);
      },
      changeMonth: true,
      changeYear: true
    });
  });
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>
<input id='dateofbirth'>
<input id='age'>

UPDATE:

Instead of (1000*60*60*24*365) = 31536000000, I used (1000*60*60*24*365.25) = 31557600000.

There is an extra 1 day every four years so instead of looping through it, we just added an extra 0.25 for every year to cover for this.

$(document).ready(function() {
    $('#dateofbirth').datepicker({
      onSelect: function (value, ui) {
        var selectedDate = new Date(ui.selectedYear, ui.selectedMonth, ui.selectedDay), //Convert value to date
            dateToday = new Date(), //Get the date today.
            age = Math.floor((dateToday - selectedDate) / 31557600000) //Get the difference of dates then convert to number of years.

        $('#age').val(age);
      },
      changeMonth: true,
      changeYear: true
    });
  });
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>
<input id='dateofbirth'>
<input id='age'>
dcangulo
  • 1,888
  • 1
  • 16
  • 48
  • When I click September 25 2010 my age is already 8 years old? But thank you sir. – One Piece Sep 20 '18 at 10:22
  • I tried running and selecting September 25, 2010 and it returns 7. – dcangulo Sep 20 '18 at 10:27
  • I'm confused sir, when I tried selecting September 22, 2010 and it returns 8? But thank you so much sir! Really helped. – One Piece Sep 20 '18 at 11:38
  • @OnePiece It seems like it has issues with leap years. 31536000000 milliseconds is only equal to 365 days while we have leap years containing 366 days/year that is why it is off by some days. I'll try to update my answer to cover this problem. – dcangulo Sep 20 '18 at 14:01
  • Thank you so much sir David – One Piece Sep 20 '18 at 14:56