The minimum input value depends on the second input

Question

I try to enter a minimum value depending on the second value.

desc: if the start field is 12:00, then the end field cannot enter less than 12:00

I tried:

 const ends = [...tr.querySelectorAll('.end')]; const getMin = timeStr => { const [hour, min] = timeStr.split(':'); return +hour * 60 + +min; }; [...tr.querySelectorAll('.start')] .forEach((el, i) => { el.addEventListener('change', e => { const value = e.target.value; const end = ends[i]; end.setAttribute('min', value); if (!end.value || getMin(end.value) < getMin(value)) { end.value = value; } }); });

 <table> <tr> <td class="InputsForUserColor1"> <input class="start" type="time" id="id_start_1" /> </td> <td class="InputsForUserColor2"> <input class="end" type="time" id="id_end_1" max="23:59" /> </td> </tr> </table>

Answer 1

I believe you have .start class for start Input and .end class for end Input. Just try attaching an onchange to get the value of startInput and set it as the min of the end Input. Check this pen .

startInput.addEventListener("change", e => {
    endEls[index].setAttribute("min", e.target.value);
});