datetime-local时间校验问题：结束时间输入框无法正常输入

你遇到的问题核心在于原来的JS逻辑太“霸道”了——每次点击结束时间输入框就触发校验，只要输入的时间早于开始时间就直接把结束时间改成开始时间，这就导致用户根本没法正常输入或选择时间。而且一开始的datestart函数直接把结束时间设成和开始时间一样，也不是最优的做法。

咱们换个更合理的思路：利用datetime-local原生的min属性来限制结束时间的可选范围，让浏览器帮我们过滤掉无效时间，再配合温和的校验逻辑，既保证数据正确，又不影响用户体验。

修正后的完整代码 #

HTML部分

<div class="container">
  <form name="form1" action="datetime1.php" method="post">
    <div class="row">
      <div class="col-30">
        <label>Start Date and Time from Start:</label>
      </div>
      <div class="col-70">
        <input type='datetime-local' name='date_start' id='date_start' min='2018-05-01T00:00' max='2018-05-22T08:00' required value='2018-05-22T08:00' onchange="updateEndTimeMin(this.value);" />
      </div>
    </div>
    <div class="row">
      <div class="col-30">
        <label>End Date and Time:</label>
      </div>
      <div class="col-70">
        <input type='datetime-local' name='date_end' id='date_end' min='2018-05-01T00:00' max='2018-05-22T08:00' required value='2018-05-22T08:00' onchange="validateEndTime(this.value);" />
      </div>
    </div>
    <div class="row">
      <input type="submit" name="submit" value="Send">
    </div>
  </form>
</div>

CSS部分（保持不变）

.col-30 { float: left; width: 30%; margin-top: 6px; }
.col-70 { float: left; width: 70%; margin-top: 6px; }
.container { border-radius: 5px; background-color: #f2f2f2; padding: 20px; }
.row:after { display: table; clear: both; }

JavaScript部分

// 更新结束时间的最小可选值，和开始时间保持一致
function updateEndTimeMin(startValue) {
  const endInput = document.getElementById("date_end");
  endInput.min = startValue;
  // 如果当前结束时间早于新的开始时间，自动调整为开始时间
  if (endInput.value < startValue) {
    endInput.value = startValue;
  }
}

// 校验结束时间是否合法（防止用户手动输入无效值）
function validateEndTime(endValue) {
  const startValue = document.getElementById("date_start").value;
  if (endValue < startValue) {
    alert("结束时间不能早于开始时间哦");
    document.getElementById("date_end").value = startValue;
  }
}

关键修改点说明 #

• 去掉了结束时间输入框的onclick事件：原来的点击就触发校验会干扰用户正常操作，只保留onchange在用户选择/输入完成后校验。
• 用updateEndTimeMin函数替代原来的datestart：不再直接赋值结束时间，而是设置它的min属性，这样浏览器的时间选择器会直接隐藏早于开始时间的选项，从根源上减少无效输入。
• 优化校验逻辑：只有当用户手动输入了无效时间（比如绕过选择器直接敲键盘），才会弹出提示并重置，不会影响正常的选择操作。

这样修改后，用户既能正常选择时间，又能确保提交的结束时间不会早于开始时间，完美解决你遇到的问题~

内容的提问来源于stack exchange，提问作者Wellington Telles Cunha