extract year from date and calculate datedifference

Question

I am relative new in coding and recently i have to do some date manipulations with data entered in a form. I searched a lot and I haven't found the solution that works for me.
Here is the issue:

The user enters following data in datetime-local fields in HTML:
1) Year of entering College (date 1)
2) Year of graduation (date 2)
3) Birthday (date 3)

I need a JQuery or a JavaScript script that uses this dates and output following:
1) Year of admitting, based on the admittion date (I know there is a getFullYear function, but I couldn't use it right...) >>> result1
2) Age at graduation (date difference between Birthdate and date of Graduation. >>> result2

I tried with adding datepicker but somehow I got really awful looking calendar which was displayed over the boxes. I couldn't install datetimepicker...

Thank you in advance. Your help is appreciated.

Here is my HTML code.

<input id="date1" type="datetime-local"/>
<label for="date1">admittion in Colleage</label>
<br />
<input id="result1" type="text"  readonly="true" name="year" placeholder="=(getFullYear from date1)"/>  
<label for="result1">year</label>    
<br />


<input id="date2" type="datetime-local" />
<label for="date2">graduation</label> 
<br />

<input id="date3" type="date" name="born" />
<label for="date3">born</label>
<br />

<input id="result2" type=“text” name="age" readonly="true" placeholder="=DATEDIF(Date3, Date2, Year)"/></textarea>
<label for="result2">age</label> 
<br />

Answer 1

You didn't include the js code which is more important for this question. I'll include a couple functions that should help.

To find a year from a date, I use the following function

function getYearFromDate(date){
  const yearFromDate = new Date();
  yearFromDate.setTime(date.getTime());
  yearFromDate.setFullYear(date.getFullYear() + 1);
  return yearFromDate;
}

console.log(getYearFromDate(new Date()));

And the graduation age copied mostly from Calculate age given the birth date in the format YYYYMMDD

function getYearsBetween(oldDate, newDate) {
    var age = newDate.getFullYear() - oldDate.getFullYear();
    var m = newDate.getMonth() - oldDate.getMonth();
    if (m < 0 || (m === 0 && newDate.getDate() < oldDate.getDate())) {
        age--;
    }
    return age;
}

Including moment.js is also an option, but it's a large library I like to avoid if I can.

EDIT I thought you wanted year + 1 day. Getting the full year from the date is even easier.

const date = new Date();

console.log(date.getFullYear());

Edit: All together now

function updateGradYear(event) {
  console.log(event.target.value);
  let date = new Date(event.target.value);
  document.querySelector('#result1').value = date.getFullYear();
}

function updateAge() {
  let gradDate = new Date(document.querySelector('#date2').value);
  console.log(document.querySelector('#date3').value);
  let birthdate = new Date(document.querySelector('#date3').value);
  document.querySelector('#result2').value = gradDate.getFullYear() - birthdate.getFullYear();
}



// set some default values
let today = new Date();
document.querySelector('#date1').value = today.toISOString().split('.')[0];
document.querySelector('#result1').value = today.getFullYear();
document.querySelector('#date2').value = today.toISOString().split('.')[0];

let birthdate = new Date(today.getTime);
birthdate.setFullYear(1984);
console.log(birthdate.toISOString().slice(0, 10).replace(/\//g, "-"));
document.querySelector('#date3').value = birthdate.toISOString().slice(0, 10).replace(/\//g, "-");

updateAge();

<input id="date1" type="datetime-local" onchange="updateGradYear(event)" />
<label for="date1">admittion in Colleage</label>
<br />
<input id="result1" type="number" readonly="true" name="year" placeholder="=(getFullYear from date1)" />
<label for="result1">year</label>
<br />


<input id="date2" type="datetime-local" onchange="updateAge()" />
<label for="date2">graduation</label>
<br />

<input id="date3" type="date" name="born" onchange="updateAge()" />
<label for="date3">born</label>
<br />

<input id="result2" type=“text” name="age" readonly="true" placeholder="=DATEDIF(Date3, Date2, Year)" /></textarea>
<label for="result2">age</label>
<br />

Answer 2

Let me know how this works for you! And as i said please enter all the fields while running this code!

$('#date1, #date2').on('blur',function(){
  var dc = document.querySelector('input[id="date1"]');
  var date = new Date(dc.value);
  var collegeadmission = date.getFullYear();
  $('#result1').val(date.getFullYear());
  
  dc = document.querySelector('input[id="date2"]');
  date = new Date(dc.value);
  var collegegrad = date.getFullYear();
  if(! isNaN(collegegrad))
   $('#result2').val(collegegrad - collegeadmission);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="date1" type="datetime-local"/>
<label for="date1">admittion in Colleage</label>
<br />
<input id="result1" type="text"  readonly="true" name="year" placeholder="=(getFullYear from date1)"/>  
<label for="result1">year</label>    
<br />


<input id="date2" type="datetime-local" />
<label for="date2">graduation</label> 
<br />

<input id="date3" type="date" name="born" />
<label for="date3">born</label>
<br />

<input id="result2" type=“text” name="age" readonly="true" placeholder="=DATEDIF(Date3, Date2, Year)"/></textarea>
<label for="result2">age</label> 
<br />

Answer 3

check out this url:http://jsbin.com/vebiwogipu/edit?html,js,output

Make sure u fill all the dates and time properly as you discussed in your html.

Similarly you can attach the output on click or change event. and aso you can leverage getMonth() and getDay() in the code to get desired output.

Answer 4

Take a look at the label and may be alert, when you click the button, it shows year out of your first date field. As i said you need to add the logic for rest.

let me know if it makes sense, if not please add more information to make me understand!