如何为指定ID的输入框填充日期：今日及延后5日日期

嘿，这个需求很常见，我来给你写个简单靠谱的实现方案！

首先先确认你的输入框结构：

输入框代码如下：

<input type='text' class='input-sm form-control text-center' id='start' name='start' /> 
<input type='text' class='input-sm form-control text-center ' id='end' name='end' />

接下来用JavaScript就能轻松搞定自动填充，核心思路就是：获取今日日期并格式化，计算5天后的日期再格式化，最后分别赋值给对应的输入框。

完整代码实现 #

<script>
// 等待DOM加载完成再执行，避免找不到输入框元素
document.addEventListener('DOMContentLoaded', function() {
  // 获取今日日期
  const today = new Date();

  // 定义格式化函数，输出和示例一致的「月/日/年」格式
  function formatDate(date) {
    const month = date.getMonth() + 1; // 注意JS的月份是0-11，要加1才是实际月份
    const day = date.getDate();
    const year = date.getFullYear();
    return `${month}/${day}/${year}`;
  }

  // 给start输入框填充今日日期
  document.getElementById('start').value = formatDate(today);

  // 计算5天后的日期：复制一个新的Date对象，避免修改原日期
  const fiveDaysLater = new Date(today);
  fiveDaysLater.setDate(today.getDate() + 5); // JS会自动处理跨月、跨年的情况，不用额外判断

  // 给end输入框填充5天后的日期
  document.getElementById('end').value = formatDate(fiveDaysLater);
});
</script>

可选优化：日期补零 #

如果希望月份和日期始终显示为两位数（比如05/02/2018而非5/02/2018），可以把格式化函数改成这样：

function formatDate(date) {
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const year = date.getFullYear();
  return `${month}/${day}/${year}`;
}

这样就能完美实现你想要的效果啦！

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