Die Frage ist, wie ein JavaScript Date
als Zeichenfolge formatiert wird , die die verstrichene Zeit angibt, ähnlich wie Sie die im Stapelüberlauf angezeigten Zeiten sehen.
z.B
- Vor 1 Minute
- vor 1 Stunde
- Vor 1 Tag
- Vor 1 Monat
- vor 1 Jahr
javascript
date-formatting
Sky Sanders
quelle
quelle
Intl.RelativeTimeFormat.prototype.format()
.Antworten:
quelle
Könnte in diesem Fall ein Overkill sein, aber wenn sich die Gelegenheit zeigt, ist moment.js einfach fantastisch!
Moment.js ist eine Javascript-Datetime-Bibliothek. Um sie für ein solches Szenario zu verwenden, gehen Sie wie folgt vor:
http://momentjs.com/docs/#/displaying/fromnow/
Nachtrag 2018 : Luxon ist eine neue moderne Bibliothek und könnte einen Blick wert sein!
quelle
Ich habe nicht überprüft (obwohl es nicht schwer wäre), aber ich denke, dass Stack Exchange-Sites das
jquery.timeago
Plugin verwenden , um diese Zeitzeichenfolgen zu erstellen .Das Plugin ist recht einfach zu verwenden, es ist sauber und wird automatisch aktualisiert.
Hier ist ein kurzes Beispiel (von der Homepage des Plugins):
quelle
Dies zeigt Ihnen vergangene und frühere Zeitformate wie 'vor 2 Tagen' 'in 10 Minuten' und Sie können entweder ein Datumsobjekt, einen numerischen Zeitstempel oder eine Datumszeichenfolge übergeben
quelle
return time;
durchformat = time_formats[time_formats.length - 1]; return Math.floor(seconds / format[2]) + ' ' + format[1] + ' ' + token;
, um Jahrhunderte für große Zeitspannen anstelle der Millisekunden zurückzugeben.Hier ist eine geringfügige Änderung an der Sky Sander-Lösung, mit der das Datum als Zeichenfolge eingegeben werden kann und Bereiche wie "1 Minute" anstelle von "73 Sekunden" angezeigt werden können.
quelle
interval = Math.floor(seconds / 60);
. Ich habeinterval = seconds;
in das Finale hinzugefügtelse
und es funktioniert gut.let seconds = Math.floor((+new Date() - date) / 1000);
interval === 0
im letztenif
?Vielleicht möchten Sie sich humanized_time_span ansehen: https://github.com/layam/js_humanized_time_span
Es ist rahmenunabhängig und vollständig anpassbar.
Laden Sie einfach das Skript herunter / fügen Sie es hinzu, und dann können Sie Folgendes tun:
oder sogar das:
Lesen Sie die Dokumente für weitere Informationen.
quelle
NaN years ago
warum?humanized_time_span("2011/05/11 12:00:00")
Die obige Funktion wurde in geändert
Andernfalls würde es Dinge wie "75 Minuten" (zwischen 1 und 2 Stunden) anzeigen. Es wird jetzt auch davon ausgegangen, dass das Eingabedatum ein Unix-Zeitstempel ist.
quelle
Viel lesbarer und browserübergreifender Code:
Wie von @Travis angegeben
quelle
Eine kürzere Version, wie sie von Lokely verwendet wird :
quelle
Infinity seconds ago
ab jetzt unix timestamp param,
quelle
Eine ES6-Version des von @ user1012181 bereitgestellten Codes
Bearbeitet mit @ ibe-vanmeenen Vorschlägen. (Vielen Dank !)
quelle
Einfache und lesbare Version:
quelle
Ich schreibe eine mit js und python, die in zwei Projekten verwendet wird, sehr schön und einfach: eine einfache Bibliothek (weniger als 2 KB), mit der das Datum formatiert wird
*** time ago
Anweisung verwendet wird.einfach, klein, leicht zu bedienen und gut getestet.
npm install timeago.js
import timeago from 'timeago.js'; // or use script tag
benutze api
format
.Stichprobe:
Sie können auch in Echtzeit rendern.
quelle
import { format, render, cancel, register } from 'timeago.js';
Obwohl die Frage vor ziemlich langer Zeit gestellt wurde, wird es jemandem helfen, diese Antwort mit der Hoffnung zu schreiben.
Übergeben Sie das Datum, ab dem Sie mit dem Zählen beginnen möchten. Verwendung
moment().fromNow()
von momentjs : (Weitere Informationen finden Sie hier )Wenn Sie die für Daten von Now bereitgestellten Informationen ändern möchten, schreiben Sie Ihre benutzerdefinierte relative Zeit für den Moment.
In meinem Fall wollte ich beispielsweise
'one month ago'
anstelle von'a month ago'
( bereitgestellt durch moment (d) .fromNow () ) drucken . In diesem Fall können Sie etwas unten angegebenes schreiben.HINWEIS : Ich habe meinen Code für das Projekt in Agular 6 geschrieben
quelle
Kann auch das dayjs relativeTime- Plugin verwenden, um dies zu lösen.
quelle
Dies sollte alle gültigen Zeitstempel ordnungsgemäß behandeln, einschließlich Date.now (), einzelne Einheiten und zukünftige Daten. Ich habe Monate ausgelassen, aber diese sollten leicht hinzuzufügen sein. Ich habe versucht, sie so gut wie möglich lesbar zu halten.
quelle
Ich habe die Version von Sky Sanders geändert. Die Math.floor (...) -Operationen werden im if-Block ausgewertet
quelle
return days + "1 day ago";
sein solltereturn "1 day ago";
quelle
quelle
Meine Lösung..
quelle
Mein Stich dazu basiert auf anderen Antworten.
quelle
Ich suchte nach einer Antwort darauf und hätte fast eine dieser Lösungen implementiert, aber ein Kollege erinnerte mich daran, die
react-intl
Bibliothek zu überprüfen, da wir sie bereits verwendeten.Hinzufügen zu den Lösungen ... Wenn Sie die
react-intl
Bibliothek verwenden, haben sie eine<FormattedRelative>
Komponente dafür.https://github.com/yahoo/react-intl/wiki/Components#formattedrelative
quelle
Folgendes habe ich getan (das Objekt gibt die Zeiteinheit zusammen mit ihrem Wert zurück):
quelle