JavaScript日期操作：动态计算并设置HTML日期输入框的最大值

let myDate = new Date(); // 获取当前日期
myDate.setDate(myDate.getDate() + 21); // 在当前日期的基础上增加21天

<form action ="form_page.php" method="post">
      <div id="standardPanel">*Task / Person: <input type="text" name="product" required ></div>
      <div id="standardPanel">*Description: <input type="text" name="customer" required ></div>
      <div id="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() {
  // 1. 获取起始日期输入框的DOM元素和其值
  var startDateElement = document.getElementById("myTextInputID");
  var startDateValue = startDateElement.value;

  // 2. 检查起始日期是否为空
  if (startDateValue === "") {
    alert("起始日期不能为空！");
    return; // 如果为空，则停止执行
  }

  // 3. 显示结束日期面板
  document.getElementById("panel").style.display = "block";

  // 4. 将起始日期字符串转换为Date对象
  // new Date("YYYY-MM-DD") 可以正确解析此格式
  var initialDate = new Date(startDateValue);

  // 5. 在Date对象上增加21天
  // 使用setDate()方法，getDate()获取当前日期，然后加上21
  initialDate.setDate(initialDate.getDate() + 21);

  // 6. 将计算出的新日期格式化为 "YYYY-MM-DD" 字符串
  // HTML input type="date" 的 max 属性要求此格式
  var year = initialDate.getFullYear();
  // getMonth() 返回 0-11，所以需要加1
  var month = (initialDate.getMonth() + 1).toString().padStart(2, '0'); // 确保月份是两位数
  var day = initialDate.getDate().toString().padStart(2, '0'); // 确保日期是两位数

  var maxDateString = `${year}-${month}-${day}`;

  // 7. 获取结束日期输入框的DOM元素，并设置其max属性
  var endDateElement = document.getElementsByName('end_date')[0];
  endDateElement.setAttribute("max", maxDateString);

  // 8. (可选) 也可以将结束日期的默认值设置为计算出的日期
  // endDateElement.value = maxDateString;
}
</script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var startDateInput = document.getElementById('myTextInputID');
    var endDatePanel = document.getElementById('panel');
    var endDateInput = document.getElementsByName('end_date')[0];

    // 当起始日期输入框的值发生变化时触发
    startDateInput.addEventListener('change', function() {
        var startDateValue = this.value; // 'this' 指向触发事件的元素 (startDateInput)

        if (startDateValue === "") {
            // 如果起始日期被清空，隐藏面板并移除max属性和值
            endDatePanel.style.display = "none";
            endDateInput.removeAttribute("max");
            endDateInput.value = "";
            return;
        }

        endDatePanel.style.display = "block"; // 显示结束日期面板

        var initialDate = new Date(startDateValue);
        initialDate.setDate(initialDate.getDate() + 21);

        var year = initialDate.getFullYear();
        var month = (initialDate.getMonth() + 1).toString().padStart(2, '0');
        var day = initialDate.getDate().toString().padStart(2, '0');
        var maxDateString = `${year}-${month}-${day}`;

        endDateInput.setAttribute("max", maxDateString);
        // 可选：设置结束日期的默认值
        // endDateInput.value = maxDateString;
    });

    // 如果仍需要一个按钮来显式触发（例如，当起始日期已有值但面板未显示时），
    // 可以让按钮只负责显示面板，日期计算逻辑由change事件处理。
    // 或者，按钮可以模拟触发change事件：
    // document.querySelector('.flip').onclick = function() {
    //     startDateInput.dispatchEvent(new Event('change'));
    // };
});
</script>