Moment.js When working with night dates for the morning

Question

Today I came across a problem at the time of testing the differences of hours in the library of moment.js.

It works perfectly, but when I add a night job until the next day it brings me a negative time.

Code:

$("#time2").keyup(function() {
  var valor = $(this).val().length;
  if (valor === 5) {
    var hrF = document.getElementById("time2").value;
    var hrIni = document.getElementById("time1").value;
    var ms = moment(hrF, "HH:mm").diff(moment(hrIni, "HH:mm"));
    var d = moment.duration(ms);
    var s = Math.floor(d.asHours()) + ":" + moment.utc(ms).format("mm");
    document.getElementById("timedif").value = s; //Jogar o valor em um terceiro campo do tipo time
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>

<div class=''>
  <input type="text" class="form-control tracker1" name="time1" id="time1" placeholder="12:00" data-timepicker>
</div>

<div class='mr-2'>
  <input type="text" class="form-control tracker1" id="time2" placeholder="12:00" data-timepicker>
</div>
<div class='mr-2'>
  <input type="text" class="form-control tracker1" id="timedif" readonly>
</div>

Answer 1

I did the check, if the result is negative, it will add another day (24h) to the result, making the calculation correctly.
Follows code below:

$("#time2").keyup(function() {
  var valor = $(this).val().length;
  if (valor === 5) {

    var hrF = document.getElementById("time2").value;
    var hrIni = document.getElementById("time1").value;
    var ms = moment(hrF, "HH:mm").diff(moment(hrIni, "HH:mm"));
    var d = moment.duration(ms);
    if (d < 0) { //trecho adicionado
      d = d.add(1, 'd');
    }
    var s = Math.floor(d.asHours()) + ":" + moment.utc(ms).format("mm");

    document.getElementById("timedif").value = s; //Jogar o valor em um terceiro campo do tipo time

  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>

<div class=''>
  <input type="text" class="form-control tracker1" name="time1" id="time1" placeholder="12:00" data-timepicker>
</div>

<div class='mr-2'>
  <input type="text" class="form-control tracker1" id="time2" placeholder="12:00" data-timepicker>
</div>
<div class='mr-2'>
  <input type="text" class="form-control tracker1" id="timedif" readonly>
</div>

Answer 2

As you are not specifying a date, it will assume the current date. I believe that the correct is for you to provide the date/time. Below is an example:

Javascript

$("#time2,#time1").change(function() {
    if(!$('#time1').val() || !$('#time2').val())
    return;

    var valor = $(this).val().length;
  var ms = moment($('#time2').val()).diff(moment($('#time1').val()));

  var d = moment.duration(ms);
  var s = Math.floor(d.asHours()) + ":" + moment.utc(ms).format("mm") ; 
  $("#timedif").val(s); //Jogar o valor em um terceiro campo do tipo time
});

HTML

<div class=''>           
    <input type="datetime" class="form-control tracker1" name="time1" id="time1" placeholder="12:00" data-timepicker>
</div>

<div class='mr-2'>
    <input type="datetime" class="form-control tracker1" id="time2" placeholder="12:00" data-timepicker>
</div>
<div class='mr-2'>
    <input type="text" class="form-control tracker1" id="timedif" readonly>
</div>

Jsfiddler

https://jsfiddle.net/syhu4tg6/