Pytanie brzmi: jak sformatować JavaScript Date
jako ciąg znaków określający upływ czasu, podobnie jak sposób wyświetlania czasu w przepełnieniu stosu.
na przykład
- 1 minuta temu
- 1 godzinę temu
- 1 dzień temu
- 1 miesiąc temu
- 1 rok temu
javascript
date-formatting
Sky Sanders
źródło
źródło
Intl.RelativeTimeFormat.prototype.format()
.Odpowiedzi:
źródło
W tym przypadku może to być przesada, ale jeśli okazja pokazuje, że moment.js jest po prostu niesamowity!
Moment.js to biblioteka czasu javascript, aby użyć jej w takim scenariuszu, wykonaj następujące czynności:
http://momentjs.com/docs/#/displaying/fromnow/
Dodatek 2018 : Luxon to nowa nowoczesna biblioteka i warto ją zobaczyć!
źródło
Nie sprawdziłem (choć nie byłoby to trudne), ale myślę, że witryny Stack Exchange używają
jquery.timeago
wtyczki do tworzenia tych ciągów czasowych .Wtyczka jest dość łatwa, jest czysta i aktualizuje się automatycznie.
Oto krótka próbka (ze strony głównej wtyczki):
źródło
Spowoduje to wyświetlenie przeszłych i poprzednich formatów czasu, takich jak „2 dni temu”, „10 minut od teraz”, i możesz przekazać mu obiekt Date, numeryczny znacznik czasu lub ciąg daty
źródło
return time;
zformat = time_formats[time_formats.length - 1]; return Math.floor(seconds / format[2]) + ' ' + format[1] + ' ' + token;
na wieki powrotów dla dużych rozpiętości czasu zamiast milisekund.Oto niewielka modyfikacja rozwiązania Sky Sander, która pozwala wprowadzić datę jako ciąg znaków i może wyświetlać zakresy takie jak „1 minuta” zamiast „73 sekund”
źródło
interval = Math.floor(seconds / 60);
. Dodałeminterval = seconds;
do finałuelse
i działa dobrze.let seconds = Math.floor((+new Date() - date) / 1000);
interval === 0
w ostatnimif
?Możesz spojrzeć na humanized_time_span: https://github.com/layam/js_humanized_time_span
Jest niezależny od ram i w pełni konfigurowalny.
Wystarczy pobrać / dołączyć skrypt, a następnie możesz to zrobić:
a nawet to:
Przeczytaj dokumentację, aby uzyskać więcej informacji.
źródło
NaN years ago
dlaczego?humanized_time_span("2011/05/11 12:00:00")
Zmieniłem powyższą funkcję na
W przeciwnym razie pokazywałby coś w rodzaju „75 minut” (od 1 do 2 godzin). Zakłada również, że data wejścia jest datownikiem uniksowym.
źródło
Bardzo czytelny i kompatybilny z różnymi przeglądarkami kod:
Podane przez @Travis
źródło
Krótsza wersja używana przez Lokely :
źródło
Infinity seconds ago
od teraz paramerem znacznika czasu unix,
źródło
Wersja kodu ES6 dostarczona przez @ user1012181
Edytowane z sugestiami @ ibe-vanmeenen. (Dzięki !)
źródło
Prosta i czytelna wersja:
źródło
Piszę jeden z js i pythonem, używany w dwóch projektach, bardzo ładny i prosty: prosta biblioteka (mniej niż 2kb) używana do formatowania daty za pomocą
*** time ago
instrukcji.proste, małe, łatwe w użyciu i dobrze przetestowane.
npm install timeago.js
import timeago from 'timeago.js'; // or use script tag
użyj interfejsu API
format
.Próba:
Możesz także renderować w czasie rzeczywistym.
źródło
import { format, render, cancel, register } from 'timeago.js';
Chociaż pytanie zostało zadane już dawno temu, napisanie tej odpowiedzi z nadzieją, że komuś pomoże.
Podaj datę, od której chcesz zacząć liczyć. Korzystanie
moment().fromNow()
z momentjs : (Zobacz więcej informacji tutaj )Jeśli chcesz zmienić informacje podane dla dat od Teraz piszesz swój własny względny czas dla chwili.
Na przykład w moim przypadku chciałem wydrukować
'one month ago'
zamiast'a month ago'
( podany przez moment (d) .fromNow () ). W takim przypadku możesz napisać coś podanego poniżej.UWAGA : Kod napisałem dla projektu w Agular 6
źródło
Można również użyć wtyczki dayjs relativeTime, aby rozwiązać ten problem.
źródło
Powinno to poprawnie obsługiwać każdy ważny znacznik czasu, w tym Date.now (), jednostki pojedyncze i przyszłe daty. Pominąłem miesiące, ale te powinny być łatwe do dodania. Starałem się, aby było to możliwe do odczytania.
źródło
Zmodyfikowałem wersję Sky Sanders. Operacje Math.floor (...) są oceniane w bloku if
źródło
return days + "1 day ago";
powinno byćreturn "1 day ago";
źródło
źródło
Moje rozwiązanie ..
źródło
Moje dźgnięcie w to na podstawie innych odpowiedzi.
źródło
Szukałem odpowiedzi na to pytanie i prawie wdrożyłem jedno z tych rozwiązań, ale kolega przypomniał mi o sprawdzeniu
react-intl
bibliotekę, ponieważ już z niej korzystamy.Więc dodając do rozwiązań ... w przypadku korzystania z
react-intl
biblioteki, mają<FormattedRelative>
do tego komponent.https://github.com/yahoo/react-intl/wiki/Components#formattedrelative
źródło
Oto co zrobiłem (obiekt zwraca jednostkę czasu wraz z jego wartością):
źródło