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...

What do you want to happen if they try to enter a lower value? What is the format for the value? — Daniel Nordh, Jan 17 '20 at 12:57
Here [are](https://stackoverflow.com/questions/53637874) [just](https://stackoverflow.com/questions/7448350) [some](https://stackoverflow.com/questions/36181765) [duplicates](https://stackoverflow.com/questions/10930036) [of](https://stackoverflow.com/questions/36181765) [this](https://stackoverflow.com/questions/54346959) - and there are more. They can be easily found via the search. — domsson, Jan 18 '20 at 13:30

Ori Drori · Accepted Answer · 2020-01-18T13:55:22.243

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:

For the minimum value to be assign. You need to completely feel the start input
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>

How can I add that in addition to setting the minimum value in the id_end_ x field after entering a value smaller than in id_start_x, the value from id_start_x to id_end_x was rewritten (to be unable to physically enter such value) — ZombieDivision, Jan 18 '20 at 08:18
id_start_1 | the user types 10:10> id_end_1 the user types 9:30> id_end_1 automatically sets to 10:10 (must meet the condition) — ZombieDivision, Jan 18 '20 at 12:29

Liad Yogev · Answer 2 · 2020-01-17T12:52:57.103

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.....
  });
}

How to set minimum value in input html by javascript?

2 Answers2