CODEWITHSUNDEEP
javascripthtml
Devender Gupta
Devender Gupta

Reputation: 546

Want to calculate date of birth from a given age

I'm trying to calculate the date of birth from a given age. My logic is

When we enter an age say '5'. The date of birth will be calculated as exactly 5 years from the current date. Example current date is 20/8/2018. Then date of birth will be 20/8/2013 if the age is 5. So below is my code: 

function validatedob() {
  var dob_value = document.getElementById('dob').value;
  var age_value = document.getElementById('age').value;
  var current_date = new Date();
  var birth_date = new Date();
  var birth_year = current_date.getFullYear() - age_value;
  var birth_month = current_date.getMonth();
  var birth_day = current_date.getDate();

  birth_date.setDate(current_date.getFullYear() - age_value);
  birth_date.setMonth(current_date.getMonth());
  birth_date.setFullYear(current_date.getDate());

  document.getElementById('dob').setDate(birth_day);
  document.getElementById('dob').setMonth(birth_month);
  document.getElementById('dob').setFullYear(birth_year);
}
<div class="form-inline" id="Age">
  <label for="age">Age</label>
  <input id="age" type="integer" name="age" onchange="validatedob()">
</div>

<div class="form-inline" id="birth">
  <label for="DOB">Date of Birth</label>
  <input id="dob" type="date" value="Unknown" name="date_of_birth" max="31-12-2030">
</div>

This is not working. I'm not goodwith html properties. Can someone help me? how to achieve this?

Upvotes: 0

Views: 543

Answers (4)

Vic Segers
Vic Segers

Reputation: 197

Here is a really simple solution that works and some changes to your HTML.

Changes to HTML:

  • The div and label both had the id "age", this must be unique.
  • type="integer"doesn't exist, so i changed it to type="number".
  • And value="unknown"isn't the right format "yyy-MM-dd", so i just removed it.
  • for="DOB"to for="dob", now that works aswell

Code:

HTML

<div class="form-inline">
    <label for="age">Age</label>
    <input id="age" type="number" name="age"onchange="validatedob()">
</div>
<div class="form-inline" id="birth">
    <label for="dob">Date of Birth</label>
    <input id="dob" type="date" name="date_of_birth" max="31-12-2030">
</div>

JavaScript

function validatedob() {
    var age_value = document.getElementById("age").value;
    var current_date = new Date();
    var birth_date = new Date(current_date.getFullYear() - age_value, current_date.getMonth(), current_date.getDate() + 1);

    document.getElementById("dob").valueAsDate = birth_date;
}

Upvotes: 1

Alexandre Annic
Alexandre Annic

Reputation: 10738

You're issue is that you are trying to setDate and cie on a HTMLElement. The input dob expect a string formatted as yyyy-MM-dd. You can try something like that:

var $dob = document.getElementById('dob');
var $age = document.getElementById('age');

function validatedob() {
  var age = $age.value;
  var date = new Date();
  date.setFullYear(date.getFullYear() - age);
  $dob.value = formatDate(date);
}

function formatDate(date) {
    var d = new Date(date),
        month = '' + (d.getMonth() + 1),
        day = '' + d.getDate(),
        year = d.getFullYear();

    if (month.length < 2) month = '0' + month;
    if (day.length < 2) day = '0' + day;

    return [year, month, day].join('-');
}
<div class="form-inline" id="Age">
  <label for="age">Age</label>
  <input id="age" type="integer" name="age" onchange="validatedob()">
</div>

<div class="form-inline" id="birth">
  <label for="DOB">Date of Birth</label>
  <input id="dob" type="date" value="Unknown" name="date_of_birth" max="31-12-2030">
</div>

PS: For performance purpose avoid to repeat document.getElementById(...) in each method call. Do it once as done in my example.

Upvotes: 1

Ji_in_coding
Ji_in_coding

Reputation: 1701

Here is some sample code for your reference

https://codepen.io/ji_in_coding/pen/wEvoMK

<div class="form-inline" id="Age">
   <label for="age">Age</label>
   <input id="age" type="integer" name="age" onchange="validatedob()">          
</div>

  <div class="form-inline" id="birth" >
    <label for="DOB">Date of Birth</label>
    <input id="dob" type="input" name="date_of_birth">                     
</div>

Javascript

function validatedob()
{
  var age_value = document.getElementById("age").value;
  var today = new Date();
  var calculated_birthday = new Date(
    parseInt(today.getFullYear())+parseInt(age_value), 
    today.getMonth(), 
    today.getDate());
  document.getElementById("dob").value = calculated_birthday.toLocaleDateString("en-US");
}

Upvotes: 1

Emmanuel Bourgerie
Emmanuel Bourgerie

Reputation: 130

Here is the simple answer:

> d1 = new Date(2018, 00, 01)
Date 2018-01-01T00:00:00.000Z
> d2 = new Date(d1.getFullYear() - 5, d1.getMonth(), d1.getDate())
Date 2013-01-01T00:00:00.000Z

But, I would suggest to use a library such as Luxon.

Date manipulation is an absolute nightmare if you do it by yourself. This video from Computerphile summarizes it better than I could:
https://www.youtube.com/watch?v=-5wpm-gesOY

Upvotes: 2

Related Questions