如何使用JavaScript在日期字段中添加指定天数？

你当前代码的核心问题是：把字符串格式的日期和毫秒数做加法，这本质是字符串拼接，不是日期的增量计算，所以得到的是无效的日期字符串，无法正常显示。

比如执行 "2024-05-20" + 31536000000，结果会是 "2024-05-2031536000000"，完全不是你想要的一年后的日期。

正确实现思路 #

1. 基于原始的Date对象直接进行天数增量计算（不要先转成字符串再操作）
2. 封装一个通用的日期格式化函数，把Date对象转成YYYY-MM-DD格式的字符串，避免重复代码
3. 分别计算增量后的日期，格式化后赋值给对应的输入框

完整可运行代码 #

JavaScript 部分 #

// 封装日期格式化函数：将Date对象转为YYYY-MM-DD格式的字符串
function formatDate(date) {
  const year = date.getFullYear();
  // 月份从0开始，所以要+1，不足两位补0
  const month = ("0" + (date.getMonth() + 1)).slice(-2);
  // 日期不足两位补0
  const day = ("0" + date.getDate()).slice(-2);
  return `${year}-${month}-${day}`;
}

// 获取当前日期
const now = new Date();

// 计算当前日期加365天的日期
const dateA = new Date(now);
dateA.setDate(dateA.getDate() + 365);

// 计算当前日期加650天的日期
const dateB = new Date(now);
dateB.setDate(dateB.getDate() + 650);

// 格式化日期并赋值给输入框
$('#input1').val(formatDate(dateA));
$('#input2').val(formatDate(dateB));

HTML 部分 #

<input type="text" id="input1" placeholder="加365天的日期">
<input type="text" id="input2" placeholder="加650天的日期">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

关键说明 #

• 使用new Date(now)复制原始日期对象，避免修改原始的now对象
• setDate()方法会自动处理月份、年份的进位（比如2月28日加1天会自动转到3月1日，跨年也会自动处理）
• 封装格式化函数后，后续需要格式化日期时直接调用即可，减少重复代码

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