Javascript - Prevent select option smaller than other

Question

Hello.

I am making a system for scheduling by time. I have 2 select’s: start and end.

I need a function to prevent the end time from being less than the start time + 3. Ex: start = 10, the end should be at least 13, and do not let select 12 or less.

Down with what I’ve got:

<div>
<select id="inicio" onchange="horainicio()">
<option value="9">9:00</option>
<option value="10">10:00</option>
<option value="11">11:00</option>
<option value="12">12:00</option>
<option value="13">13:00</option>
<option value="14">14:00</option>
<select>

<select id="fim" onchange="horafim()">
<option value="12">12:00</option>
<option value="13">13:00</option>
<option value="14">14:00</option>
<option value="15">15:00</option>
<option value="16">16:00</option>
<option value="17">17:00</option>
<select>
Resultado:<br/>
<input type="text" id="resultado">
<button type="button" onclick="calcular()">Calcular</button>
</div>
<script>

function horainicio() {
var resultado = document.getElementById("resultado");
document.getElementById("fim").value = parseInt(inicio) + 3;
resultado.value = document.getElementById("fim").value-document.getElementById("inicio").value;
}

function horafim(){
resultado.value = document.getElementById("fim").value-document.getElementById("inicio").value;
}
</script>

Thank you!

Answer 1

As our friend @Sergio commented, if you set out the conditions, say what should happen, the answer may be more precise, but this validation can be done in a very simple way, if the value of the starting time + 3 is higher than the value of the selected end time, do what you want (blocks, etc., etc..)

var horaIni = parseInt(document.getElementById("inicio").value);
var horaFim = parseInt(document.getElementById("fim").value);
if(horaIni + 3 > horaFim){
  //...
}

Follow a snippet with an example (if not a valid time, I leave select empty):

function horafim(value) {
  var horaIni = parseInt(document.getElementById("inicio").value);
  var horaFim = parseInt(value);
  if (horaIni + 3 > horaFim) {
    alert("Hora inválida.");
    document.getElementById("fim").value = "";
  }
}

<div>
  <select id="inicio">
<option value="9">9:00</option>
<option value="10">10:00</option>
<option value="11">11:00</option>
<option value="12">12:00</option>
<option value="13">13:00</option>
<option value="14">14:00</option>
<select>

<select id="fim" onchange="horafim(value)">
<option value="12">12:00</option>
<option value="13">13:00</option>
<option value="14">14:00</option>
<option value="15">15:00</option>
<option value="16">16:00</option>
<option value="17">17:00</option>
<select>
</div>