Библиотека Javascript для удобного для человека форматирования относительной даты [закрыто]


96

Я хотел бы отображать некоторые даты относительно текущей даты в удобном для человека формате.

Примеры дружественных человеку относительных свиданий:

  • 10 секунд назад
  • Через 20 минут
  • 1 день назад
  • 5 недель назад
  • 2 месяца назад

В основном добросовестно сохраняя наивысший порядок величины (и предпочтительно сдвигать единицы только при прохождении 2 из этих единиц - 5 недель вместо 1 месяца).

Хотя я мог бы жить с библиотекой, в которой меньше контроля и даже более дружеские свидания, например:

  • вчера
  • завтра
  • прошлая неделя
  • Несколько минут назад
  • через пару часов

Какие-нибудь популярные библиотеки для этого?


Почему «1 день назад» более «дружелюбно» для людей, чем просто представление фактических даты и времени?
— RobG

5
@RobG Я бы сказал, что это больше касается избежания переключения контекстов, например, на странице, которая в основном текстовая и читается, переключение контекста, например, на mm / dd / yy может вызвать паузу. В таблице данных использование этого формата может быть более читаемым. Это также зависит от того, что читателю нужно делать с датой, например, является ли фраза «это произошло n дней назад» или «это произошло до 01.01.1972» применимыми или иным образом соответствуют контексту читателя.
— wprl

Возможно, но сбивает с толку видеть в списке событий «Вчера ... 3 дня назад ... 10 / мая ...». Мне все еще нужно преобразовать их все в даты в моей голове, чтобы получить представление о том, когда они произошли. Даты краткие и точные, значения «время назад» являются разговорным, нечетким и обычно полезны только с соответствующей датой. Может быть, это только я, а может и нет. :-)
— RobG

6
Я бы сказал, это зависит от контекста. В конце концов, вы бы не сказали: «Я ходил на рыбалку 17 февраля 2014 года», если бы это было вчера. Здесь гораздо больше паузы для мозга. Такой текст идеально подходит для списка последних событий.
— Саймон Уильямс

2
@RobG Так думают только такие ботаники, как мы, ненормальные люди.

Ответы:


94

Поскольку я написал этот ответ, доступна хорошо известная библиотека 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';
}

Вам нужно будет адаптировать это для работы с будущими свиданиями.


9
Вчера до последней полуночи, а не между 24 и 48 часами назад.
— mxcl

@mmaclaurin Mine никогда не задумывался как полное решение, это просто указатель в правильном направлении. Я сделаю заметку, чтобы обновить его позже, или, если хотите, не стесняйтесь редактировать ответ.
— Alex

Также обратите внимание на date-fns ! Это отличная библиотека, если вы хотите, чтобы ваша база кода была небольшой, потому что она занимает гораздо меньше места, чем momentjs!
— mesqueeb

1
Я изменил этот код , чтобы сделать щебетать стиль getTimeAgoфункции gist.github.com/pomber/6195066a9258d1fb93bb59c206345b38
— pomber

88

Я написал 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 месяца»), но они задокументированы относительно того, какие строки используются для какого диапазона времени.


1
Престижность за то, что он работает в браузере и ноде !!!!
— wprl

50
Ха, хотя обновите этот размер!
— Askdesigners

1
Также обратите внимание на date-fns ! Это отличная библиотека, если вы хотите, чтобы ваша база кода была небольшой, потому что она занимает гораздо меньше места, чем momentjs!
— mesqueeb

Как бы хороша ни была эта библиотека, ответ не включает объяснения того, как отформатировать число удобным для человека способом, используя ее
— Code Whisperer

Вы тоже собираетесь обновляться с "устареванием"? momentjs.com/docs/#/-project-status
— Хуан Де ла Крус

17

Вот что-то от Джона Ресига - 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

Выдержка из статьи по использованию:

Пример использования

В следующих примерах я делаю все якоря на сайте, у которых есть заголовок с датой в нем, с красивой датой в качестве внутреннего текста. Кроме того, я продолжаю обновлять ссылки каждые 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);

Фаиз: Внесены некоторые изменения в исходный код, исправлены ошибки и улучшены.

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;
}

1
Привет, Флойд, я добавил некоторые изменения (исправление ошибок, улучшения) к вашему ответу. Надеюсь, вы не против ..
— Faiz

Хороший! Но не работайте с числовым типом timestamp, возможно, понадобится лучший фильтр, например if (typeof time == 'string') {time = time.replace (/ - / g, "/").replace(/[TZ ]/ грамм, " ")); }
— Артур Араужо,

Пожалуйста, как учесть будущие даты? Примерно через 2 дня.
— Икенна Эмман

15

Sugar.js имеет отличные функции форматирования даты.

Мало того, он также предоставляет общие функции общего назначения, такие как форматирование строк, форматирование чисел и т. Д., Которые удобны в использовании.


1
согласен, здесь больше внимания заслуживает sugar.js.
— citykid

5

вот пример сахара против момента: для календаря, который отображает недели, мне нужно значение последнего понедельника:

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


4

Этот js-скрипт очень хорош. Все, что вам нужно сделать, это выполнить его. Все <time>теги будут изменены на относительные даты и обновляться каждые несколько минут, поэтому относительное время всегда будет актуальным.

http://timeago.yarp.com/


1
Думаю, это лучшее решение. Библиотека очень активно поддерживается, она основана на / вдохновлена ​​кодом Resig, она очень мала, в ней много локализаций, ее легко интегрировать.
— John Bachir

4

Похоже, вы могли бы использовать http://www.datejs.com/

У них есть пример на главной странице, который делает именно то, что вы описываете!

РЕДАКТИРОВАТЬ: На самом деле, я думаю, что перевернул ваш вопрос в своей голове. В любом случае, я думаю, вы можете проверить это, так как это действительно отличная библиотека!

РЕДАКТИРОВАТЬ x2: Я собираюсь повторить то, что сказали другие, http://momentjs.com/ , вероятно, лучший выбор, доступный прямо сейчас.

ИЗМЕНИТЬ x3: я не использовал date.js больше года. Я использую momentjs исключительно для всех моих потребностей, связанных с датами.


Хорошее предложение lib. Интернационализация определенно плюс.
— Стивен

Date.js тоже был моей первой мыслью, но я не вижу способа перейти от числа к форматированию с его помощью - хотя он может быть где-то спрятан в документации.
— rampion

Известно, что Date.js содержит серьезные ошибки, и ему нельзя доверять в производственной среде. Многие фреймворки переходят с Date.js на Moment.js
— Джон Заброски

Я на собственном горьком опыте узнал, что datejs не работает на linux :(
— fat fantasma
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.