本文详解如何使用纯 JavaScript 实现：当用户在起始日期（）中选择日期后，自动计算并填充结束日期为起始日期加 20 个月，并正确格式化为 YYYY-MM-DD 字符串写入目标输入框。
本文详解如何使用纯 javascript 实现：当用户在起始日期（``）中选择日期后，自动计算并填充结束日期为起始日期加 20 个月，并正确格式化为 `yyyy-mm-dd` 字符串写入目标输入框。
在 HTML 表单中，<input type="date"> 的 value 属性要求严格遵循 YYYY-MM-DD 格式的字符串（如 "2024-05-15"），而 Date 对象的 toString() 或直接赋值 targetDateElement.value = d2 会失败——因为浏览器无法自动将 Date 实例转换为合规字符串，导致输入框清空或显示无效。
正确做法是手动提取年、月、日，并补零格式化。以下是完整、健壮的实现方案：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Date Auto-Calculation (+20 Months)</title>
</head>
<body>
<label for="sourceDate">起始日期：</label>
<input type="date" id="sourceDate" />
<br /><br />
<label for="targetDate">结束日期（自动计算）：</label>
<input type="date" id="targetDate" readonly />
<script>
document.addEventListener("DOMContentLoaded", function () {
const sourceInput = document.getElementById("sourceDate");
const targetInput = document.getElementById("targetDate");
sourceInput.addEventListener("change", function () {
const sourceValue = sourceInput.value;
// 防御性检查：确保有有效日期值
if (!sourceValue) {
targetInput.value = "";
return;
}
const startDate = new Date(sourceValue);
// 避免修改原始日期对象，创建副本
const endDate = new Date(startDate);
// 关键：+20 个月（Date.setMonth 自动处理跨年与天数溢出）
endDate.setMonth(endDate.getMonth() + 20);
// 提取并格式化：年（4位）、月（2位补零）、日（2位补零）
const year = endDate.getFullYear();
const month = String(endDate.getMonth() + 1).padStart(2, '0'); // 注意：getMonth() 返回 0–11
const day = String(endDate.getDate()).padStart(2, '0');
targetInput.value = `${year}-${month}-${day}`;
});
});
</script>
</body>
</html>✅ 关键要点说明：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
-
setMonth()具备智能进位能力：例如2023-12-31+20 个月 →2025-08-31（而非错误地变成2025-08-31以外的日期）；若原日期为2023-01-31，加 1 个月得2023-02-28（自动适配二月天数），此行为符合业务预期。 - 使用
String().padStart(2, '0')替代'0' + x).slice(-2)更语义清晰且兼容性更好（ES2017+）。 - 添加
readonly属性防止用户误改目标日期，强化“只读计算结果”的语义。 - 必须校验
sourceInput.value是否为空，避免new Date("")生成Invalid Date导致后续报错。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
