JavaScript中如何将日期差计算变量diffMonthsGlobe转为全局变量供其他函数调用？

核心问题说明 #

1. 页面初始化时直接调用getValue()，此时两个日期输入框还没有用户选择的数值，转换出来的日期对象无效，首次计算得到的diffMonthsGlobe是NaN，这是拿不到有效值的主要原因。
2. 原有月份差计算逻辑误差大：按每月4周/28天折算的方式没有考虑不同月份的天数差异，计算结果和实际月份差不符。
3. 隐式全局变量问题：代码中diffMonths没有加变量声明关键字，会意外污染全局作用域，可能引发未知异常。

修复后代码 #

JavaScript 代码 #

var diffMonthsGlobe;

function getValue() {
  // 读取输入值
  const startDate = document.getElementById("startDate").value;
  const endDate = document.getElementById("endDate").value;

  // 增加校验：两个日期都选了才执行计算
  if (!startDate || !endDate) return;

  const date1 = new Date(endDate);
  const date2 = new Date(startDate);

  // 更准确的月份差计算逻辑
  let months = (date2.getFullYear() - date1.getFullYear()) * 12;
  months += date2.getMonth() - date1.getMonth();
  const diffMonths = Math.abs(months);
  
  // 给全局变量赋值
  diffMonthsGlobe = diffMonths;

  // 测试打印
  console.log('开始日期:', startDate);
  console.log('结束日期:', endDate);
  console.log('间隔月份:', diffMonths + " 个月");

  // 直接调用数据库写入函数即可，不需要依赖全局变量取值，更稳妥
  // saveToDatabase(diffMonthsGlobe);
  
  return diffMonthsGlobe;
}

// 页面初始化时不需要调用getValue，等用户选完日期触发onchange时才会执行
// getValue();
// 不要在初始化时打印全局变量，此时还没有有效值
// console.log(diffMonthsGlobe + " Months");

HTML 代码（无需改动） #

<input type="date" class="form-control" placeholder="Start Date *" name="startDate" id="startDate" required onchange="getValue()" />
<input type="date" class="form-control" placeholder="End Date *" name="endDate" id="endDate" required onchange="getValue()" />

取值说明 #

• 全局变量diffMonthsGlobe只有在用户选择完两个日期之后才会被赋有效值，所有需要用到该值的逻辑，要么在getValue函数内直接调用执行，要么等用户完成日期选择操作后再读取该变量。
• 如果需要按整月（比如2023-1-15到2023-2-10不足1个月）计算，可以在月份差计算逻辑中补充日期判断：如果结束日期的日数小于开始日期的日数，就将计算得到的月份差减1即可。

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