If statement for user input on time

Question

I am trying to create a if statement where the user must select a time between 7am and 16pm. I have searched on Stack, WESchools, MDN and written the if statement in a multiple of ways and still can not get it to work correctly.

Either the alert pops up, no matter the time inputted and the code wont run, or the code will run no matter the time put in by the user.

Here is the code:

<div class="content-container">
  <div id="table-section" class="table-section">
  <div>
    <button class="confirm">Confirm</button>
    <button class="reset" type="reset">Reset</button>
 <table id="table_id" class="table">
  <thead>
   <tr>
    <th id="th-reg">Registration</th>
    <th id="th-name">Name</th>
    <th id="th-cmr">Current Miles Range</th>
    <th id="th-cni">Miles needed for next trip</th>
    <th id="th-tl">Hours to charge for next trip</th>
    <th id="tpoc">Time Leaving</th>
   </tr>
</thead>
  <tbody>
   <tr>
    <td><span class="answer"></span><input class="reg question" id="car-1-reg" type="text" value="" placeholder="Enter Registration"></input></td>
    <td id="car-1-name" class="name value-reset"></td>
    <td><span id="car-1-cmra" class="answer" type="number"></span><input id="car-1-cmr" class="cmr question" type="text" value="" placeholder="Enter Miles Left"></input></td>
    <td><span id="car-1-mtnc" class="answer" type="number"></span><input id="car-1-mtnc" class="mtnc question" type="text" value="" placeholder="Enter Miles needed"></input></td>
    <td id="car-1-charge-needed" class="charge"></td>
    <td id="car-1-tl" class="tl"><span class="answer time-input" type="text"></span><input class="time" type="time" min="07:00:00" max="16:00:00" required></input></td>
  </tr>
 </tbody>
</table>
   <button id="generate-time-table" class="generate">Generate Schedule</button>
 </div>
</div>

$(".confirm").click(function() {
  var _times = document.getElementsByClassName("time");
  if ((_times > 7) && (_times < 16)) {  
    $("#table_id tbody tr").each(function() {
      if ($(this).find(".reg").val() == "") {
      $(this).find(".name").text("Please enter valid Registration");
  }
  var cmra = $(this).find(".cmr").val();
  var mtnc = $(this).find(".mtnc").val();
  if ((cmra != null && cmra != "") && (mtnc != null && mtnc != "")) {
    var miles = Math.ceil((parseInt(mtnc - cmra)) / 44);
    $(this).find(".charge").text(miles);
  } else if (cmra == null || cmra == "") {
    $(this).find(".charge").text("Please enter the current miles left");
  } else if (mtnc == null || mtnc == "") {
    $(this).find(".charge").text("Please enter the mtnc  left");
  }
})
} else {
  alert("Please enter a time between 7:00am and 16:00pm");
}
});

Here is the fiddle: https://jsfiddle.net/Coxy/bv5jct7n/20/

Any pointers would be really appreciated, I just can't figure out what's wrong no matter which way I write it.

Answer 1

You can simply get hh part from time input and then compare it with hours i.e : if the hh is >= 7 and <= 16 depending on this show error message .

Demo Code :

$("input[type='time']").change(function() {
  var time = $(this).val().split(":")[0]; //get hrs
  console.log($(this).val().split(":")[0]);
  //check hrs if grater then or lss then or not
  if ((time >= 7) && (time <= 16)) {
    //show value in span
    $(this).closest('td').find("span").show().text($(this).val());
    $(this).hide(); //hide that input

  } else {
    //show error 
    $(this).closest('td').find("span").show().text("please enter time below 16:00 and greater the 07:00")

  }

});

$(".reset").click(function() {
  $(".answer").html("");
  $("input").show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="content-container">

  <div id="table-section" class="table-section">

    <div>
      <button class="confirm">Confirm</button>
      <button class="reset" type="reset">Reset</button>
      <table id="table_id" class="table">
        <thead>
          <tr>
            <th id="th-reg">Registration</th>
            <th id="th-name">Name</th>
            <th id="th-cmr">Current Miles Range</th>
            <th id="th-cni">Miles needed for next trip</th>
            <th id="th-tl">Hours to charge for next trip</th>
            <th id="tpoc">Time Leaving</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><span class="answer"></span><input class="reg question" id="car-1-reg" type="text" value="" placeholder="Enter Registration"></input>
            </td>
            <td id="car-1-name" class="name value-reset"></td>
            <td><span id="car-1-cmra" class="answer" type="number"></span><input id="car-1-cmr" class="cmr question" type="text" value="" placeholder="Enter Miles Left">
            </td>
            <td><span id="car-1-mtnc" class="answer" type="number"></span><input id="car-1-mtnc" class="mtnc question" type="text" value="" placeholder="Enter Miles needed">
            </td>
            <td id="car-1-charge-needed" class="charge"></td>
            <td id="car-1-tl" class="tl"><span class="answer time-input" type="text"></span><input class="time" type="time" min="07:00:00" max="16:00:00" required>
            </td>

          </tr>

        </tbody>

      </table>