JQuery DateTimePicker UI получает общие дни между двумя datetimepickers

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 перестанет работать. Итак, где/как я могу назвать эту функцию или есть лучший способ сделать это?

Я хочу, чтобы отобразить TOAL дней внутри этого текста коробки:

<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

Update

Из jQuery UI Datepicker Select a Date Range Например, я создал этот рабочий пример: https://jsfiddle.net/Twisty/r8wx6afk/

Он высчитывает количество дней, только когда оба поля имеют дату во время события change.