ReactJS如何将日期转换为小时/分钟前或天/小时前的相对时间格式

核心实现分三步：解析输入的日期字符串、计算与当前时间的毫秒差、判断是否为同天后按规则拼接输出字符串，以下是可直接复用的实现方案。

无依赖原生JS实现 #

不需要引入任何第三方库，直接写工具函数即可，完全匹配要求的输出格式：

const formatRelativeTime = (dateInput) => {
  // 解析输入的日期，支持拿到的 "June 10, 2022, 3:29 PM" 格式
  const targetDate = new Date(dateInput);
  const now = new Date();
  const diff = now.getTime() - targetDate.getTime();

  // 异常边界：未来时间直接返回提示
  if (diff < 0) return 'just now';

  // 时间单位毫秒换算
  const MINUTE = 60 * 1000;
  const HOUR = 60 * MINUTE;
  const DAY = 24 * HOUR;

  // 判断是否为同一天：年、月、日三个维度完全一致
  const isSameDay = 
    targetDate.getFullYear() === now.getFullYear() &&
    targetDate.getMonth() === now.getMonth() &&
    targetDate.getDate() === now.getDate();

  if (isSameDay) {
    const hours = Math.floor(diff / HOUR);
    const minutes = Math.floor((diff % HOUR) / MINUTE);
    // 不足1小时只显示分钟
    if (hours === 0) return `${minutes} minutes ago`;
    // 单复数适配
    const hourText = hours === 1 ? 'hour' : 'hours';
    const minuteText = minutes === 1 ? 'minute' : 'minutes';
    return `${hours} ${hourText}, ${minutes} ${minuteText} ago`;
  } else {
    const days = Math.floor(diff / DAY);
    const hours = Math.floor((diff % DAY) / HOUR);
    const dayText = days === 1 ? 'day' : 'days';
    const hourText = hours === 1 ? 'hour' : 'hours';
    return `${days} ${dayText}, ${hours} ${hourText} ago`;
  }
};

组件中使用 #

直接在React组件里调用函数传入日期字符串即可：

function Comment({ createTime, content }) {
  return (
    <div className="comment-item">
      <p className="comment-content">{content}</p>
      <span className="comment-time">{formatRelativeTime(createTime)}</span>
    </div>
  )
}

// 测试：传入 "June 10, 2022, 3:29 PM" 会自动按规则计算输出对应相对时间

如果需要实现时间自动刷新，只需要在组件挂载时开启1分钟间隔的定时器，定时更新当前时间触发重渲染即可。

基于dayjs的轻量实现 #

如果项目中已经使用dayjs做日期处理，可以直接搭配其官方的relativeTime插件实现，不需要自己写差值计算逻辑：

import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(relativeTime);

// 直接调用即可，可通过插件配置自定义输出阈值匹配格式要求
const formatRelativeTime = (dateInput) => dayjs(dateInput).fromNow();

dayjs整体体积只有2KB左右，不会给项目带来明显的包体积负担。

注意：拿到的June 10, 2022, 3:29 PM属于ECMAScript标准支持的日期格式，原生Date和主流日期库都可以直接解析，不需要额外做格式转换。如果后续遇到非标准日期格式，再单独加解析逻辑即可。

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