如何通过添加月份实现日期过期？解决JS中input变量失效问题

问题根源 #

• 字符串与数字拼接错误：单选按钮的value属性默认是字符串类型，直接和date.getMonth()返回的数字相加时，会执行字符串拼接而非数值加法。比如原月份是0（1月），加上字符串"3"会得到"03"，用这个作为数组索引会超出months数组的有效范围（0-11），导致返回undefined。
• 未处理未选中单选按钮的情况：如果没有选中任何单选按钮，input会保持初始空字符串，同样会导致索引计算错误。
• 未处理月份溢出与日期合法性：直接通过数组索引获取月份名称，无法处理月份超过12的情况（比如10月加3个月应该是次年1月），也无法处理31号加1个月到小月的日期调整问题。

修复步骤与代码示例 #

1. 正确获取并转换月份数值 #

将单选按钮的value转换为整数，确保数值加法正确执行，同时处理未选中的情况：

2. 使用Date对象自动处理日期逻辑 #

利用Date的setMonth方法，它会自动处理年份进位和日期合法性（比如1月31号加1个月会自动调整为2月的最后一天）。

完整修复代码 #

// 获取单选按钮元素
let inputThree = document.getElementById("input_3");
let inputSix = document.getElementById("input_6");
let inputTwelve = document.getElementById("input_12");

// 初始化要添加的月份数，处理未选中情况
let addMonths = 0;
if (inputThree.checked) {
  addMonths = parseInt(inputThree.value, 10); // 转换为整数
} else if (inputSix.checked) {
  addMonths = parseInt(inputSix.value, 10);
} else if (inputTwelve.checked) {
  addMonths = parseInt(inputTwelve.value, 10);
} else {
  // 未选中时的提示，可根据需求调整
  document.getElementById('expiries').textContent = "请选择过期月份";
  return;
}

// 创建原日期的副本，避免修改原date对象
const expiryDate = new Date(date);
// 添加月份，自动处理年份进位和日期调整
expiryDate.setMonth(expiryDate.getMonth() + addMonths);

// 提取过期日期的各个部分
const day = expiryDate.getDate();
const year = expiryDate.getFullYear();
// 假设months是预定义的月份名称数组，如["Jan", "Feb", ..., "Dec"]
const addMonth = months[expiryDate.getMonth()];

// 计算日期序数词（st/nd/rd/th）
let th;
if (day > 3 && day < 21) {
  th = 'th';
} else {
  switch (day % 10) {
    case 1: th = 'st'; break;
    case 2: th = 'nd'; break;
    case 3: th = 'rd'; break;
    default: th = 'th';
  }
}

// 更新DOM内容
document.getElementById('expiries').innerHTML = `${day}<sup>${th}</sup>&nbsp;${addMonth}&nbsp;${year}`;

关键说明 #

• 数值转换：使用parseInt(value, 10)确保字符串转整数，避免字符串拼接错误。
• 日期副本：创建expiryDate作为原日期的副本，防止修改原date对象影响其他逻辑。
• 自动日期处理：setMonth方法会自动处理月份溢出（比如11月+1个月=次年0月，年份自动+1），以及日期合法性调整（比如31号加1个月到小月时，自动设为当月最后一天）。

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