基于Date-fns实现交易日期友好显示的优化方案咨询

问题分析 #

你需要将交易日期显示为「今日/昨日/X天前」的形式，当前基于Date-fns的代码存在逻辑偏差：例如将2024-07-16T23:59:17.178Z判定为「今日」，同时对跨天时间间隔（如2024-07-17T23:59与2024-07-16T00:01）的天数计算规则存疑。

银行类APP的标准实现逻辑 #

银行类产品对日期展示的核心原则是以自然日历日为判定单位，完全忽略时分秒的影响，具体规则：

• 今日：交易日期的日历日与当前日历日完全一致（无论交易发生在00:01还是23:59）
• 昨日：交易日期的日历日是当前日历日的前一天
• X天前：交易日期与当前日历日的差值大于1天，直接显示差值天数

针对跨天时间间隔的问题：2024-07-17T23:59和2024-07-16T00:01的日历日差值为1，银行会判定为1天间隔——只要日期部分差1天，不管实际小时数多久，都按1天计算。

代码修正方案 #

核心修复点是使用Date-fns的differenceInCalendarDays函数（专门计算日历日差值，忽略时分秒），替代原有的时间范围判断，同时简化逻辑：

const { differenceInCalendarDays } = window.dateFns;

const transactions = [
  { amount: 200, date: new Date('2024-07-16T23:59:17.178Z') },
  { amount: 455.23, date: new Date('2024-07-16T07:42:02.383Z') },
  { amount: -306.5, date: new Date('2024-07-15T09:15:04.904Z') },
  { amount: 25000, date: new Date('2024-07-14T10:17:24.185Z') },
  { amount: -642.21, date: new Date('2024-07-15T00:01:59.604Z') },
  { amount: -133.9, date: new Date('2024-07-15T23:59:17.194Z') },
  { amount: 79.97, date: new Date('2024-07-16T00:01:17.929Z') },
  { amount: 1300, date: new Date('2024-07-16T23:59:36.790Z') }
];

const container = document.getElementById('transactions');

function formatTransactionDate(date) {
  const now = new Date('2024-07-17T00:01:17.178Z'); // 实际场景可替换为new Date()获取当前时间
  const dayDiff = differenceInCalendarDays(now, date);

  if (dayDiff === 0) {
    return "今日";
  } else if (dayDiff === 1) {
    return "昨日";
  } else {
    return `${dayDiff}天前`;
  }
}

function displayTransactions() {
  transactions.forEach(transaction => {
    const formattedDate = formatTransactionDate(transaction.date);
    const transactionElement = document.createElement('div');
    transactionElement.classList.add('transaction');
    transactionElement.innerHTML = `
      <span>Amount:</span> ${transaction.amount.toFixed(2)}<br>
      <span>Date:</span> ${formattedDate}<br>
    `;
    container.appendChild(transactionElement);
  });
}

// Display transactions on page load
displayTransactions();

修正说明 #

1. 日历日差值计算：differenceInCalendarDays直接比较两个日期的日历日部分，不会被时分秒或时区转换干扰，完美匹配银行的判定逻辑
2. 逻辑简化：去掉复杂的时间范围判断，直接通过差值结果返回对应文案，减少出错概率
3. 时区兼容性：Date-fns默认使用本地时区处理日期，若需统一使用业务时区（如北京时间），可搭配时区转换函数进行调整

测试验证 #

针对原问题中的异常案例：

• 2024-07-16T23:59:17.178Z与2024-07-17T00:01:17.178Z的日历日差值为1，会被判定为「昨日」，符合预期
• 2024-07-17T23:59与2024-07-16T00:01的日历日差值为1，按银行规则计为1天间隔

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