Moment.js Formatunterschied

Question

In einem meiner Projekte muss ich den Unterschied zwischen zwei Mal berechnen. Zum Beispiel beginnt die Arbeitszeit um 6:30 Uhr und endet um 10 Uhr. Der Unterschied beträgt 3 Stunden und 30 Minuten. Ich schreibe eine kleine JS-Funktion, um die Aufgabe zu erledigen und es funktioniert prima, gibt mir folgendes Ergebnis: 3.5. Ich versuchte .format ("HH: mm"), aber das Ergebnis war undefined keine Funktion.
Gibt es eine Methode, die die Ausgabe wie "HH: mm" konvertiert? Hier

ist die Funktion DateDiff:

function dateDiff() { 
    var startTime = moment(document.getElementById("startTime").value, "HH:mm"); 
    var endTime = moment(document.getElementById("end").value, "HH:mm"); 

    var duration = moment.duration(endTime.diff(startTime)); 
    var hours = duration.asHours(); 
    console.log(hours); 
    document.getElementById('dateDiffResult').value = moment(hours); 
} 

Answer 1

Sie könnten nur die Stunden erhalten und Minuten getrennt und Formatieren Sie die Zeichenfolge:

function dateDiff() { 
    var startTime = moment(document.getElementById("startTime").value, "HH:mm"); 
    var endTime = moment(document.getElementById("end").value, "HH:mm"); 

    var duration = moment.duration(endTime.diff(startTime)); 
    var hours = duration.hours(); 
    var minutes = duration.minutes(); 
    document.getElementById('dateDiffResult').value = hours +":"+ minutes; 
} 

Answer 2

wenn Ihre Funktion funktioniert und gibt Ihnen die Zeitdifferenz in Stunden, sicher ist es dann einfach die Stunden und Minuten von der Anzahl der Stunden zu berechnen? Arbeiten mit dem angegebenen Differenz von 3,5 ...

var diff=3.5; 
var hour=Math.floor(diff);//gives hour=3; 
var hours=("0"+ hour).slice(-2);//pads the hours with a leading zero if required to give hours=03; 

var minute = (diff-hour)*60;//gives 30 
var minutes=("0"+ minute).slice(-2);//pads the minutes with a leading zero if required to give minutes=30; 
var totalDiff= hours + ":" +minutes; //gives 03:30 as in HH:MM 

Ich fügte hinzu, die im Anschluss an diese im Snippet zu demonstrieren:

$(document).ready 
 
\t (function(){ 
 

 
\t \t var diff=3.5; 
 
var hour=Math.floor(diff);//gives hour=3; 
 
var hours=("0"+ hour).slice(-2);//gives hours=03; 
 

 
var minute = (diff-hour)*60;//gives 30 
 
var minutes=("0"+ minute).slice(-2);//gives minutes=30; 
 
var totalDiff= hours + ":" +minutes; //gives 03:30 as in HH:MM 
 
alert("HH:MM: " + totalDiff); 
 
\t })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

Mit einem Zeitfeld-jQuery-Plugin können Sie Zeitfelder generieren. Danach können Sie Änderungen an den Feldern abhören und den Stundenunterschied entsprechend aktualisieren.

(function($) { 
 
    $.initTimeFields = function(interval) { 
 
    $('.time-field').each(function(_, field) { 
 
     $(field).initTimeField(interval); 
 
    }); 
 
    }; 
 
    $.fn.initTimeField = function(interval) { 
 
    var hour = 0, minute = 0, diff; 
 
    while (hour < 24 && minute < 60) { 
 
     this.append($('<option>', { 
 
     val : hour * 60 + minute, 
 
     text : ('00' + hour).substr(-2) + ':' + ('00' + minute).substr(-2) 
 
     })); 
 
     minute += interval; 
 
     diff = minute - 60; 
 
     if (diff >= 0) { 
 
     hour += 1; 
 
     minute %= 60; 
 
     } 
 
    } 
 
    var value = this.data('value') || 0; 
 
    if (typeof value === 'string' && value.indexOf(':') > -1) { 
 
     value = (function(values) { 
 
     return parseInt(values[0], 10) * 60 + parseInt(values[1], 10); 
 
     }(value.split(':'))); 
 
    } 
 
    this.val(value); 
 
    }; 
 
}(jQuery)); 
 

 
function updateTimeDiff() { 
 
    $('#hour-diff').val(calcHourDiff(getTime('#start-time'), getTime('#end-time')) + ' hours'); 
 
} 
 
function calcHourDiff(startTime, endTime) { 
 
    var diff = moment.duration(endTime.diff(startTime)); 
 
    return ('00' + diff.hours()).substr(-2) + ':' + ('00' + diff.minutes()).substr(-2); 
 
} 
 
function getTime(selector) { 
 
    return moment($(selector).find('option:selected').text(), "HH:mm"); 
 
} 
 

 
$('.time-field').on('change', function() { 
 
    updateTimeDiff() 
 
}); 
 

 
// Main 
 
$.initTimeFields(15); 
 
$('.time-field').trigger('change');

label { display: inline-block; width: 3em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script> 
 

 
<label>Start: </label><select id="start-time" class="time-field" data-value="06:30"></select><br /> 
 
<label>End: </label><select id="end-time" class="time-field" data-value="10:00"></select><br /> 
 
<label>Diff: </label><input id="hour-diff" type="text" size="8" />