Subtract date, month and years dynamically and put data as days using Jquery

Question

I want to subtract a user input years from another input years, but so far I had no luck.

I'll create a snippet where you can play.

What I'm trying to do is to make an input field (A) to enter years only. Then after that select any date and subtract it from the input year (A) (date and month are fixed like 31.03.input_year)...

$(document).on('change', '#year_select', function() {
  calculate();
});

$(document).on('change', '#new_date', function() {
  calculate();
});

function calculate() {
  var year_enter = $('#year_select').val();
  var current_year = year_enter+'-03-31';
  var new_date = $('#new_date').val();
  if(year_enter != '') {
    //alert(current_year);
  }
  if(new_date != '') {
    //alert(new_date);
    
    var total = new_date - current_year;
    $('#answer').val(total);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Enter years (A)</p>
<input type="number" id="year_select" min="0" placeholder="Eg: 2018, 2001">

<br>

<p>Select Date (B)</p>
<input type="date" id="new_date">


<p>(A - B)</p>

<input type="text" readonly id="answer">

I always get NaN value, my subtract method is incorrect I guess. I tried using setDate(), getDate() etc, but I don't understand the logic.

Thanks in advance...

95faf8e76605e973 · Accepted Answer · 2018-09-10T05:44:32.087

1

You can use new Date() to type cast them into date in order to do arithmetic

$(document).on('change', '#year_select', function() {
  calculate();
});

$(document).on('change', '#new_date', function() {
  calculate();
});

function calculate() {
  var year_enter = $('#year_select').val();
  var current_year = new Date(year_enter + '-03-31');
  var new_date = new Date($('#new_date').val());
  if (year_enter != '') {

  }
  if (new_date != '' && year_enter != '') {

    if (current_year < new_date) {
      $('#answer').val('A must be greater than B');
      return;
    }

    var total = Math.round(Math.abs((current_year.getTime() - new_date.getTime()) / (24*60*60*1000)));

    $('#answer').val(total);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Enter years (A)</p>
<input type="number" id="year_select" min="0" placeholder="Eg: 2018, 2001"><span style="opacity: 0.5;">&nbsp;this currently has fixed -month-day(-03-31) </span>

<br>

<p>Select Date (B)</p>
<input type="date" id="new_date">


<p>(A - B)</p>

<input type="text" readonly id="answer">

edited Sep 10 '18 at 05:44

answered Sep 08 '18 at 20:16

95faf8e76605e973

13,643
3
24
51

Is there any way to subtract exact date, month and years, example 30/05/2018 - 30/05/2017 = 365 days – Vpa Sep 09 '18 at 21:00
I think my topic is incorrect as what I want, sorry for the disturbance... I'll edit – Vpa Sep 09 '18 at 21:06
@Vpa ah ok, i know what you mean - edited my answer. still used `new Date()` in my example to type cast. Also you can see the formula on the snippet for computing days. Hope it helps – 95faf8e76605e973 Sep 10 '18 at 05:45
yeah, this is working and very helpful... thank you so much, you saved my days – Vpa Sep 10 '18 at 08:38

Roy Scheffers · Answer 2 · 2018-09-10T00:04:25.150

Dates can be tricky to handle, but the moment library makes it a lot easier. In my example I take the input of the two fields, parse them into a moment object and calculate their difference in a duration. You can read more on duration in the Moment.js docs.

The code snippet difference is expressed in days. In case you want to change it to months, or years, update the below line.

log(Math.round(duration.as('days')) + 'days');

You can also include several if statements, to check if the difference is a year, display the result in years. If not, and there's a full month, express the result in months and so on.

Here's a working example in days.

$(document).on('change', '#year_select', function() {
  calculate();
});

$(document).on('change', '#new_date', function() {
  calculate();
});

function calculate() {
  var yearSelect = document.querySelector('#year_select').value;
  var newDate = document.querySelector('#new_date').value;
  var first_date = new window.moment('31-03-' + yearSelect, 'DD-MM-YYYY');
  var second_date = new window.moment(newDate, 'YYYY-MM-DD');

  if(yearSelect.length !== 4 || newDate === '') {
    log('');
    return;
  }
  
  var duration = window.moment.duration(first_date.diff(second_date));

  log(Math.round(duration.as('days')) + 'days');
}

function log(value) {
  var answer = document.querySelector('#answer');
  answer.value = value;
}

<script src="https://cdn.jsdelivr.net/momentjs/2.10.6/moment-with-locales.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Enter years (A)</p>
<input type="number" id="year_select" min="0" placeholder="Eg: 2018, 2001">

<br>

<p>Select Date (B)</p>
<input type="date" id="new_date">


<p>(A - B)</p>

<input type="text" readonly id="answer">

NOTE: There are a few discussions out there on how to format a date/duration, e.g. 1 year, 2 months, 5 days. Have a look at a possible solution at these discussions if you want something like this.

How can I achieve the subtract date and month also. Suppose I want to put data as date wise like 09/09/2018 - 08/09/2018 = 1 day etc — Vpa, Sep 09 '18 at 21:01
I edit the topic, sorry for the wrong topic... please help me here again — Vpa, Sep 09 '18 at 21:08
thank you very much, it helps a lot. But I wanna use pure JS here.. thank you so much — Vpa, Sep 10 '18 at 08:40

Subtract date, month and years dynamically and put data as days using Jquery

2 Answers2