如何使用HTML5 datetime-local输入框禁用过往历史日期？

问题根因 #

datetime-local类型输入框的min属性要求值必须是完整的ISO 8601日期时间格式（形如YYYY-MM-DDThh:mm，包含日期+时间片段），你原有代码仅截取了日期部分，浏览器无法识别该值为合法的时间范围限制，所以规则不生效。

修复代码 #

直接替换原有逻辑即可，以下实现会以当前本地时间为起点，禁止选择更早的时间：

<input type="datetime-local" class="form-control col-md-6" name="book" required>
<script>
  const now = new Date();
  // 补零工具，保证月、日、时、分均为两位格式
  const padZero = num => num.toString().padStart(2, '0');
  // 拼接符合要求的min值
  const minTime = `${now.getFullYear()}-${padZero(now.getMonth() + 1)}-${padZero(now.getDate())}T${padZero(now.getHours())}:${padZero(now.getMinutes())}`;
  document.getElementsByName('book')[0].setAttribute('min', minTime);
</script>

额外注意事项 #

原生min属性仅能限制选择器的可选范围，用户依旧可以手动输入过往时间，建议补充提交校验避免非法值提交：

// 表单提交校验示例
document.querySelector('form').addEventListener('submit', function(e) {
  const selectedTime = new Date(document.getElementsByName('book')[0].value);
  if (selectedTime < new Date()) {
    e.preventDefault();
    alert('请选择当前或未来的时间');
  }
})

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