如何设置HTML date输入框仅可选择今日及之后的日期

• 核心逻辑：HTML5 <input type="date"> 原生支持 min 属性限制可选最早日期，属性值格式要求为 YYYY-MM-DD，只需通过JS动态生成当前日期的标准格式字符串，赋值给input的min属性即可实现需求。

完整实现代码 #

HTML部分（仅新增了id属性方便JS选中元素） #

<label class="whitetext">Select Date:</label>
<input type="date" class="form-control" id="pickup_date" name="pickup_date" required>

原生JavaScript实现代码（建议放在body末尾，或在DOM加载完成后执行） #

// 获取当前日期对象
const today = new Date();
// 拼接为YYYY-MM-DD格式，自动补全月份、日期的前导零
const minDate = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
// 给日期输入框设置min属性
document.getElementById('pickup_date').setAttribute('min', minDate);

补充说明 #

• 所有现代浏览器均支持该特性，设置min属性后，原生日期选择器会自动将过去的日期置为不可选状态，同时表单提交时会自动校验日期合法性。
• 前端限制仅为提升用户体验，建议后端接收参数时额外校验日期是否晚于等于当前日期，避免用户通过修改前端代码绕过限制。
• 如果需要兼容IE等不支持ES6 padStart 方法的老旧浏览器，可以使用自定义补零函数：

  function addZero(num) {
    return num < 10 ? '0' + num : num;
  }
  const today = new Date();
  const minDate = `${today.getFullYear()}-${addZero(today.getMonth() + 1)}-${addZero(today.getDate())}`;
  document.getElementById('pickup_date').setAttribute('min', minDate);
  

• 如果项目使用jQuery，JS代码可简化为：

  function addZero(num) {
    return num < 10 ? '0' + num : num;
  }
  const today = new Date();
  const minDate = `${today.getFullYear()}-${addZero(today.getMonth() + 1)}-${addZero(today.getDate())}`;
  $('#pickup_date').attr('min', minDate);
  

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