修复Date日期选择器限制未来10天跨月失效问题

算力阿峰

2026-8-4

修复日期选择器的未来10天限制问题

原代码的问题出在直接对日期数字加10，没处理跨月/跨年的边界情况——比如1月22日加10天应该是2月1日，但原代码会生成1-32这种无效日期格式，浏览器无法识别这个max值，导致限制失效。

修复方案：利用Date对象自动处理日期计算

直接用Date的setDate方法计算未来10天，这个方法会自动处理跨月、跨年的情况，不需要手动判断月份天数。

修复后的JS代码

// 等待DOM加载完成再执行，避免找不到元素
document.addEventListener('DOMContentLoaded', () => {
  // 获取当前日期
  const today = new Date();
  // 计算未来10天：Date对象会自动处理跨月/跨年
  const futureDate = new Date(today);
  futureDate.setDate(today.getDate() + 10);

  // 统一格式化日期为input date要求的YYYY-MM-DD格式
  const formatDate = (date) => {
    const year = date.getFullYear();
    // 月份从0开始，加1后补零
    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("bdate");
  dateInput.setAttribute("min", formatDate(today));
  dateInput.setAttribute("max", formatDate(futureDate));
});

对应的HTML代码

<div class="item" dir="rtl" style="text-align:right">
  <label for="bdate" style="font-size:20px;">تاريخ الدفع<span>*</span></label>
  <input dir="ltr" style="text-align:center" id="bdate" type="date" name="entry.624495733" placeholder="اضغط للاختيار" required/>
  <i class="fas fa-calendar-alt"></i>
</div>