Biblioteka Javascript dla przyjaznego dla człowieka formatowania dat względnych [zamknięta]
Chciałbym wyświetlić niektóre daty jako względne do bieżącej daty w przyjaznym dla człowieka formacie.
Przykłady przyjaznych człowiekowi dat względnych:
- 10 sekund temu
- 20 minut od teraz
- 1 dzień temu
- 5 tygodni temu
- 2 miesiące temu
Zasadniczo wiernie zachowując najwyższy rząd wielkości (i preferując przesuwanie jednostek w górę tylko przy przechodzeniu 2 z tych jednostek - 5 tygodni zamiast 1 miesiąca).
Choć mógłbym żyć z biblioteką, która miała mniejszą kontrolę i jeszcze bardziej przyjazne daty, takie jak:
- yesterday
- jutro
- Ostatni tydzień
- kilka minut temu
- w kilka godzin
Jakieś popularne biblioteki do tego?
7 answers
Ponieważ napisałem tę odpowiedź, dobrze znana Biblioteka dostępna jest moment.js .
Istnieją dostępne biblioteki, ale jest trywialne, aby zaimplementować je samodzielnie. Wystarczy użyć kilku warunków.
Załóżmy, że date
jest instancją Date
obiektu na czas, z którym chcesz dokonać porównania.
// 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';
}
Trzeba by to dostosować do przyszłych dat.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-29 17:18:21
Napisałem małą bibliotekę dat, która to robi. To około 2K 136k (46K zminimalizowane), i działa w przeglądarkach i w węźle.
Obsługuje timeago, formatowanie, parsowanie, manipulowanie, i18n itp.
Ponadto struny timeago są konfigurowalne, dzięki czemu można je zmieniać według własnego uznania.
Odcięcia nie są takie, jak wolisz (5 tygodni vs 1 miesiąc), ale są udokumentowane, na których strunach są używane w jakim zakresie czasowym.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-06 22:29:15
Cukier.js ma świetne funkcje formatowania daty.
Nie tylko to, zapewnia również typowe funkcje ogólnego przeznaczenia, takie jak formatowanie łańcuchów, Formatowanie liczb itp. które są wygodne w użyciu.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-08-04 18:01:18
Oto coś z John Resig - http://ejohn.org/blog/javascript-pretty-date/
EDIT (27/06/2014): kontynuując komentarz z Sumurai8 - choć linkowana strona nadal działa, oto fragment pretty.js
linkowany z artykułu powyżej:
Ładna.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);
});
};
Użycie:
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
Fragment artykułu o użytkowaniu:
Przykładowe Użycie
W poniższe przykłady robię wszystkie kotwice na stronie, że mieć tytuł z datą w nim, mieć piękną datę jako ich wewnętrzne tekst. Dodatkowo aktualizuję linki co 5 sekund po załadowaniu strony.
Z 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);
Z jQuery:
$("a").prettyDate();
setInterval(function(){ $("a").prettyDate(); }, 5000);
Faiz: wprowadzono pewne zmiany w oryginalnym kodzie, poprawki błędów i ulepszenia.
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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:02:23
Oto przykład sugar vs moment: dla kalendarza, który wyświetla tygodnie, potrzebowałem wartości ostatniego poniedziałku:
Chwila.js
var m = moment().subtract("days", 1).sod().day(1) // returns a "moment"
Cukier.js
var d = Date.past("monday") // returns a js Date object
[[2]] zdecydowanie wolę cukier i po kilku miesiącach z chwilą.js teraz Przełącz na cukier.js. jest jaśniejszy i ładnie integruje się z klasą Javascripts ' Date.
Sprawy operacyjne są objęte obydwoma libs, dla cukru.js see http://sugarjs.com/dates
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-11-03 20:57:20
Sounds like you could use http://www.datejs.com/
Mają przykład na stronie głównej, który robi dokładnie to, co opisujesz!
EDIT: właściwie, myślę, że odwróciłem twoje pytanie w mojej głowie. W każdym razie, myślę, że możesz to sprawdzić, ponieważ i tak jest to naprawdę świetna biblioteka!
EDIT x2: powtórzę to, co powiedzieli inni http://momentjs.com / jest prawdopodobnie najlepszym wyborem dostępnym w tej chwili.
EDIT x3: nie użyłem daty.js od ponad roku. Używam wyłącznie momentjs dla wszystkich moich potrzeb związanych z datą.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-09-19 15:06:42
Ten skrypt js jest bardzo ładny. Wszystko, co musisz zrobić, to go wykonać. Wszystkie znaczniki <time>
będą zmieniane na daty względne i aktualizowane co kilka minut, więc czas względny będzie zawsze aktualny.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-09-26 12:00:58