最小输入值取决于第二个输入

时间:2020-02-09 18:14:58

标签: javascript html

我尝试根据第二个值输入一个最小值。

描述:如果开始字段为12:00,则结束字段输入的时间不得少于12:00

我尝试过:

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>

1 个答案:

答案 0 :(得分:2)

我相信您有.start类用于开始输入,.end类用于结束输入。 只需尝试附加一个onchange即可获取startInput的值并将其设置为结束Input的min。选中此pen

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