JavaScript日期比较异常问题：出生日期校验逻辑失效排查

我遇到一个问题，想要比较出生日期与今日日期，要求出生日期必须早于今日日期。该逻辑起初可以正常工作，但当我从日期选择器（datepicker）中选择另一个早于今日的日期时，仍然会弹出错误提示框，这不符合预期。请问有人知道这是怎么回事吗？

相关代码如下：

function submitForm() { 
  var dateborn = document.getElementById('dateborn').value; 
  var today = document.getElementById('today').value; 
  if(dateborn != '') { 
    if(dateborn > today) { 
      swal("Oops", "Date born must less than date today", "error"); 
      return false; 
    } 
  } 
}

回答 #

嘿，这个问题我之前排查过类似的，核心问题出在你直接拿字符串来比较日期了！

为什么会出问题？ #

虽然像YYYY-MM-DD这种标准格式的日期字符串，偶尔能靠字典序蒙对比较结果，但只要日期格式不统一（比如日期选择器返回DD-MM-YYYY，而你的today输入框是YYYY-MM-DD），或者today的取值有格式偏差，就会出现逻辑混乱。

举个真实的坑：如果dateborn是10-05-2024（5月10日），today是05-06-2024（6月5日），字符串比较时"10-05-2024" > "05-06-2024"会返回true——因为第一个字符1比0大，但实际这个出生日期明明早于今日，却错误触发了提示框。

另外还要检查下你的today输入框是怎么赋值的？如果是手动输入或者非标准逻辑生成的，很可能格式和日期选择器的输出不匹配，这也是常见诱因。

怎么解决？ #

把字符串转换成Date对象来比较才是靠谱的做法，不管格式是什么（只要能被Date构造函数正确解析），都能得到准确的比较结果。修改后的代码如下：

function submitForm() { 
  var datebornStr = document.getElementById('dateborn').value; 
  var todayStr = document.getElementById('today').value; 

  if(datebornStr !== '') { 
    // 把字符串转成Date对象
    const dateborn = new Date(datebornStr);
    const today = new Date(todayStr);

    // 先校验日期是否有效，避免无效日期导致的逻辑错误
    if (isNaN(dateborn.getTime()) || isNaN(today.getTime())) {
      swal("Oops", "Invalid date format", "error");
      return false;
    }

    // 比较Date对象，这样才是真正的日期大小比较
    if(dateborn > today) { 
      swal("Oops", "Date born must be earlier than today", "error"); 
      return false; 
    } 
  } 
}

额外优化建议 #

1. 别用输入框存今日日期：直接用JS生成当前日期更靠谱，避免手动修改或格式错误：

   // 生成YYYY-MM-DD格式的今日日期字符串
   const today = new Date();
   const todayStr = `${today.getFullYear()}-${String(today.getMonth()+1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
   // 可以把这个值设置到today输入框，或者直接用Date对象比较
   

2. 统一所有日期格式：推荐用YYYY-MM-DD，这是JS的Date构造函数最容易解析的格式，减少踩坑概率。
3. 保留有效性校验：上面代码里的isNaN(dateborn.getTime())能帮你过滤掉像2024-02-30这种无效日期，避免后续逻辑出错。

这样修改后，你的日期比较逻辑就会稳定可靠，不会再出现莫名其妙的错误提示啦！

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