Sometimes a full timestamp like 2019-12-30 16:25:07 feels too rigid on a blog page. A relative format such as “a few seconds ago” or “2 hours ago” is much easier to read.

If the time has already been rendered directly into the page DOM, the simplest solution is to format it on the front end with a JavaScript date library. Two libraries fit this job well: Moment.js and Day.js.

After formatting, the displayed time can look like this:

<table> <thead> <tr> <th>Range</th> <th>Key</th> <th>Example output</th> </tr> </thead> <tbody> <tr> <td>0 to 44 seconds</td> <td>s</td> <td>a few seconds ago</td> </tr> <tr> <td>unset</td> <td>SS</td> <td>44 seconds ago</td> </tr> <tr> <td>45 to 89 seconds</td> <td>m</td> <td>a minute ago</td> </tr> <tr> <td>90 seconds to 44 minutes</td> <td>mm</td> <td>2 minutes ago ... 44 minutes ago</td> </tr> <tr> <td>45 to 89 minutes</td> <td>h</td> <td>an hour ago</td> </tr> <tr> <td>90 minutes to 21 hours</td> <td>hh</td> <td>2 hours ago ... 21 hours ago</td> </tr> <tr> <td>22 to 35 hours</td> <td>d</td> <td>a day ago</td> </tr> <tr> <td>36 hours to 25 days</td> <td>dd</td> <td>2 days ago ... 25 days ago</td> </tr> <tr> <td>26 to 45 days</td> <td>M</td> <td>a month ago</td> </tr> <tr> <td>45 to 319 days</td> <td>MM</td> <td>2 months ago ... 10 months ago</td> </tr> <tr> <td>320 to 547 days (1.5 years)</td> <td>y</td> <td>a year ago</td> </tr> <tr> <td>548+ days</td> <td>yy</td> <td>2 years ago ... 20 years ago</td> </tr> </tbody> </table>

This feels much more natural on the page, so here is how to do it.

Using Moment.js

First, include the library from a CDN.

Two files are needed:

1. moment.min.js as the main dependency.
2. moment-with-locales.min.js for localization support.

The DOM structure can be as simple as this:

<small class="cr-time">2019-12-30 16:25:07</small>

Using jQuery makes the DOM update straightforward:

moment.locale('zh-CN');//设置为中文
$(function () {
    $('.cr-time').each(function (i, e) {
        $(e).text(moment($(e).text()).fromNow())
    });
});

At this point, the relative time formatting is fully working.

There is one catch, though. Moment’s official site now clearly advises against choosing it for new projects. Their position is that while many existing projects will continue using it, Moment is now a legacy project in maintenance mode. It is not dead, but its active era is effectively over.

That is a bit awkward if you only notice this after testing everything and already putting it online. Still, if you check the recommended alternatives, one name shows up quickly: Day.js.

Day.js is designed as a minimalist alternative to Moment.js with a very similar API. It is not a strict drop-in replacement, but if you are already familiar with Moment’s syntax, switching over is easy.

Switching to Day.js

The replacement process is fast because the API style is almost the same. Only a few small changes are needed.

Include these CDN files:

<script src="https://unpkg.com/[email protected]/dayjs.min.js"></script>
<script src="https://unpkg.com/[email protected]/plugin/relativeTime.js"></script>
<script src="https://unpkg.com/[email protected]/locale/zh-cn.js"></script>

From top to bottom, those are:

• the core library
• the relativeTime plugin
• the locale file

The DOM structure stays exactly the same as before.

Then use this jQuery code:

dayjs.locale('zh-cn')// 设置中文
dayjs.extend(window.dayjs_plugin_relativeTime)
$(function () {
    $('.cr-time').each(function (i, e) {
        $(e).text(dayjs($(e).text()).fromNow())
    });
});

In practice, the main change is just replacing moment with dayjs, plus enabling the relative time plugin. After that, it runs smoothly.

If all you want is to convert timestamps already sitting in your HTML into a more human-friendly “time ago” format, both approaches work. For older projects, Moment.js can still do the job. For newer ones, Day.js is the more sensible choice.