Я хотел бы отображать некоторые даты относительно текущей даты в удобном для человека формате.
Примеры дружественных человеку относительных свиданий:
- 10 секунд назад
- Через 20 минут
- 1 день назад
- 5 недель назад
- 2 месяца назад
В основном добросовестно сохраняя наивысший порядок величины (и предпочтительно сдвигать единицы только при прохождении 2 из этих единиц - 5 недель вместо 1 месяца).
Хотя я мог бы жить с библиотекой, в которой меньше контроля и даже более дружеские свидания, например:
- вчера
- завтра
- прошлая неделя
- Несколько минут назад
- через пару часов
Какие-нибудь популярные библиотеки для этого?
javascript
date
formatting
рамп
источник
источник
Ответы:
Поскольку я написал этот ответ, доступна хорошо известная библиотека 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'; }
Вам нужно будет адаптировать это для работы с будущими свиданиями.
источник
getTimeAgo
функции gist.github.com/pomber/6195066a9258d1fb93bb59c206345b38Я написал 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>
Строки timeago можно настроить с помощью
moment.updateLocale()
, поэтому вы можете изменить их по своему усмотрению.Ограничения - это не то, что запрашивается в вопросе («5 недель» против «1 месяца»), но они задокументированы относительно того, какие строки используются для какого диапазона времени.
источник
Вот что-то от Джона Ресига - http://ejohn.org/blog/javascript-pretty-date/
РЕДАКТИРОВАТЬ (27.06.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
Выдержка из статьи по использованию:
С помощью 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);
Фаиз: Внесены некоторые изменения в исходный код, исправлены ошибки и улучшены.
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; }
источник
Sugar.js имеет отличные функции форматирования даты.
Мало того, он также предоставляет общие функции общего назначения, такие как форматирование строк, форматирование чисел и т. Д., Которые удобны в использовании.
источник
вот пример сахара против момента: для календаря, который отображает недели, мне нужно значение последнего понедельника:
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
Я предпочитаю сахар, и через несколько месяцев работы с moment.js я перехожу на sugar.js. он более понятен и хорошо интегрируется с классом Date Javascripts.
Случаи OP покрыты как LIBS для sugar.js см http://sugarjs.com/dates
источник
Этот js-скрипт очень хорош. Все, что вам нужно сделать, это выполнить его. Все
<time>
теги будут изменены на относительные даты и обновляться каждые несколько минут, поэтому относительное время всегда будет актуальным.http://timeago.yarp.com/
источник
Похоже, вы могли бы использовать http://www.datejs.com/
У них есть пример на главной странице, который делает именно то, что вы описываете!
РЕДАКТИРОВАТЬ: На самом деле, я думаю, что перевернул ваш вопрос в своей голове. В любом случае, я думаю, вы можете проверить это, так как это действительно отличная библиотека!
РЕДАКТИРОВАТЬ x2: Я собираюсь повторить то, что сказали другие, http://momentjs.com/ , вероятно, лучший выбор, доступный прямо сейчас.
ИЗМЕНИТЬ x3: я не использовал date.js больше года. Я использую momentjs исключительно для всех моих потребностей, связанных с датами.
источник