CODEWITHSUNDEEP
javascripthtml
ZombieDivision
ZombieDivision

Reputation: 183

How to set minimum value in input html by javascript?

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

Upvotes: 1

Views: 1440

Answers (2)

Ori Drori
Ori Drori

Reputation: 191976

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>

Upvotes: 1

Liad Yogev
Liad Yogev

Reputation: 874

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

Upvotes: 0

Related Questions