Get difference in hours with specific interval

Question

I would like to get the difference in hours between two dates with times, this is simple, however in my example should only be considered the hours of 08:00 until 16:00, this is possible?

I will post the code below for you to look at, on my screen there is a field for the date and another for the hours with the minutes, so I put these two together and form the date with time in the pattern that javascript can perform the calculations.

$(document).ready(function() {
  //Pega a data e converte para mm/dd/yy
  var data1 = new Date($("#data1").val().split('/').reverse().join('/'));
  var horaString1 = $("#hora1").val();
  //Separa o valor em hora e minutos
  var horario1 = horaString1.split(":");

  //Adiciona a hora na data anterior
  data1.setHours(data1.getHours() + horario1[0]);
  //Adiciona os minutos na data anterior
  data1.setMinutes(data1.getMinutes() + horario1[1]);


  //data atual
  var data2 = new Date($("#data2").val().split('/').reverse().join('/'));
  var horaString2 = $("#hora2").val();
  var horario2 = horaString2.split(":");
  data2.setHours(data2.getHours() + horario2[0]);
  data2.setMinutes(data2.getMinutes() + horario2[1]);



  console.log("Data anterior: " + data1)
  console.log("Data atual: " + data2)

  //$("#resultado").val(total);

});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <p>Calcular diferença em horas respeitando os intervalors das <b>08:00 ás 16:00</b> </p>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-6 mb-3">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Data Anterior</h5>
          <div class="form-group">
            <input type="text" class="form-control" id="data1" value="12/12/2019" readonly>
          </div>
        </div>
      </div>
    </div>

    <div class="col-sm-6 mb-3">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Hora Anterior</h5>
          <div class="form-group">
            <input type="text" class="form-control" id="hora1" value="09:45" readonly>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-6 mb-3">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Data Atual</h5>
          <div class="form-group">
            <input type="text" class="form-control" id="data2" value="13/12/2019" readonly>
          </div>
        </div>
      </div>
    </div>

    <div class="col-sm-6 mb-3 mb-3">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Hora atual</h5>
          <div class="form-group">
            <input type="text" class="form-control" id="hora2" value="11:30" readonly>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-lg-3">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Resultado</h5>
          <div class="form-group">
            <input type="text" class="form-control" id="resultado" readonly>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

You have to check if the two dates are in this range. Do you know Moment.js? If you don’t want to implement. You can limit the maximum input values by changing the input type to time. Check the Mozilla doc.