JavaScript日期计算与HTML日期输入框的max属性动态设置指南

let inputDate = new Date(); // 假设这是初始日期，例如今天
console.log("原始日期:", inputDate.toLocaleDateString());

// 增加21天
inputDate.setDate(inputDate.getDate() + 21);
console.log("增加21天后的日期:", inputDate.toLocaleDateString());

<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>

// 当起始日期输入框的值改变时，动态计算并设置结束日期的max属性
document.addEventListener("DOMContentLoaded", function() {
    const startDateInput = document.getElementById("myTextInputID");
    const endDateInput = document.getElementsByName('end_date')[0];
    const panelDiv = document.getElementById("panel");
    const showEndDateBtn = document.querySelector(".flip");

    // 点击按钮显示结束日期输入框
    showEndDateBtn.onclick = function() {
        if (startDateInput.value !== "") {
            panelDiv.style.display = "block";
            // 确保在显示时也更新max属性
            updateEndDateMax();
        } else {
            alert("起始日期不能为空！");
        }
    };

    // 当起始日期改变时，自动更新结束日期的max属性
    startDateInput.addEventListener("change", updateEndDateMax);

    function updateEndDateMax() {
        const inputValue = startDateInput.value;

        if (inputValue === "") {
            // 如果起始日期为空，可以清除max属性或给出提示
            endDateInput.removeAttribute("max");
            return;
        }

        // 1. 将输入值转换为Date对象
        const inputDate = new Date(inputValue);

        // 2. 增加21天
        inputDate.setDate(inputDate.getDate() + 21);

        // 3. 格式化为 "YYYY-MM-DD" 字符串
        // toISOString() 返回 "YYYY-MM-DDTHH:mm:ss.sssZ" 格式，取前10位即可
        const maxDateString = inputDate.toISOString().split('T')[0];

        // 4. 设置结束日期输入框的max属性
        endDateInput.setAttribute("max", maxDateString);

        console.log("起始日期:", inputValue);
        console.log("计算后的最大结束日期:", maxDateString);
    }
});