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


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

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

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

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

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

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

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

7 84

7 ответов:

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

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

Я написал небольшую библиотеку дат, которая делает это. Речь идет о 2k 136K (46k свернуто), и работает в браузерах и в узле.

момент.js

Он поддерживает timeago, форматирование, разбор, манипулирование, i18n и т. д.

кроме того, строки timeago настраиваются, поэтому вы можете изменить их так, как считаете нужным.

отсечки не так, как вы бы предпочли (5 недель против 1 месяца), но они документированы, на которых используются строки в каком временном диапазоне.

сахар.js имеет большие функции форматирования даты.

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

вот что-то от Джона отставки -http://ejohn.org/blog/javascript-pretty-date/

EDIT (27.06.2014): продолжение комментария от Sumurai8 - хотя связанная страница все еще работает, вот выдержка для pretty.js ссылка на из статьи выше:

довольно.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;
}

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

момент.js

var m = moment().subtract("days", 1).sod().day(1) // returns a "moment"

сахар.js

var d = Date.past("monday") // returns a js Date object

Я предпочитаю сахар и после нескольких месяцев с момента.js теперь переключитесь на сахар.js. он более понятен и хорошо интегрируется с классом даты Javascripts.

OP случаи покрываются обеими libs, для сахара.JS увидеть http://sugarjs.com/dates

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

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

EDIT: на самом деле, я думаю, что я перевернул ваш вопрос в моей голове. В любом случае, я думаю, что вы можете проверить это, так как это действительно отличная библиотека!

EDIT x2: я собираюсь повторить то, что сказали другие http://momentjs.com/ Вероятно самый лучший выбор доступный справедливо сейчас.

редактировать x3: я не использовал дату.JS в течение года. Я использую исключительно momentjs для всех моих потребностей, связанных с датой.

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

http://timeago.yarp.com/