Javascript library for human-friendly relative date formatting

Question

I'd like to display some dates as relative to the current date in a human-friendly format.

Examples of human-friendly relative dates:

10 seconds ago
20 minutes from now
1 day ago
5 weeks ago
2 months ago

Basically faithfully preserving the highest order of magnitude (and by preference, only shifting up units when passing 2 of those units - 5 weeks instead of 1 month).

Though I could live with a library that had less control and even more friendly dates like:

yesterday
tomorrow
last week
a few minutes ago
in a couple hours

Any popular libraries for this?

Why is "1 day ago" more "human friendly" than simply presenting the actual date and time? — RobG, Apr 16 '12 at 13:14
@RobG I would say it's more about avoiding switching contexts e.g. in a page that is mostly text and being read, the context switch to e.g. mm/dd/yy can cause pause. In a table of data, using that format might be more readable. It also depends on what the reader needs to do with the date e.g. whether "this happened n days ago" or "this happened before 1/1/1972" is actionable or otherwise appropriate to the reader's context. — wprl, May 15 '13 at 16:32
Perhaps, but it is confusing to see a list of events as "Yesterday...3 days ago...10/May...". I still need to convert them all to dates in my head to get a picture of when they occurred. Dates are concise and precise, "time ago" values are conversational, lack precision and are usually only helpful with the associated date. Maybe that's just me, but maybe not. :-) — RobG, May 16 '13 at 02:37
I would say it depends on the context. After all, you wouldn't say "I went fishing on 17th February 2014" if that was actually yesterday. There's much more of a brain pause there. This kind of text is perfect for a list of recent events. — Simon Williams, Feb 18 '14 at 12:43
@Dad—I don't consider myself a nerd and "normal" people do think that way when presented with a list of dates. — RobG, Aug 24 '14 at 22:24

score 115 · Accepted Answer · edited Jun 29 '17 at 17:18

115

Since I wrote this answer, a well known library available is moment.js.

There are libraries available, but it is trivial to implement it yourself. Just use a handful of conditions.

Assume date is an instantiated Date object for the time you want to make a comparison against.

// Make a fuzzy time
var delta = Math.round((+new Date - date) / 1000);

var minute = 60,
    hour = minute * 60,
    day = hour * 24,
    week = day * 7;

var fuzzy;

if (delta < 30) {
    fuzzy = 'just then.';
} else if (delta < minute) {
    fuzzy = delta + ' seconds ago.';
} else if (delta < 2 * minute) {
    fuzzy = 'a minute ago.'
} else if (delta < hour) {
    fuzzy = Math.floor(delta / minute) + ' minutes ago.';
} else if (Math.floor(delta / hour) == 1) {
    fuzzy = '1 hour ago.'
} else if (delta < day) {
    fuzzy = Math.floor(delta / hour) + ' hours ago.';
} else if (delta < day * 2) {
    fuzzy = 'yesterday';
}

You would need to adapt this to handle future dates.

edited Jun 29 '17 at 17:18

mesqueeb

5,277
5
44
77

answered Oct 03 '11 at 23:26

alex

479,566
201
878
984

11

Yesterday is before the last midnight, not between 24 hours and 48 hours ago. – mxcl Aug 16 '12 at 15:47
@mmaclaurin Mine was never meant to be a complete solution, just a pointer in the right direction. I'll make a note to update it later, or if you want, feel free to edit the answer. – alex Oct 02 '12 at 00:11
Please also have a look at [date-fns](http://date-fns.org)! It's a great library if you like to keep your code base small, because it has a much much lower footprint than momentjs! – mesqueeb Jun 29 '17 at 17:17
1

I changed this code to make a twitter style `getTimeAgo` function https://gist.github.com/pomber/6195066a9258d1fb93bb59c206345b38 – pomber Feb 14 '20 at 17:27
You missed the week case. – Artur Carvalho Mar 01 '21 at 09:36
2

If anything, all the edge cases you missed make it clear this isn't actually "trivial to implement yourself". Especially if you want to localize to different countries/langauges. – phreakhead Jun 17 '22 at 22:36

score 103 · Answer 2 · edited Mar 02 '19 at 06:26

103

I wrote moment.js, a date library that does this. It's about ~~5KB (2011)~~ 52KB (2019), and works in browsers and in Node. It's also probably the most popular and famous date library for JavaScript.

It supports timeago, formatting, parsing, querying, manipulating, i18n, etc.

Timeago (relative time) for dates in the past is done with moment().fromNow(). For example, to display January 1, 2019 in the timeago format:

let date = moment("2019-01-01", "YYYY-MM-DD");
console.log(date.fromNow());

<script src="https://momentjs.com/downloads/moment.min.js"></script>

The timeago strings are customizable with moment.updateLocale(), so you can change them how you see fit.

The cutoffs are not what the question requests ("5 weeks" vs. "1 month"), but it is documented as to which strings are used for what time range.

edited Mar 02 '19 at 06:26

MultiplyByZer0

6,302
3
32
48

answered Oct 04 '11 at 00:29

timrwood

10,611
5
35
42

85

ha that size update though! – Askdesigners Oct 24 '16 at 10:44
1

Please also have a look at [date-fns](http://date-fns.org)! It's a great library if you like to keep your code base small, because it has a much much lower footprint than momentjs! – mesqueeb Jun 29 '17 at 17:17
1

As good as this library is, the answer does not include an explanation on how to format a number in a human-friendly manner using it – Code Whisperer Jul 09 '17 at 13:39
4

Are you going to update too with the "deprecation"? https://momentjs.com/docs/#/-project-status/ – Juan De la Cruz Sep 25 '20 at 03:23
@mesqueeb please illustrate how this can be achieved with date-fns: how can you configure e.g. the locale formatting as you can in moment? If that isn't possible, then it's really not a fair comparison. – maxcountryman Oct 26 '22 at 15:37

score 21 · Answer 3 · edited May 23 '17 at 12:02

Here's something from the John Resig - http://ejohn.org/blog/javascript-pretty-date/

EDIT (6/27/2014): Following up on the comment from Sumurai8 - though the linked page still works, here is the excerpt for the pretty.js linked to from the article above:

pretty.js

/*
 * JavaScript Pretty Date
 * Copyright (c) 2011 John Resig (ejohn.org)
 * Licensed under the MIT and GPL licenses.
 */

// Takes an ISO time and returns a string representing how
// long ago the date represents.
function prettyDate(time) {
    var date = new Date((time || "").replace(/-/g, "/").replace(/[TZ]/g, " ")),
        diff = (((new Date()).getTime() - date.getTime()) / 1000),
        day_diff = Math.floor(diff / 86400);

    if (isNaN(day_diff) || day_diff < 0 || day_diff >= 31) return;

    return day_diff == 0 && (
    diff < 60 && "just now" || diff < 120 && "1 minute ago" || diff < 3600 && Math.floor(diff / 60) + " minutes ago" || diff < 7200 && "1 hour ago" || diff < 86400 && Math.floor(diff / 3600) + " hours ago") || day_diff == 1 && "Yesterday" || day_diff < 7 && day_diff + " days ago" || day_diff < 31 && Math.ceil(day_diff / 7) + " weeks ago";
}

// If jQuery is included in the page, adds a jQuery plugin to handle it as well
if (typeof jQuery != "undefined") jQuery.fn.prettyDate = function() {
    return this.each(function() {
        var date = prettyDate(this.title);
        if (date) jQuery(this).text(date);
    });
};

Usage:

prettyDate("2008-01-28T20:24:17Z") // => "2 hours ago"
prettyDate("2008-01-27T22:24:17Z") // => "Yesterday"
prettyDate("2008-01-26T22:24:17Z") // => "2 days ago"
prettyDate("2008-01-14T22:24:17Z") // => "2 weeks ago"
prettyDate("2007-12-15T22:24:17Z") // => undefined

Excerpt from the article on usage:

Example Usage

In the following examples I make all the anchors on the site, that have a title with a date in it, have a pretty date as their inner text. Additionally, I continue to update the links every 5 seconds after the page has loaded.

With JavaScript:

function prettyLinks(){
    var links = document.getElementsByTagName("a");
    for ( var i = 0; i < links.length; i++ )
        if ( links[i].title ) {
            var date = prettyDate(links[i].title);
            if ( date )
                links[i].innerHTML = date;
        }
}
prettyLinks();
setInterval(prettyLinks, 5000);

With jQuery:

$("a").prettyDate();
setInterval(function(){ $("a").prettyDate(); }, 5000);

Faiz: Made some changes to the original code, bug fixes and improvements.

function prettyDate(time) {
    var date = new Date((time || "").replace(/-/g, "/").replace(/[TZ]/g, " ")),
        diff = (((new Date()).getTime() - date.getTime()) / 1000),
        day_diff = Math.floor(diff / 86400);
    var year = date.getFullYear(),
        month = date.getMonth()+1,
        day = date.getDate();

    if (isNaN(day_diff) || day_diff < 0 || day_diff >= 31)
        return (
            year.toString()+'-'
            +((month<10) ? '0'+month.toString() : month.toString())+'-'
            +((day<10) ? '0'+day.toString() : day.toString())
        );

    var r =
    ( 
        (
            day_diff == 0 && 
            (
                (diff < 60 && "just now")
                || (diff < 120 && "1 minute ago")
                || (diff < 3600 && Math.floor(diff / 60) + " minutes ago")
                || (diff < 7200 && "1 hour ago")
                || (diff < 86400 && Math.floor(diff / 3600) + " hours ago")
            )
        )
        || (day_diff == 1 && "Yesterday")
        || (day_diff < 7 && day_diff + " days ago")
        || (day_diff < 31 && Math.ceil(day_diff / 7) + " weeks ago")
    );
    return r;
}

Hi Floyd, I have added some changes (bug fix, improvements) to your answer. Hope you don't mind.. — Faiz, Feb 15 '16 at 14:27
Good one! But don't work with timestamp numeric type, maybe need a better filter like if(typeof time == 'string') { time = time.replace(/-/g, "/").replace(/[TZ]/g, " ")); } — Arthur Ronconi, Aug 12 '16 at 19:22
Please, how to account for future dates? Like 2 days from now. — Ikenna Emman, Sep 16 '20 at 18:11

score 17 · Answer 4 · answered Aug 04 '12 at 18:01

17

sugar.js has great date formatting functions.

Not only that, it also provides common general purpose functions like string formatting, number formatting, etc. that are convenient to use.

answered Aug 04 '12 at 18:01

Hendy Irawan

20,498
11
103
114

1

agree, sugar.js deserves more attention here. – citykid Oct 31 '12 at 16:29

score 5 · Answer 5 · answered Sep 26 '12 at 12:00

5

This js script is very nice. All you have to do is to execute it. All <time> tags will be changed to relative dates and updated every few minutes, so the relative time will always be up to date.

http://timeago.yarp.com/

answered Sep 26 '12 at 12:00

boreq

791
2
10
18

1

I think this is the best solution. The library is very actively maintained, it's based off of / inspired by Resig's code, it's very small, it has tons of localizations, it's trivial to integrate. – John Bachir Nov 27 '13 at 07:01
very easy to integrate +1 – A5H1Q Jun 15 '21 at 05:09

score 5 · Answer 6 · edited Mar 24 '21 at 12:20

here an example of sugar vs moment: for a calendar that displays weeks, I needed the last monday value:

moment.js

https://momentjs.com/

var m = moment().subtract("days", 1).sod().day(1) // returns a "moment"

sugar.js

var d = Date.past("monday") // returns a js Date object

I much prefer sugar and after some months with moment.js now switch to sugar.js. it is clearer and integrates nicely with Javascripts' Date class.

OP cases are covered by both libs, for sugar.js see http://sugarjs.com/dates

RoboKozo · Answer 7 · 2014-09-19T15:06:42.330

4

Sounds like you could use http://www.datejs.com/

They have an example on the main page that does exactly what you're describing!

EDIT: Actually, I think I reversed your question in my head. In any case, I think you could check it out as it's a really great library anyway!

EDIT x2: I'm going to echo what the others have said http://momentjs.com/ is probably the best choice available right now.

EDIT x3: I haven't used date.js in over a year. I'm exclusively using momentjs for all my date related needs.

edited Sep 19 '14 at 15:06

answered Oct 03 '11 at 23:27

RoboKozo

4,981
5
51
79

Nice lib suggestion. Internationalization definitely a plus. – Stephen Oct 03 '11 at 23:30
Date.js was my first thought too, but I don't see any way to go from number to format with it - though it might be hidden in the docs somewhere. – rampion Oct 04 '11 at 02:44
Date.js is known to have serious bugs, and cannot be trusted in production environments. Many frameworks are switching from Date.js to Moment.js – John Zabroski Aug 04 '13 at 19:05
I learned the hard way that datejs does not work on linux :( – fat fantasma Sep 11 '14 at 00:26

Javascript library for human-friendly relative date formatting

7 Answers7

Linked

Related