JSFiddle - React, Tailwind, and code Playground

by MarkSchultheiss

HTML

<div class="timestamp" postID="6"></div>
<div class="timestamp" postID="2"></div>
<div class="timestamp" postID="3"></div>

JavaScript

var time_formats = [
    [60, 'just now', 1],
    [120, '1 minute ago', '1 minute from now'],
    [3600, 'minutes', 60],
    [7200, '1 hour ago', '1 hour from now'],
    [86400, 'hours', 3600],
    [172800, 'yesterday', 'tomorrow'],
    [604800, 'days', 86400],
    [1209600, 'last week', 'next week'],
    [2419200, 'weeks', 604800],
    [4838400, 'last month', 'next month'],
    [29030400, 'months', 2419200],
    [58060800, 'last year', 'next year'],
    [2903040000, 'years', 29030400],
    [5806080000, 'last century', 'next century'],
    [58060800000, 'centuries', 2903040000]
    ];

function prettydate(date_str) {
    var time = ('' + date_str).replace(/-/g, "/").replace(/[TZ]/g, " ");
    var seconds = (new Date() - new Date(time)) / 1000;
    var token = 'ago';
    var list_choice = 1;
    if (seconds < 0) {
        seconds = Math.abs(seconds);
        token = 'from now';
        list_choice = 2;
    }
    var i = 0,
        format;
    while (format = time_formats[i++]) if (seconds < format[0]) {
        if (typeof format[2] == 'string') return format[list_choice];
        else return Math.floor(seconds / format[2]) + ' ' + format[1] + ' ' + token;
    }
    return time;
}

// these would normally come from your ajax/creation of the element
$('.timestamp[postID=6]').data('postdate', '2012-03-20T09:24:17Z');
$('.timestamp[postID=2]').data('postdate', '2012-03-20T10:24:17Z');
$('.timestamp[postID=3]').data('postdate', '2012-03-20T08:24:17Z');

function formatTimes() {
    $('.timestamp').each(function() {
        $(this).text(prettydate($(this).data('postdate')));
    });
}
setTimeout(formatTimes, 3000);