主页 / coding / 问题 / 76923185
Accepted
Unnikrishnan KJ
Asked: 2023-08-17 23:56:12 +0800 CST

如何在react.js项目中显示相对时间

  • 772

我正在使用 构建社交媒体应用程序next.js。我想显示我的项目中的相对时间。

预期输出：

刚刚 2 分钟前 1 小时前 2 天前

我想从MongoDB文档中检索时间文档

尝试使用momentand dayjs，但我在开始时遇到一些麻烦。谁能帮我？

reactjs

2 个回答

  1. Best Answer

    您可以使用react-timeago：

    import TimeAgo from 'react-timeago';

...
<TimeAgo date={date} />

    这将生成自动生成的文本，如下所示：

    2 minutes ago
3 days ago
4 months ago
1 year ago

    它们还支持自定义格式选项。

    • 1

  2. 您不需要使用任何外部 npm 包来执行此操作。

    export const getTimeDifference = (targetDate: string) => {
  const difference = new Date().getTime() - new Date(targetDate).getTime()

  if (difference > 0) {
    const timeLeft = {
      days: Math.floor(difference / (1000 * 60 * 60 * 24)),
      hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
      minutes: Math.floor((difference / 1000 / 60) % 60),
      seconds: Math.floor((difference / 1000) % 60),
    }
    return timeLeft
  }

  return undefined
}

    您可以在这里获取时差。

    和

    const timeDiff = getTimeDifference(your Mongodb time string)
const timeString = `${timeDiff.days} days ${timeDiff.hours} hours ${timeDiff.minutes} minutes ${timeDiff.seconds} seconds`
    • 1

相关问题