如何限制input[type="date"]仅允许选择未来两周内的日期

你可以利用<input type="date">原生支持的min和max属性实现这个限制，核心是计算出合法日期范围的起始（今天或明天）和结束（14天后的日期），并将格式统一为YYYY-MM-DD（input date要求的标准格式）。

实现步骤与代码示例 #

1. 基础HTML结构：

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

2. 用JavaScript计算日期并设置属性：

// 获取当前日期对象
const currentDate = new Date();
// 计算14天后的日期
const twoWeeksLater = new Date(currentDate);
twoWeeksLater.setDate(currentDate.getDate() + 14);

// 辅助函数：将日期格式化为YYYY-MM-DD
function formatToInputDate(date) {
  const year = date.getFullYear();
  // 月份从0开始，需+1并补前导0
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

// 获取输入框并设置日期范围
const dateInput = document.getElementById('limitedDateInput');
// 允许选择今天及以后的日期，若需排除今天，可提前执行 currentDate.setDate(currentDate.getDate() + 1)
dateInput.min = formatToInputDate(currentDate);
dateInput.max = formatToInputDate(twoWeeksLater);

额外说明 #

• 这种方式不仅会在日历选择器中灰掉超出范围的日期，还会阻止用户手动输入不符合要求的日期（浏览器会自动校验）。
• 如果需要排除今天，只需在设置min前调整当前日期：currentDate.setDate(currentDate.getDate() + 1)，再传入格式化函数即可。

内容的提问来源于stack exchange，提问作者Alin-Alexandru Peter