2つのブートストラップの日付ピッカーの違いを計算する方法は？

Question

こんにちは私は2つのブートストラップの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イベントを使用する必要があります。この

$(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); 
}); 

}); 

実施例のような日が異なる取得するためのコードワットbeloeに応じChnageコード]：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); 
     } 
    });