JavaScript中如何将日期加21天并设置为end_date日期字段的max属性

你的代码存在两个核心问题导致功能不生效：

• 原生JavaScript的Date对象没有内置addDays方法，调用不存在的方法会直接抛出异常，后续代码无法执行
• type="date"的input元素的max属性只识别YYYY-MM-DD格式的字符串，直接传入Date对象会被转为不符合规范的字符串，无法被日期输入框识别

<form action ="form_page.php" method="post">
      <div class="standardPanel">*Task / Person: <input type="text" name="product" required ></div>
      <div class="standardPanel">*Description: <input type="text" name="customer" required ></div>
      <div class="standardPanel">*Date: <input id="myTextInputID" type="date" name="manufacture_one" required ></div>
      <p class="flip" onclick="showEndDate()">Click to add End Date</p>
      <div id="panel" style="display:none;">
        End Date: (holidays only) <input type="date" name="end_date">
      </div>
      <div><input id="submit" name="action" type="submit" value="submit"/></div>
</form>

<script>
function showEndDate() {
  const startDateInput = document.getElementById("myTextInputID");
  const startDateVal = startDateInput.value.trim();
  // 先判断起始日期是否为空
  if(!startDateVal) {
    alert("Date cannot be blank");
    return;
  }
  // 展示end date面板
  document.getElementById("panel").style.display = "block";
  // 转换为Date对象
  const startDate = new Date(startDateVal);
  // 加21天：用setDate方法实现日期偏移
  startDate.setDate(startDate.getDate() + 21);
  // 格式化日期为YYYY-MM-DD格式，注意月份从0开始计数，单个数字要补前导0
  const formatYear = startDate.getFullYear();
  const formatMonth = String(startDate.getMonth() + 1).padStart(2, '0');
  const formatDay = String(startDate.getDate()).padStart(2, '0');
  const maxDateStr = `${formatYear}-${formatMonth}-${formatDay}`;
  // 给end_date设置max属性
  document.getElementsByName('end_date')[0].setAttribute("max", maxDateStr);
}
</script>

• 你原代码中多个div使用了重复的id="standardPanel"，id在单页面中必须唯一，已经统一修改为class="standardPanel"
• 给#panel加了默认隐藏的style="display:none;"，避免页面加载时就显示结束日期选择框
• 调整了逻辑顺序：起始日期为空时直接终止函数执行，避免后续无效代码运行

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