Библиотека Javascript для удобного для относительного форматирования даты
Я хотел бы отображать некоторые даты относительно текущей даты в удобном для людей формате.
Примеры благоприятных для человека относительных дат:
- 10 секунд назад
- Через 20 минут
- 1 день назад
- 5 недель назад
- 2 месяца назад
В принципе верно сохраняя высший порядок величины (и, при желании, только переключение единиц при прохождении 2 из этих единиц - 5 недель вместо 1 месяца).
Хотя я мог бы жить с библиотекой, у которой было меньше контроля и еще более дружественными датами вроде:
- вчера
- завтра
- на прошлой неделе
- несколько минут назад
- через пару часов
Любые популярные библиотеки для этого?
Ответы
Ответ 1
Поскольку я написал этот ответ, доступна известная доступная библиотека moment.js.
Доступны библиотеки но тривиально реализовать их самостоятельно. Просто используйте несколько условий.
Предположим, что date
является экземпляром объекта date
для времени, в течение которого вы хотите провести сравнение.
// 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';
}
Вам нужно будет адаптировать это для обработки будущих дат.
Ответ 2
Я написал moment.js, библиотеку дат, которая делает это. Это около 5 КБ (2011) 52 КБ (2019), и работает в браузерах и в Node. Это также, вероятно, самая популярная и известная библиотека дат для JavaScript.
Он поддерживает timeago, форматирование, анализ, запросы, манипуляции, i18n и т.д.
Timeago (относительное время) для дат в прошлом выполняется с помощью moment().fromNow()
. Например, для отображения 1 января 2019 года в формате timeago:
let date = moment("2019-01-01", "YYYY-MM-DD");
console.log(date.fromNow());
<script src="https://momentjs.com/downloads/moment.min.js"></script>
Ответ 3
sugar.js имеет отличные функции форматирования дат.
Кроме того, он также предоставляет общие функции общего назначения, такие как форматирование строк, форматирование чисел и т.д., которые удобны в использовании.
Ответ 4
Здесь что-то от Джона Ресига - http://ejohn.org/blog/javascript-pretty-date/
EDIT (6/27/2014): после комментария от Sumurai8 - хотя связанная страница все еще работает, вот выдержка для pretty.js
, связанный с приведенной выше статьей:
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);
});
};
Применение:
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
Выдержка из статьи об использовании:
Пример использования
В следующих примерах я делаю все привязки на сайте, что иметь заголовок с датой в нем, иметь красивую дату как свою внутреннюю текст. Кроме того, я продолжаю обновлять ссылки каждые 5 секунд. после загрузки страницы.
С 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);
С jQuery:
$("a").prettyDate();
setInterval(function(){ $("a").prettyDate(); }, 5000);
Faiz: внесли некоторые изменения в исходный код, исправления ошибок и улучшения.
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;
}
Ответ 5
Похоже, вы могли бы использовать http://www.datejs.com/
У них есть пример на главной странице, который делает именно то, что вы описываете!
EDIT: Вообще-то, я думаю, что я отменил ваш вопрос в своей голове. В любом случае, я думаю, вы могли бы это проверить, так как это действительно отличная библиотека!
EDIT x2: Я собираюсь повторить то, что говорили другие http://momentjs.com/, вероятно, лучший выбор, доступный прямо сейчас.
EDIT x3: я не использовал date.js более года. Я исключительно использую momentjs для всех моих потребностей, связанных с датой.
Ответ 6
Этот js script очень приятный. Все, что вам нужно сделать, это выполнить его. Все теги <time>
будут изменены на относительные даты и обновляются каждые несколько минут, поэтому относительное время всегда будет актуальным.
http://timeago.yarp.com/
Ответ 7
здесь пример сахара с моментом: для календаря, который отображает недели, мне понадобилось последнее помидовое значение:
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
Я предпочитаю сахара и через несколько месяцев с моментом .js теперь переключаюсь на sugar.js. он более понятен и прекрасно сочетается с классом дат Javascripts.
Операции OP охватываются обоими lib, для sugar.js см. http://sugarjs.com/dates