为什么HTML5日期选择器的min属性超出当年后失效？（Chrome动态联动场景）

原生<input type="date">的min/max属性要求严格匹配HTML规范的YYYY-MM-DD格式，即月份、日期必须为两位数字，不足两位需补充前导零。
现有代码拼接日期字符串时直接使用月份、日期的原始数值，未做补零处理，生成的非规范格式字符串（如2025-1-1）会触发Chrome的解析兼容问题：同一年内的非规范日期可被宽松解析，但跨年场景下解析逻辑会直接失效，导致min属性的限制不生效。

统一对月份、日期做两位补零处理，生成符合规范的日期字符串，替换原有手动拼接逻辑。

修改要点 #

• 新增通用补零工具方法，将单数字的月、日转换为带前导零的两位字符串
• 替换start_date最小日期、end_date最小日期的拼接逻辑
• 清空start_date时同步移除end_date上残留的旧min属性，避免异常状态残留

页面HTML #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="toMyStylesheets"/>
    <title>MyTitle</title>
</head>
<body>
  <input type="date" name="start_date" id="start_date" />
  <input type="date" name="end_date" id="end_date" disabled />
</body>
</html>

交互JavaScript #

let startDate = document.getElementById('start_date');
let endDate = document.getElementById('end_date');

// 补零工具：将数字转为两位字符串，不足两位前补0
const padZero = (num) => num.toString().padStart(2, '0');

// 生成当前日期的规范格式字符串
let currentDate = new Date();
let currentYear = currentDate.getFullYear();
let currentMonth = padZero(currentDate.getMonth() + 1);
let currentDay = padZero(currentDate.getDate());
let today = `${currentYear}-${currentMonth}-${currentDay}`;

$(document).ready(() => {
  startDate.setAttribute("min", today);
});

startDate.oninput = () => {
  if (startDate.value.length > 0) {
    endDate.disabled = false;
    // 计算选中日期的次日
    let fullSelectedDate = new Date(startDate.value);
    fullSelectedDate.setDate(fullSelectedDate.getDate() + 1);
    // 生成规范格式的次日字符串
    let nextYear = fullSelectedDate.getFullYear();
    let nextMonth = padZero(fullSelectedDate.getMonth() + 1);
    let nextDay = padZero(fullSelectedDate.getDate());
    let nextDateStr = `${nextYear}-${nextMonth}-${nextDay}`;
    
    endDate.setAttribute("min", nextDateStr);
  } else {
    endDate.disabled = true;
    endDate.removeAttribute("min");
    endDate.value = "";
  }
};

可增加手动输入值的校验逻辑，避免用户绕过日期选择器输入不符合限制的内容：

endDate.oninput = () => {
  const minLimit = endDate.getAttribute("min");
  if (minLimit && endDate.value < minLimit) {
    endDate.value = "";
  }
}

内容的提问来源于stack exchange，提问作者Klem Lloyd Mwenya