invalied Unterschied zwischen zwei DateTime Picker mit 'momentjs'

Question

Ich habe zwei DateTime-Picker, die recodeStartTime und recodeEndTime ist, ich möchte die Gesamtstunden zwischen den oben genannten Zeiten mit moment.js zeigen. Aber wenn ich versuche, den Unterschied mit dem folgenden abzurufen:

var calculateTime = function() { 
    var startTime = $('#recordStartTime').val(); 
    var endTime = $('#recordEndTime').val(); 
    var totalTime = moment.utc(moment(endTime,"YYYY-MM-DD HH:mm:ss").diff(moment(startTime,"YYYY-MM-DD HH:mm:ss"))).format("HH:mm:ss"); 
    $('#recordRegularHours').val(totalTime); 
}; 

Ex: recodeStartTime = 2017.09.01 08.40, recodeEndTime = 2017.09.01 05.45

Ergebnis: 21:05:00

Es wird die ungültige Zeitdifferenz zurückkehrt. Wie erhalte ich den Unterschied in Stunden zwischen zwei Momenten?

Answer 1

Sie können eine duration aus der Ausgabe von Moment diff erstellen, dann können Sie moment-duration-format Plug-in verwenden. Das Plug-In fügt die Methode format der Dauer hinzu, sodass Sie format('HH:mm:ss') verwenden können, um die Ausgabe im gewünschten Format zu erhalten (09:05:00 in Ihrem Fall).

Hier eine Arbeitsprobe:

var calculateTime = function() { 
 
    var startTime = $('#recordStartTime').val(); 
 
    var endTime = $('#recordEndTime').val(); 
 

 
    var diff = moment(endTime,"YYYY-MM-DD HH:mm A").diff(moment(startTime,"YYYY-MM-DD HH:mm A")); 
 
    var dur = moment.duration(diff); 
 
    var totalTime = dur.format('HH:mm:ss') 
 
    $('#recordRegularHours').val(totalTime); 
 
};

<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.18.1/moment.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-duration-format/1.3.0/moment-duration-format.min.js"></script> 
 

 
<input type="text" id="recordStartTime" value="2017-09-01 08:40 AM"> 
 
<input type="text" id="recordEndTime" value="2017-09-01 05:45 PM"> 
 

 
<input type="text" id="recordRegularHours" readonly> 
 

 
<button type="button" onclick="calculateTime()">Calulate Diff</button>

Beachten Sie, dass Sie haben "YYYY-MM-DD HH:mm A" statt "YYYY-MM-DD HH:mm:ss" richtig zu verwenden wie 2017-09-01 08:40 AM Eingang zu analysieren.

Wenn Sie kein Instant-Format-Plug-In hinzufügen möchten, können Sie Dauer-Getter verwenden (hours(), minutes(), seconds()).