Как рассчитать разницу между двумя бутстрапами datepicker?

Question

Привет, у меня есть два бутстрапа datepickers, и я хочу рассчитать разницу между датами и показать количество дней в поле ввода. Код: -

<input class="form-control datepicker" type="text" id="fdate" name="fdate"> 
<input class="form-control datepicker" type="text" id="tdate" name="tdate"> 
<input class="form-control" type="text" name="days" id="days"> 

JavaScript: -

<script> 
$(function() { 

$('#fdate').datepicker({ 
    format: "dd-M-yy", 
    todayHighlight:'TRUE', 
    autoclose: true, 
    minDate: 0, 
    maxDate: '+1Y+6M', 
    onSelect: function (dateStr) { 
     var min = $(this).datepicker('getDate'); 
     $("#tdate").datepicker('option', 'minDate', min || '0'); 
    } 
}); 

$('#tdate').datepicker({ 
    format: "dd-M-yy", 
    todayHighlight:'TRUE', 
    autoclose: true, 
    minDate: '0', 
    maxDate: '+1Y+6M', 
    onSelect: function (dateStr) { 
     var max = $(this).datepicker('getDate'); 
     $('#datepicker').datepicker('option', 'maxDate', max || '+1Y+6M'); 
     var start = $("#fdate").datepicker("getDate"); 
     var end = $("#tdate").datepicker("getDate"); 
     var days = (end - start)/(1000 * 60 * 60 * 24); 
     $("#days").val(days); 
    } 
}); 
}); 
</script> 

Я попытался выше JavaScript, чтобы сделать это, но он не работает. Я не уверен, правильно это или нет. Пожалуйста, помогите мне указать, что происходит не так, или если есть лучший способ сделать это. Любая помощь высоко ценится.

Answer 1

Вы должны использовать событие onchange для выбора даты. Chnage кода в соответствии с Белым] ш код, чтобы получить дату другой, как этого

$(function() { 

$('#fdate').datepicker({ 
    format: "dd-M-yy", 
    todayHighlight:'TRUE', 
    autoclose: true, 
    minDate: 0, 
    maxDate: '+1Y+6M' 
}).on('changeDate', function (ev) { 
     $('#tdate').datepicker('setStartDate', $("#fdate").val()); 
}); 
$('#tdate').datepicker({ 
    format: "dd-M-yy", 
    todayHighlight:'TRUE', 
    autoclose: true, 
    minDate: '0', 
    maxDate: '+1Y+6M' 
}).on('changeDate', function (ev) { 
     var start = $("#fdate").val(); 
     var startD = new Date(start); 
     var end = $("#tdate").val(); 
     var endD = new Date(end); 
     var diff = parseInt((endD.getTime()-startD.getTime())/(24*3600*1000)); 
     $("#days").val(diff); 
}); 

}); 

рабочего пример: https://plnkr.co/edit/D7gZnJBa3q6MiyCriT1U?p=preview

Answer 2

HTML

<input name="startdate" readonly="" placeholder="Start date" id="startDatepicker" type="text"> 
<input name="enddate" readonly="" placeholder="End date" id="endDatepicker" type="text"> 

Jquery

$("#startDatepicker").datepicker({ 
     dateFormat: 'yy-mm-dd', 
     prevText: '<i class="fa fa-chevron-left"></i>', 
     nextText: '<i class="fa fa-chevron-right"></i>', 
     changeMonth: true, 
     changeYear: true, 
     onClose: function (selectedDate) { 
      $("#endDatepicker").datepicker("option", "minDate", selectedDate); 
     } 
    }); 
    $("#endDatepicker").datepicker({ 
     dateFormat: 'yy-mm-dd', 
     prevText: '<i class="fa fa-chevron-left"></i>', 
     nextText: '<i class="fa fa-chevron-right"></i>', 
     changeMonth: true, 
     changeYear: true, 
     onClose: function (selectedDate) { 
      $("#startDatepicker").datepicker("option", "maxDate", selectedDate); 
     } 
    });