动态计算到期日期：基于创建日期和月份数自动生成截止日期_技术教程

本文介绍如何使用原生 javascript 实现表单中“创建日期”与“月份数”联动更新“到期日期”，支持自动处理月末边界（如1月31日+1个月→2月28/29日），并确保日期格式兼容 html5 `` 及后端 php/mysql 存储。

在构建任务管理、合同登记或工单系统等业务表单时，常需根据「创建日期」和用户输入的「月份数」自动推算「到期日期」。HTML 原生要求值为 YYYY-MM-DD 格式，而 JavaScript 的 Date 对象直接加月可能引发日期溢出问题（例如 2025-01-31 加 1 个月会错误变为 2025-03-02）。以下方案提供健壮、无依赖的解决方案：

✅ 完整实现代码


  创建日期

  



  月份数

  



  到期日期（自动计算）

// 获取 DOM 元素
const dateCreated = document.getElementById("date-created");
const amtOfMonths = document.getElementById("amt-of-months");
const dueDateInput = document.getElementById("due-date");

// 监听两个输入字段的变化
dateCreated.addEventListener("change", updateDueDate);
amtOfMonths.addEventListener("change", updateDueDate);

function updateDueDate() {
  // 确保两个字段均有有效值
  if (!dateCreated.value || !amtOfMonths.value) {
    dueDateInput.value = "";
    return;
  }

  const dueDate = addMonths(dateCreated.value, parseInt(amtOfMonths.value, 10));
  dueDateInput.value = formatDateForInput(dueDate); // 输出 YYYY-MM-DD
}

// 安全地为日期添加指定月数（自动处理月末天数变化）
function addMonths(dateString, months) {
  const date = new Date(dateString);
  const originalDay = date.getDate();

  // 先加月数
  date.setMonth(date.getMonth() + months);

  // 若目标月份该日不存在（如1月31日→2月），则回退到最后一天
  if (date.getDate() !== originalDay) {
    date.setDate(0); // 设为上月最后一天
  }
  return date;
}

// 将 Date 对象转为标准 HTML5 date 输入所需格式：YYYY-MM-DD
function formatDateForInput(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  return `${year}-${month}-${day}`;
}

⚠️ 关键注意事项

日期格式严格匹配：仅接受 YYYY-MM-DD 字符串，不可用 toLocaleDateString()（它输出 YYYY/MM/DD 或本地格式），必须手动格式化。
月末逻辑鲁棒性：addMonths() 函数通过 setDate(0) 自动修正跨月天数异常（如 2025-01-31 + 1 month → 2025-02-29），避免手动判断闰年或各月天数。
空值与非法输入防护：代码显式检查 value 是否为空字符串，并在任一字段缺失时清空「到期日期」，防止残留错误值。
PHP 后端兼容性：生成的 YYYY-MM-DD 格式可直接被 MySQL DATE 类型接收；PHP 接收时无需额外解析，$_POST['due-date'] 可直存数据库。