基于起始日期自动计算20个月后结束日期的JS实现

以下是仅使用JavaScript实现的方案，当用户选择起始日期后，系统会自动计算并填充间隔20个月的结束日期到目标输入框：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>自动计算结束日期</title>
</head>
<body>
    <label for="sourceDate">起始日期:</label>
    <input type="date" id="sourceDate" />
    <br /><br />
    <label for="targetDate">结束日期:</label>
    <input type="date" id="targetDate" />

    <script>
        // 等待DOM完全加载
        document.addEventListener("DOMContentLoaded", function () {
            // 获取输入元素
            const sourceDateElement = document.getElementById("sourceDate");
            const targetDateElement = document.getElementById("targetDate");

            // 监听起始日期的变化事件
            sourceDateElement.addEventListener("change", function () {
                const sourceDateValue = sourceDateElement.value;
                if (!sourceDateValue) return; // 未选择日期时直接返回

                // 创建日期对象并计算20个月后的日期
                const startDate = new Date(sourceDateValue);
                const endDate = new Date(startDate);
                endDate.setMonth(endDate.getMonth() + 20);

                // 将日期转换为date input要求的YYYY-MM-DD格式
                const formattedDate = endDate.toISOString().split('T')[0];
                
                // 更新目标输入框的值
                targetDateElement.value = formattedDate;
            });
        });
    </script>
</body>
</html>

关键说明： #

• DOM加载监听：确保在DOM元素完全渲染后再获取输入框，避免出现元素未找到的错误
• 日期计算逻辑：setMonth()方法会自动处理跨年和月份溢出情况（比如10月加20个月，会自动转换为2年后的6月）
• 格式适配：date类型输入框仅接受YYYY-MM-DD格式的字符串，通过toISOString()生成标准日期字符串后截取前10位，即可满足格式要求
• 空值处理：增加未选择日期时的返回逻辑，避免无效计算

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