JQuery DateTimePicker UI獲取兩個日期時間選擇器之間的總天數

Question

我想從我得到的兩個自定義DateTimePickers中獲取總天數。

我試過這個功能：

function dateDifference() { 
if($("#fradato").val()!='' && $("#fradato").val()!='') { 
var diff = ($("#fradato").datepicker("getDate") - $("#tildato").datepicker("getDate"))/1000/60/60/24; 
$("#antalldager").val(diff) 

我有問題是，無論我嘗試調用此功能，的DateTimePicker停止工作。那麼，我應該怎麼稱呼這個功能呢？還是有更好的方法來做到這一點？

我想顯示該文本框的裏面托爾天：

<div class="form-group"> 
    <label class="control-label col-sm-1 col-sm-offset-3"  for="antalldager">Antall dager:</label> 
<div class="col-sm-2"> 
<input type="text" class="form-control" id="antalldager" disabled> 

這裏是我的html：

<script>valgavdato() </script> 
<div id="visdager" style="display: none;"> 
<label class="control-label col-sm-2 col-sm-offset-3" for="fradato">Book fra:</label> 
    <div class="container"> 
     <div class="row"> 
      <div class='col-sm-2'> 
       <div class="form-group"> 
        <div class='input-group date'> 
         <input type="text" id="fradato" class="form-control"/> 
         <span class="input-group-addon"> 
          <span class="glyphicon glyphicon-calendar" ></span> 
         </span> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div id="vistildato" style="display: none;"> 
    <label class="control-label col-sm-2 col-sm-offset-3" for="tildato">Book til:</label> 
    <div class="container"> 
     <div class="row"> 
      <div class='col-sm-2'> 
       <div class="form-group"> 
        <div class='input-group date'> 
         <input type="text" id="tildato" class="form-control" /> 
         <span class="input-group-addon"> 
          <span class="glyphicon glyphicon-calendar"></span> 
         </span> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

JS：

$(function valgavdato() { 
var dateFormat = "mm/dd/yy", 
    to_MaxDate = 13; // From date + this = to maxDate 

    from = $("#fradato") 
.datepicker({ 
    minDate: '0+', 
    defaultDate: "+1w", 
    changeMonth: true, 
    numberOfMonths: 1 

}) 
.on("change", function() { 
    var PickedDate = getDate(this); 
    // See that date is in UTC format. 
    console.log("From DatePicker: "+JSON.stringify(PickedDate)); 

    // Process the picked date. 
    var tempDay = PickedDate.getDate() + to_MaxDate; // Add a number of days to the picked date. 
    var tempMonth = PickedDate.getMonth() + 1; // Because months are zero based. 
    var tempYear = PickedDate.getYear() + 1900; // Because years are 1900 based 
    console.log("Temp date: "+ tempYear+"/"+tempMonth+"/"+tempDay +" --- It may look impossible... But Date() handles it."); 

    // Create a date object in a UTC format. 
    var newMaxDate = new Date(Date.UTC(tempYear, tempMonth-1, tempDay, 0, 0, 0)); 
    console.log( "New max date: : "+ JSON.stringify(newMaxDate)); 

    // Set the minDate ans maxDate options. 
    to.datepicker("option", {"minDate": PickedDate, "maxDate": newMaxDate}); 
}), 
    to = $("#tildato").datepicker({ 
     maxDate: '14+', 
     defaultDate: "+1w", 
     changeMonth: true, 
     numberOfMonths: 1 
    }) 
.on("change", function() { 
    from.datepicker("option", "maxDate", getDate(this)); 
}); 

function getDate(element) { 
    var date; 
    try { 
     date = $.datepicker.parseDate(dateFormat, element.value); 
    } catch(error) { 
     date = null; 
    } 
    return date; 
} 
}); 

function dateDifference() { 
if($("#fradato").val()!='' && $("#fradato").val()!='') { 
    var diff = ($("#fradato").datepicker("getDate") - $("#tildato").datepicker("getDate"))/1000/60/60/24; 
    $("#antalldager").val(diff) 
} 
} 

Answer 1

我覺得@JanisP的建議很好。您也可以像一個輕量級的功能：

function dateDifference(start, end) { 
    // Assume Start and End string format: dd/mm/yyyy 
    var d1 = new Date(start); 
    var d2 = new Date(end); 
    // d2 - d1 gives result in milliseconds 
    // calculate number of days by Math.abs((d2-d1)/86400000, as 24*3600*1000 = 86400000 
    return Math.abs((d2-d1)/86400000) 
} 

發現這個位置：jQuery UI Datepicker - Number of Days Between Dates

更新

從jQuery UI Datepicker Select a Date Range例子，我創建了這個工作示例：https://jsfiddle.net/Twisty/r8wx6afk/

它計算僅當兩個字段在change事件期間有日期時的天數。