無法計算使用jquery的datepicker的天差異

Question

我試圖使用jquery和bootstrap datepicker計算天差異。我試過很多方法來計算它，但它仍然沒有顯示任何東西。我的代碼中是否有缺少的東西？任何人都可以請借我一隻手嗎？我很難過。任何幫助是極大的讚賞。

<div class="form-group"> 
    <label class="control-label col-sm-2">Date *</label> 
    <div class="bfh-datepicker col-sm-3" data-format="d-m-y" data-date="today"> 
    <input id="mcDateFrom" type="text" name="mcDateFrom" > 
    </div> 
    <div class="bfh-datepicker col-sm-3" data-format="d-m-y" data-date="today"> 
    <input id="mcDateTo" type="text" name="mcDateTo"> 
    </div> 
    <div class="form-group col-sm-4" id="daysCount"> 
    <label id="daysCount"> </label> 
    </div> 
</div> 

$('#mcDateFrom').datepicker({ 
     format: "d-m-y", 
     todayHighlight: 'TRUE', 
     autoclose: true, 
     minDate: 0, 
     maxDate: '+1Y+6M' 
    }).on('change', function (ev) { 
     $('#mcDateTo').datepicker('setStartDate', $("#mcDateFrom").val()); 
    }); 
    $('#mcDateTo').datepicker({ 
     format: "d-m-y", 
     todayHighlight: 'TRUE', 
     autoclose: true, 
     minDate: '0', 
     maxDate: '+1Y+6M' 
    }).on('change', function (ev) { 
     var start = $("#mcDateFrom").val(); 
     var startD = new Date(start); 
     var end = $("#mcDateTo").val(); 
     var endD = new Date(end); 
     var diff = parseInt((endD.getTime() - startD.getTime())/(24 * 3600 * 1000)); 
     $("#daysCount").append("<label> For " + diff + " Day(s) </label>"); 
}); 

Answer 1

有幾個錯誤：

• 壞日期格式，Y顯示爲信不是一年
• 新的Date（）不能處理不確定的自定義格式，但日期選擇器可直接返回Date實例
• 追加onChange事件無法正常工作

這裏是固定的，工作代碼的版本：

$('#mcDateFrom').datepicker({ 
    format: "dd-mm-yyyy", 
    todayHighlight: 'TRUE', 
    autoclose: true, 
    minDate: 0, 
    maxDate: '+1Y+6M' 
}).on('change', function(ev) { 
    $('#mcDateTo').datepicker('setStartDate', $("#mcDateFrom").val()); 
}); 
$('#mcDateTo').datepicker({ 
    format: "dd-mm-yyyy", 
    todayHighlight: 'TRUE', 
    autoclose: true, 
    minDate: '0', 
    maxDate: '+1Y+6M' 
}).on('change', function(ev) { 
    var start = $("#mcDateFrom").data('datepicker').viewDate; 
    var end = $("#mcDateTo").data('datepicker').viewDate; 
    var diff = parseInt((end.getTime() - start.getTime())/(24 * 3600 * 1000)); 
    $("#daysCount").html("<label> For " + diff + " Day(s) </label>"); 
}); 

JSFiddle Demo

Answer 2

我修改您的代碼，現在它的運作良好。 你只需要改變格式，你會得到你需要的輸出。

$('#mcDateFrom').datepicker({ 
 
    format: "dd-mm-yyyy", 
 
    todayHighlight: 'TRUE', 
 
    autoclose: true, 
 
    minDate: 0, 
 
    maxDate: '+1Y+6M' 
 
}).on('change', function(ev) { 
 
    \t 
 
    $('#mcDateTo').datepicker('setStartDate', $("#mcDateFrom").val()); 
 
}); 
 

 
$('#mcDateTo').datepicker({ 
 
    format: "dd-mm-yyyy", 
 
    todayHighlight: 'TRUE', 
 
    autoclose: true, 
 
    minDate: '0', 
 
    maxDate: '+1Y+6M' 
 
}).on('change', function(ev) { 
 

 
    var start = $("#mcDateFrom").data('datepicker').viewDate; 
 
    var end = $("#mcDateTo").data('datepicker').viewDate; 
 
    var diff = parseInt((end.getTime() - start.getTime())/(24 * 3600 * 1000)); 
 
    
 
    $("#daysCount").html("<label> For " + diff + " Day(s) </label>"); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script> 
 

 
<div class="form-group"> 
 
    <label class="control-label col-sm-2">Date *</label> 
 
    <div class="bfh-datepicker col-sm-3" data-format="d-m-y" data-date="today"> 
 
     <input id="mcDateFrom" type="text" name="mcDateFrom"> 
 
    </div> 
 
    <div class="bfh-datepicker col-sm-3" data-format="d-m-y" data-date="today"> 
 
     <input id="mcDateTo" type="text" name="mcDateTo"> 
 
    </div> 
 
    <div class="form-group col-sm-4" id="daysCount"> 
 
     <label id="daysCount"> </label> 
 
    </div> 
 
</div>

Answer 3

您設置錯誤的日期格式爲「新日」，所以它返回之前DIFF無效的日期。

var dateFrom; 

$('#mcDateFrom').datepicker({ 
    format: "d-m-yy", 
    todayHighlight: 'TRUE', 
    autoclose: true, 
    minDate: 0, 
    maxDate: '+1Y+6M' 
}).on('change', function (ev) { 
    dateFrom = $("#mcDateFrom").val(); 
    $('#mcDateTo').datepicker('setStartDate', $("#mcDateFrom").val()); 
}); 

$('#mcDateTo').datepicker({ 
    format: "d-m-yy", 
    todayHighlight: 'TRUE', 
    autoclose: true, 
    minDate: '0', 
    maxDate: '+1Y+6M' 
}).on('change', function (ev) { 
    startDP = dateFrom.split("-"); 
    var startD = new Date(startDP[2], (startDP[1]-1), startDP[0]); 
    var end = $("#mcDateTo").val().split("-"); 
    var endD = new Date(end[2], (end[1]-1), end[0]); 
    var diff = parseInt((endD.getTime() - startD.getTime())/(24 * 3600 * 
1000)); 

    if(diff) { 
     $("#daysCount").append("<label> For " + diff + " Day(s) </label>"); 
    } 
}); 

活生生的例子：https://jsfiddle.net/wdjqh8c9/3/