选择StartDate后设置日期输入框可选范围时min属性不生效问题

• 业务需求：用户选择StartDate后，ExpectedEndDate、EndDate两个日期选择器仅允许选择StartDate+1天 至 StartDate后6个月区间内的日期，区间外日期全部禁用
• 故障现象：现有代码中futureInput.max设置可正常生效，但futureInput.min设置无效，无法定位错误原因

代码里min属性不生效有两个核心错误：

1. 自动分号插入(ASI)语法错误：debugger语句末尾没有写分号，JS引擎会把下一行开头的数组和上一行debugger识别为同一段代码，相当于执行debugger[expectedEndInput, endInput].forEach(...)，导致属性赋值逻辑运行异常，这是min失效的主要原因。
2. 日期格式不符合规范：原生type="date"输入框要求min/max属性值必须是严格的YYYY-MM-DD格式，月、日为个位数时必须补前导零；同时手动拼接6个月后日期的逻辑没有处理跨年/跨月进位，比如10月加6个月会得到16月这类无效日期，浏览器无法识别。

JavaScript代码 #

$(document).ready(() => {
  const startInput = $('#StartDate')[0];
  const expectedEndInput = $('#ExpectedEndDate')[0];
  const endInput = $('#EndDate')[0];

  // 统一格式化日期为YYYY-MM-DD标准格式
  const formatDate = (date) => {
    const y = date.getFullYear();
    const m = String(date.getMonth() + 1).padStart(2, '0');
    const d = String(date.getDate()).padStart(2, '0');
    return `${y}-${m}-${d}`;
  };

  startInput.addEventListener('change', () => {
    const startVal = new Date($('#StartDate').val());
    // 计算最小可选日期：开始日期+1天
    const minSelectable = new Date(startVal);
    minSelectable.setDate(minSelectable.getDate() + 1);
    // 计算最大可选日期：开始日期+6个月
    const maxSelectable = new Date(startVal);
    maxSelectable.setMonth(maxSelectable.getMonth() + 6);

    const minStr = formatDate(minSelectable);
    const maxStr = formatDate(maxSelectable);

    // 上一行语句末尾必须加分号，避免ASI解析错误
    [expectedEndInput, endInput].forEach(input => {
      input.min = minStr;
      input.max = maxStr;
      // 清空不在合法区间的旧值
      if (input.value && (input.value < minStr || input.value > maxStr)) {
        input.value = '';
      }
    });
  });
});

HTML代码 #

<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<input type="date" id="StartDate" />
<input type="date" id="ExpectedEndDate" />
<input type="date" id="EndDate" />

• 补全语句分号，解决JS自动分号插入导致的逻辑异常
• 用原生Date对象的setDate/setMonth方法计算偏移日期，自动处理跨月、跨年的边界情况，不会生成无效日期
• 新增格式化方法自动补前导零，保证日期字符串完全符合原生日期输入框的格式要求
• 增加旧值校验，避免切换开始日期后，已选的结束日期落在非法区间

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