HTML input type date验证：禁止输入今日之前的日期（含手动输入）

这个场景我在做预约模块时也遇到过，仅靠input[type="date"]的min属性确实只能限制日历选择，防不住用户手动输入过去的日期。下面给你几个实用的解决方案，按需选择：

方案1：禁用手动输入，仅保留日历选择器 #

如果不想让用户手动输入任何内容，只允许通过日历选择，可以用「只读属性 + 聚焦/失焦事件」的组合——既阻止手动输入，又不影响日历弹窗的使用：

<input type="date" id="appointmentDate">

<script>
const dateInput = document.getElementById('appointmentDate');
const today = new Date().toISOString().split('T')[0]; // 格式化今日日期为YYYY-MM-DD

// 设置最小日期
dateInput.min = today;

// 聚焦时移除只读属性，允许打开日历
dateInput.addEventListener('focus', () => {
  dateInput.removeAttribute('readonly');
});

// 失焦时重新添加只读属性，阻止手动输入
dateInput.addEventListener('blur', () => {
  dateInput.setAttribute('readonly', 'readonly');
});

// 初始化时设置只读
dateInput.setAttribute('readonly', 'readonly');
</script>

这种方式最直接，从根源上避免了手动输入的可能。

方案2：实时校验输入值，不符合则修正/提示 #

如果希望允许用户手动输入，但要实时校验并拦截无效值，可以监听input事件，对比输入日期和今日日期：

<input type="date" id="appointmentDate" min="">

<script>
const dateInput = document.getElementById('appointmentDate');
const today = new Date().toISOString().split('T')[0];
dateInput.min = today;

dateInput.addEventListener('input', () => {
  const inputDate = dateInput.value;
  if (inputDate && inputDate < today) {
    // 两种处理方式选其一：
    // 1. 重置为今日日期
    dateInput.value = today;
    alert('不能选择过去的日期哦');
    // 2. 清空输入并提示
    // dateInput.value = '';
    // alert('请选择今日或之后的日期');
  }
});
</script>

这里利用了input[type="date"]的value是YYYY-MM-DD格式的特性，直接字符串对比就能判断大小，不用额外处理日期转换。

方案3：结合HTML5约束验证增强体验 #

HTML5本身有表单约束验证，配合min属性可以在提交时触发校验，但我们可以监听invalid事件自定义错误提示，同时结合实时校验：

<form id="appointmentForm">
  <input type="date" id="appointmentDate" min="" required>
  <button type="submit">提交预约</button>
</form>

<script>
const dateInput = document.getElementById('appointmentDate');
const form = document.getElementById('appointmentForm');
const today = new Date().toISOString().split('T')[0];
dateInput.min = today;

// 自定义无效提示
dateInput.addEventListener('invalid', (e) => {
  e.preventDefault(); // 阻止默认提示
  if (dateInput.value < today) {
    dateInput.setCustomValidity('请选择今日或之后的日期');
  } else {
    dateInput.setCustomValidity(''); // 清除提示
  }
});

// 实时清除无效提示
dateInput.addEventListener('input', () => {
  dateInput.setCustomValidity('');
});

// 表单提交时再次校验
form.addEventListener('submit', (e) => {
  if (!dateInput.validity.valid) {
    e.preventDefault();
    alert('请选择有效的预约日期');
  }
});
</script>

这种方式兼顾了实时反馈和提交校验，用户体验更完整。

你可以根据项目需求选择合适的方案，比如追求简单直接选方案1，需要保留输入灵活性选方案2，注重表单完整性选方案3，也可以把几种方式结合起来使用~

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