JSFiddle - React, Tailwind, and code Playground

by kangismet

HTML

<span class="waktu" title="5/17/2016 03:54:32 PM">Hasil</span>
<span class="waktu" title="2/17/2020 03:54:32 PM">Hasil</span>
<span class="waktu" title="3/17/2021 03:54:32 PM">Hasil</span>
<span class="waktu" title="4/17/2021 03:54:32 PM">Hasil</span>
<span class="waktu" datetime="5/17/2021 06:40:32 PM">Hasil</span>

CSS

body, time, span {
    font-family: sans-serif;
    display: block;
    padding: 5px;
}

JavaScript

(function timeAgo(selector) {

    var templates = {
        prefix: "",
        suffix: " yang lalu",
        seconds: "beberapa detik",
        minute: "semenit",
        minutes: "%d menit",
        hour: "sejam",
        hours: "%d jam",
        day: "sehari",
        days: "%d hari",
        month: "sebulan",
        months: "%d bulan",
        year: "setahun",
        years: "%d tahun"
    };
    var template = function (t, n) {
        return templates[t] && templates[t].replace(/%d/i, Math.abs(Math.round(n)));
    };

    var timer = function (time) {
        if (!time) return;
        time = time.replace(/\.\d+/, ""); // remove milliseconds
        time = time.replace(/-/, "/").replace(/-/, "/");
        time = time.replace(/T/, " ").replace(/Z/, " UTC");
        time = time.replace(/([\+\-]\d\d)\:?(\d\d)/, " $1$2"); // -04:00 -> -0400
        time = new Date(time * 1000 || time);

        var now = new Date();
        var seconds = ((now.getTime() - time) * .001) >> 0;
        var minutes = seconds / 60;
        var hours = minutes / 60;
        var days = hours / 24;
        var years = days / 365;

        return templates.prefix + (
        seconds < 45 && template('seconds', seconds) || seconds < 90 && template('minute', 1) || minutes < 45 && template('minutes', minutes) || minutes < 90 && template('hour', 1) || hours < 24 && template('hours', hours) || hours < 42 && template('day', 1) || days < 30 && template('days', days) || days < 45 && template('month', 1) || days < 365 && template('months', days / 30) || years < 1.5 && template('year', 1) || template('years', years)) + templates.suffix;
    };

    var elements = document.getElementsByClassName('waktu');
    for (var i in elements) {
        var $this = elements[i];
        if (typeof $this === 'object') {
            $this.innerHTML = timer($this.getAttribute('title') || $this.getAttribute('datetime'));
        }
    }
    // update time every minute
    setTimeout(timeAgo, 60000);

})();