Website-Suche

Javascript-Bibliothek zur benutzerfreundlichen relativen Datumsformatierung

Ich möchte einige Daten relativ zum aktuellen Datum in einem benutzerfreundlichen Format anzeigen.

Beispiele für benutzerfreundliche relative Datumsangaben:

  • vor 10 Sekunden
  • In 20 Minuten
  • vor 1 Tag
  • vor 5 Wochen
  • vor 2 Monaten

Grundsätzlich die höchste Größenordnung treu bewahren (und nach Möglichkeit nur die Einheiten erhöhen, wenn man 2 dieser Einheiten überschreitet - 5 Wochen statt 1 Monat).

Obwohl ich mit einer Bibliothek leben könnte, die weniger Kontrolle hat und sogar freundlichere Daten wie diese:

  • gestern
  • morgen
  • letzte Woche
  • vor ein paar Minuten
  • in ein paar Stunden

Gibt es dafür beliebte Bibliotheken?

Antwort #1

Seit ich diese Antwort geschrieben habe, ist eine bekannte Bibliothek verfügbar: moment.js.

Es gibt Bibliotheken, aber es ist trivial, sie selbst zu implementieren. Verwenden Sie einfach ein paar Bedingungen.

Gehen Sie davon aus, dass date ein instanziiertes Date-Objekt für die Zeit ist, mit der Sie einen Vergleich anstellen möchten.

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

Sie müssten dies anpassen, um zukünftige Daten zu verarbeiten.

Antwort #2

Ich habe moment.js geschrieben, eine Datumsbibliothek, die dies tut. Sie ist etwa 5KB (2011) 52KB (2019) groß und funktioniert in Browsern und in Node. Sie ist wahrscheinlich auch die beliebteste und bekannteste Datumsbibliothek für JavaScript.

Es unterstützt timeago, Formatierung, Parsen, Abfragen, Manipulation, i18n usw.

Die Anzeige von Zeitangaben (relative Zeit) für vergangene Daten erfolgt mit moment().fromNow(). Zum Beispiel, um den 1. Januar 2019 im Zeitago-Format anzuzeigen:

let date = moment("2019-01-01", "YYYY-MM-DD");
console.log(date.fromNow());
<script src="https://momentjs.com/downloads/moment.min.js"></script>

Die Timeago-Strings sind mit moment.updateLocale() anpassbar, sodass Sie sie nach Belieben ändern können.

Die Grenzwerte sind nicht das, was die Frage verlangt ("5 Wochen" vs. "1 Monat"), aber es ist dokumentiert, welche Zeichenketten für welchen Zeitraum verwendet werden.

Antwort #3

Hier ist etwas von John Resig - http://ejohn.org/blog/javascript-pretty-date/

BEARBEITUNG (27.06.2014): Als Folge des Kommentars von Sumurai8 - obwohl die verlinkte Seite immer noch funktioniert, hier ist der Auszug für pretty.js, auf den im obigen Artikel verlinkt wird:

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

Verwendung:

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

Auszug aus dem Artikel über die Nutzung:

Beispielverwendung

In den folgenden Beispielen lasse ich alle Anker auf der Seite, die einen Titel mit einem Datum haben, als ihren inneren Text ein schön formatiertes Datum anzeigen. Außerdem aktualisiere ich die Links alle 5 Sekunden, nachdem die Seite geladen wurde.

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

Mit jQuery:

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

Faiz: Einige Änderungen am ursprünglichen Code vorgenommen, Fehlerbehebungen und Verbesserungen.

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

Antwort #4

sugar.js hat großartige Datumsformatierungsfunktionen.

Nicht nur das, es bietet auch allgemeine Funktionen für den allgemeinen Gebrauch wie Zeichenkettenformatierung, Zahlenformatierung usw., die bequem zu verwenden sind.

Verwandte Artikel