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

Question

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

描述:如果开始字段为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>

Answer 1

我相信您有用于开始输入的 .start 类和用于结束输入的 .end 类。只需尝试附加一个 onchange 来获取 startInput 的值并将其设置为结束输入的 min 。检查这个pen .

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