[英]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)我想说的是:这样您在结束时间字段(“id_end _”+ i)中输入的时间不能少于在开始值字段(“id_start _”+ i)中输入的时间
Attentions: I warn you that you cannot move html code.注意:我警告您不能移动 html 代码。 I have more inputs than specified in the html code (over 20), so the loop must stay
我有比 html 代码中指定的更多的输入(超过 20),所以循环必须保持
Code html:代码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...如果我走错了路请告诉我...
Get an NodeList of end inputs using document.querySelectorAll(".InputsForUserColor2 > input")
.使用
document.querySelectorAll(".InputsForUserColor2 > input")
获取最终输入的 NodeList。
Get an NodeList of start inputs using document.querySelectorAll(". InputsForUserColor1 > input")
.使用
document.querySelectorAll(". InputsForUserColor1 > input")
获取开始输入的 NodeList。 Iterate the NodeList with NodeList.forEach()
, and assign an event listener to each start element.使用
NodeList.forEach()
迭代 NodeList,并为每个开始元素分配一个事件侦听器。 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 :注意事项:
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>
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.因此,您基本上需要遍历所有
end date
字段,并将change
事件附加到它们,以检查匹配的start 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]
请注意,
elements_i
是一个elements_i
数组,如果您希望在for loop
引用特定元素,则必须将其引用为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.....
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.