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

Я хотів би відобразити деякі дати щодо поточної дати у зручному для людини форматі.

Приклади відносних дат, сприятливих для людини:

• 10 секунд тому
• Через 20 хвилин
• 1 день тому
• 5 тижнів тому
• 2 місяці тому

В основному сумлінно зберігаючи найвищий порядок (і переважно, зміщуючи одиниці лише при проходженні 2 з цих одиниць - 5 тижнів замість 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';
}

Вам потрібно буде адаптувати це, щоб обробляти майбутні дати.

Я написав moment.js , бібліотеку дат, яка це робить. Це приблизно 5KB (2011) 52KB (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>

Рядки тимгаго налаштовуються за допомогою moment.updateLocale(), тож ви можете змінити їх, як вам здається , що потрібно.

Обмеження не вимагає запитання ("5 тижнів" проти "1 місяць"), але задокументовано, які рядки використовуються для якого періоду часу.

Ось щось із Джона Резіга - 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.js має чудові функції форматування дати.

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

ось приклад цукру проти моменту: для календаря, що відображає тижні, мені потрібно було значення останнього понеділка:

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

Я набагато віддаю перевагу цукру, і через кілька місяців з moment.js тепер переходжу на sugar.js. він чіткіший і добре інтегрується з класом Дата Javascripts '.

Випадки роботи з ОП охоплені обома проблемами, див. Http://sugarjs.com/dates

Цей js-сценарій дуже приємний. Все, що вам потрібно зробити - це виконати його. Всі<time> теги будуть змінені на відносні дати та оновлюватися кожні кілька хвилин, тому відносний час завжди буде актуальним.

http://timeago.yarp.com/

Здається, ви можете використовувати http://www.datejs.com/

Вони мають приклад на головній сторінці, який робить саме те, що ви описуєте!

EDIT: Насправді, я думаю, я змінив ваше питання в голові. У будь-якому випадку, я думаю, ви могли це перевірити, оскільки це все-таки чудова бібліотека!

EDIT x2: Я повторюю те, що сказали інші http://momentjs.com/ - це, мабуть, найкращий вибір, доступний зараз.

EDIT x3: я не використовував date.js більше року. Я використовую виключно momentjs для всіх моїх потреб, пов'язаних з датами.