Comparing two dates that use datepicker

Question

I have a form that has two date fields. I am trying to select the dates from the two inputs and compare them with JQuery. The problem I am having is that it returns NaN.

I think might be because the typeof on the dates returns strings.

$('#id_date_completed').change(function() {
    date_received = $("#id_date_received").val(); 
    date_completed = $("#id_date_completed").val(); 

    var diff = date_completed - date_received;
    var days = diff / 1000 / 60 / 60 / 24;

    console.log(days);
}

EDIT

My question differs from Get difference between 2 dates in javascript? as I am using bootstrap-datepicker library. Arun P Johny answer was perfect

I know this is not an answer, but when dealing with time, `momentJS` is really invaluable — Pogrindis, Oct 21 '15 at 10:40
Possible duplicate of [Get difference between 2 dates in javascript?](http://stackoverflow.com/questions/3224834/get-difference-between-2-dates-in-javascript) — morels, Oct 21 '15 at 10:44

Arun P Johny · Accepted Answer · 2015-10-21T11:04:16.697

The problem is .val() will return a string so both date_received and date_completed are string values so subtracting them will return NaN.

Instead you can use the getDate() method of the bootstrap-datepicker

$("#id_date_received, #id_date_completed").datepicker();

$('button').click(function() {
  var date_received = $("#id_date_received").datepicker('getDate');
  var date_completed = $("#id_date_completed").datepicker('getDate');

  var diff = date_completed - date_received;
  var days = diff / 1000 / 60 / 60 / 24;
  $('span').text(days)
})

<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>

<input id="id_date_received" />
<input id="id_date_completed" />
<button>Test</button>
<span></span>

Thanks for the response. It makes sence why it wouldn't work. I have implemented this though and now getting. `Uncaught TypeError: $(...).datepicker is not a function` The datepicker still works though — Mantis, Oct 21 '15 at 10:55
@Mantis might be that you are using a different datepicker plugin... which is the plugin used.. can you share a link to its documentation — Arun P Johny, Oct 21 '15 at 10:56
I hade referenced bootstrap-datepicker.js twice. Once i removed one it started to work. Thank you for your help — Mantis, Oct 21 '15 at 11:06

Comparing two dates that use datepicker

1 Answers1