CODEWITHSUNDEEP
javascriptjquerydate
Vpa
Vpa

Reputation: 737

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

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...

Upvotes: 1

Views: 1325

Answers (2)

95faf8e76605e973
95faf8e76605e973

Reputation: 14201

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">

Upvotes: 2

Roy Scheffers
Roy Scheffers

Reputation: 3908

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.

Upvotes: 1

Related Questions