Pustaka Javascript untuk pemformatan tanggal relatif yang ramah manusia [ditutup]

Saya ingin menampilkan beberapa tanggal sebagai relatif terhadap tanggal saat ini dalam format yang ramah manusia.

Contoh tanggal relatif ramah manusia:

• 10 detik yang lalu
• 20 menit dari sekarang
• 1 hari yang lalu
• 5 minggu lalu
• 2 bulan yang lalu

Pada dasarnya dengan setia mempertahankan urutan besaran tertinggi (dan berdasarkan preferensi, hanya menggeser unit saat melewati 2 unit tersebut - 5 minggu, bukan 1 bulan).

Meskipun saya bisa hidup dengan perpustakaan yang kurang memiliki kendali dan bahkan tanggal yang lebih bersahabat seperti:

• kemarin
• besok
• minggu lalu
• beberapa menit yang lalu
• dalam beberapa jam

Ada perpustakaan populer untuk ini?

Sejak saya menulis jawaban ini, perpustakaan terkenal yang tersedia adalah moment.js .

Ada perpustakaan yang tersedia , tetapi itu mudah untuk diterapkan sendiri. Gunakan saja beberapa kondisi.

Asumsikan dateadalah Dateobjek yang dibuat untuk waktu yang ingin Anda bandingkan.

// 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';
}

Anda perlu menyesuaikan ini untuk menangani tanggal-tanggal yang akan datang.

Saya menulis moment.js , perpustakaan tanggal yang melakukan ini. Ini tentang 5KB (2011) 52KB (2019), dan bekerja di browser dan di Node. Ini juga mungkin perpustakaan tanggal paling populer dan terkenal untuk JavaScript.

Ini mendukung timeago, pemformatan, parsing, kueri, manipulasi, i18n, dll.

Timeago (waktu relatif) untuk tanggal di masa lalu dilakukan dengan moment().fromNow(). Misalnya untuk menampilkan 1 Januari 2019 dalam format timeago:

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

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

String timeago dapat disesuaikan dengan moment.updateLocale(), sehingga Anda dapat mengubahnya sesuai keinginan Anda.

Batasnya bukanlah apa yang diminta pertanyaan ("5 minggu" vs. "1 bulan"), tetapi ini didokumentasikan sebagai string mana yang digunakan untuk rentang waktu apa.

Ini sesuatu dari John Resig - http://ejohn.org/blog/javascript-pretty-date/

EDIT (6/27/2014): Menindaklanjuti komentar dari Sumurai8 - meskipun halaman tertaut masih berfungsi, berikut adalah kutipan untukpretty.js ditautkan dari artikel di atas:

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);
    });
};

Pemakaian:

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

Kutipan dari artikel tentang penggunaan:

Contoh Penggunaan

Dalam contoh berikut saya membuat semua jangkar di situs, yang memiliki judul dengan tanggal di dalamnya, memiliki tanggal yang cantik sebagai teks dalamnya. Selain itu, saya terus memperbarui link setiap 5 detik setelah halaman dimuat.

Dengan 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);

Dengan jQuery:

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

Faiz: Membuat beberapa perubahan pada kode asli, perbaikan bug, dan peningkatan.

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;
}

sugar.js memiliki fungsi format tanggal yang bagus.

Tidak hanya itu, ia juga menyediakan fungsi tujuan umum umum seperti pemformatan string, pemformatan angka, dll. Yang nyaman digunakan.

di sini contoh gula vs momen: untuk kalender yang menampilkan minggu, saya membutuhkan nilai senin terakhir:

moment.js

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

sugar.js

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

Saya lebih suka gula dan setelah beberapa bulan dengan moment.js sekarang beralih ke sugar.js. itu lebih jelas dan terintegrasi dengan baik dengan kelas Tanggal Javascripts.

Kasus OP dicakup oleh kedua libs, untuk sugar.js lihat http://sugarjs.com/dates

Skrip js ini sangat bagus. Yang harus Anda lakukan adalah menjalankannya. Semua <time>tag akan diubah ke tanggal relatif dan diperbarui setiap beberapa menit, sehingga waktu relatif akan selalu diperbarui.

http://timeago.yarp.com/

Sepertinya Anda bisa menggunakan http://www.datejs.com/

Mereka memiliki contoh di halaman utama yang melakukan persis seperti yang Anda gambarkan!

EDIT: Sebenarnya, saya pikir saya membalikkan pertanyaan Anda di kepala saya. Bagaimanapun, saya pikir Anda bisa memeriksanya karena ini adalah perpustakaan yang sangat bagus!

EDIT x2: Saya akan mengulangi apa yang dikatakan orang lain. Http://momentjs.com/ mungkin adalah pilihan terbaik yang tersedia saat ini.

EDIT x3: Saya belum pernah menggunakan date.js selama lebih dari setahun. Saya secara eksklusif menggunakan momentjs untuk semua kebutuhan terkait tanggal saya.