Сравнение двух дат, использующих datepicker

Question

У меня есть форма, которая имеет два поля даты. Я пытаюсь выбрать даты из двух входов и сравнить их с JQuery. Проблема, с которой я сталкиваюсь, заключается в том, что она возвращает NaN.

Я думаю, возможно, потому что typeof на даты возвращает строки.

$('#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

Мой вопрос отличается от Get difference between 2 dates in javascript?, как я использую библиотеку самозагрузки-Datepicker. Arun P Johny ответ был совершенен

Answer 1

Проблема заключается в том .val() возвращает строку, так как date_received и date_completed строковые значения, так вычитая их будет возвращать NaN.

Вместо этого вы можете использовать getDate() метод 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>