How to set minimum value in input html by javascript?

Question

Description of the situation: I have two inputs, The first means the start time, the second means the end time.

What I want to come to: so that you cannot enter a time less in the end time field ("id_end _" + i) than it is entered in the start value field ("id_start _" + i)

Attentions: I warn you that you cannot move html code. I have more inputs than specified in the html code (over 20), so the loop must stay

Code html:

<td id="td01" class="InputsForUserColor1">
<input class="time_sea" type="time" id="id_start_1"  />
<input class="time_sea" type="time" id="id_start_2"  />
</td>

<td id="td01" class="InputsForUserColor2">
<input class="time_sea" type="time" id="id_end_1" />
<input class="time_sea" type="time" id="id_end_2" />
</td>

I tried: listens for inputs start change

var elements_i = document.getElementsByClassName("InputsForUserColor1")
for (var i = 0; i < elements_i.length, i++) {
    elements_i.addEventListener("change", function (e) {
        document.getElementById("id_end_" + i).setAttribute.(..) = document.getElementById("id_start_" + i).value
    });
}

if I'm going the wrong way please let me know...

Answer 1

Get an NodeList of end inputs using document.querySelectorAll(".InputsForUserColor2 > input") .

Get an NodeList of start inputs using document.querySelectorAll(". InputsForUserColor1 > input") . Iterate the NodeList with NodeList.forEach() , and assign an event listener to each start element. Use the current index of the start element in the event handler to add the minimum value.

In addition, you can also update the end time according to the start time if end time is not set, or if end time is less than start time.

Notes :

1. For the minimum value to be assign. You need to completely feel the start input
2. You need to set a max on the end as well. If the end will go under the min value, it will cycle back to the max value.

 const ends = document.querySelectorAll(".InputsForUserColor2 > input"); const getMin = timeStr => { const [hour, min] = timeStr.split(':'); return +hour * 60 + +min; }; document.querySelectorAll(".InputsForUserColor1 > input") .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; } }); });

 <div id="td01" class="InputsForUserColor1"> <input class="time_sea" type="time" id="id_start_1" /> <input class="time_sea" type="time" id="id_start_2" /> </div> <div id="td01" class="InputsForUserColor2"> <input class="time_sea" type="time" id="id_end_1" max="23:59" /> <input class="time_sea" type="time" id="id_end_2" max="23:59" /> </div>

Answer 2

So you basically need to loop through all the end date fields, and attach the change event to them, to check if the matched start date is higher then the current date.

Notice that elements_i is an array of elements, and if you wish to refer a specific element in the for loop , you must refer it as elements_i[i]

Here is a something to start from:

var elements_i = document.getElementsByClassName("InputsForUserColor2")
for (var i = 0; i < elements_i.length, i++) {
  elements_i[i].addEventListener("change", function (e) {
    const currentID = elements_i[i].getAttribute('id');
    const currentEndDate = new Date(elements_i[i].value);
    const currentStartDate = new Date(document.getElementById(`id_start_${currentID}`).value);

    if (currentStartDate > currentEndDate)
            // then do something.....
  });
}