解决datetime-local结束时间最小值绑定开始时间后时间限制失效问题

问题原因分析 #

你的代码存在两个关键问题：

1. jQuery部分的.first、.second选择器在HTML中没有对应class，这部分代码完全无效，属于冗余内容。
2. 仅绑定change事件的话，只有开始时间输入框失去焦点时才会更新结束时间的min值，用户实时输入或通过日期选择器操作时，限制无法即时生效。

修复后的代码 #

HTML（保持原结构即可） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<form>
<label>Start Date</label><br>
<input type="datetime-local" name="startDate" id="start" value="">
<br>
<label>End Date</label><br>
<input type="datetime-local" name="issueDate" id="end" value="">
</form>

JavaScript（精简并优化事件监听） #

const startInput = document.querySelector('#start');
const endInput = document.querySelector('#end');

// 统一处理min值更新逻辑
function updateEndTimeLimit() {
  endInput.min = startInput.value;
  // 若结束时间当前值小于开始时间，清空避免无效值残留
  if (endInput.value && endInput.value < startInput.value) {
    endInput.value = '';
  }
}

// 监听input和change事件，覆盖所有操作场景
startInput.addEventListener('input', updateEndTimeLimit);
startInput.addEventListener('change', updateEndTimeLimit);

说明 #

• 同时绑定input和change事件，确保用户手动输入、通过日期选择器选时间时，结束时间的min限制都能实时生效。
• 增加无效值清空逻辑，避免结束时间保留小于开始时间的无效内容。
• 移除无用的jQuery代码，精简结构提升可读性。

内容的提问来源于stack exchange，提问作者Rax