JQuery DateTimePicker UI bekommen insgesamt Tage zwischen zwei datetimepickers

Question

Ich versuche, die gesamten Tage von den beiden benutzerdefinierten DateTimePickers ich habe zu bekommen.

ich diese Funktion versucht haben:

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

Das Problem, das ich habe, ist, dass, wo immer ich versuche, diese Funktion aufzurufen, die Datetime aufhören zu arbeiten. Also wo/wie soll ich diese Funktion nennen oder gibt es einen besseren Weg?

Ich möchte innerhalb dieses Textfeld, um die toal Tage anzuzeigen:

<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> 

Hier ist mein 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

Ich denke @JanisP vorschlagen ist gut. Sie können auch eine leichte Funktion machen wie:

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) 
} 

das hier gefunden: jQuery UI Datepicker - Number of Days Between Dates

aktualisieren

Vom jQuery UI Datepicker Select a Date Range Beispiel, habe ich dieses Arbeitsbeispiel: https://jsfiddle.net/Twisty/r8wx6afk/

Es berechnet die Anzahl der Tage nur, wenn beide Felder während des Ereignisses change ein Datum haben.