How to subtract dates to get number of years using JavaScript?

Question

I wrote the following JavaScript. But, it does not work. Can please someone suggest what I need to do to get the number of years by subtracting two input dates.

<script type="text/javascript">
$(function () {
  $("#startdate, #enddate").keyup(function () {
    $("#totalyears").val(+$("#enddate").val() - +$("#startdate").val());
  });
 });
</script>

My HTML code:

    <div>
        <label>Start</label>
        <input type="date" name="startdate" id="startdate" autocomplete="off" class="form-control"> 
    </div>
    <div>
        <label>End</label>
        <input type="date" name="enddate" id="enddate" autocomplete="off" class="form-control"> 
    </div>
    <div>
        <label>Total Years</label>
        <input type="date" name="totalyears" id="totalyears" autocomplete="off" class="form-control">   
    </div>

You should try to parse your date-input-strings as javascript dates. From there, you can calculate with them. — ˈvɔlə, Apr 26 '21 at 16:00
You need no. of years or no. of days? Should `Jan 2021 - Dec 2020` be 1 year? — Som Shekhar Mukherjee, Apr 26 '21 at 16:01
Does this answer your question? [How can I calculate the number of years between two dates?](https://stackoverflow.com/questions/8152426/how-can-i-calculate-the-number-of-years-between-two-dates) — Heretic Monkey, Apr 26 '21 at 16:48
But not sure how an `input type="date"` is going to handle being told to show, say, 3. — Heretic Monkey, Apr 26 '21 at 16:50

score 0 · Accepted Answer · answered Apr 26 '21 at 16:46

Your inputs are type='date' which means they'll force their values into the yyyy-mm-dd format. You can extract the javascript date object from that, convert it to milliseconds, then find the difference. The result input needs to be type='text' rather than date. Also, I added .toFixed(2) to the years total since it could end up being a long decimal

$(function () {
     $("#startdate, #enddate").keyup(function () {
        var start = new Date($("#startdate").val()).getTime()
        var end = new Date($("#enddate").val()).getTime()
        // check for incomplete data ...
        if (isNaN(start) || isNaN(end)) return;
        // find the difference, then convert back to years
        var years = (end - start) / 1000 / 60 / 60 / 24 / 365
        $("#totalyears").val(years.toFixed(2));
  });
 });


<div>
    <label>Total Years</label>
    <input  name="totalyears" id="totalyears" autocomplete="off" class="form-control">   
</div>

How to subtract dates to get number of years using JavaScript?

1 Answers1