Как использовать Moment.js?

Ответ 1

Пожалуйста, укажите свой вопрос. Я предполагаю, что вы хотите относительный синтаксический анализ даты, а максимум должен быть "вчера".

Я никогда не использовал moment.js, но, насколько говорят документы, это довольно просто.

Используйте var now = moment(); в качестве текущей даты. Затем проанализируйте каждый time -Tag в DOM с помощью var time = moment($(e).attr('datetime'));

Чтобы проверить разницу, используйте метод diff():

if(now.diff(time, 'days') <= 1) {
    // getting the relative output
}

Используйте var ago = now.from(time) для получения относительного вывода и замените время в DOM своей переменной ago.

Обновление на основе комментария:

Хорошо, хорошо непроверено, но что основная идея:

Обновлен код.

var now = moment();

$('time').each(function(i, e) {
    var time = moment($(e).attr('datetime'));

    if(now.diff(time, 'days') <= 1) {
        $(e).html('<span>' + time.from(now) + '</span>');
    }
});

Ответ 2

Вы также можете использовать функцию moment().calendar(), которая будет форматировать даты, близкие к сегодняшним дням (до недели с сегодняшнего дня):

$('time').each(function(i, e) {
  var time = moment($(e).attr('datetime'));

  $(e).html('<span>' + time.calendar() + '</span>');
});​

Вы можете настроить строки формата с помощью этого кода:

moment.calendar = {
  lastDay : '[Yesterday at] LT',
  sameDay : '[Today at] LT',
  nextDay : '[Tomorrow at] LT',
  lastWeek : '[last] dddd [at] LT',
  nextWeek : 'dddd [at] LT',
  sameElse : 'L'
};

Если вас не интересуют даты форматирования до вчерашнего дня, просто измените форматы lastWeek и nextWeek на полный формат даты (например, 'L').

UPDATE 2013-09-06. По-видимому, у него есть новый синтаксис, который также позволяет локализовать его:

moment.lang('en', {
  calendar: {
    lastDay : '[Yesterday at] LT',
    sameDay : '[Today at] LT',
    nextDay : '[Tomorrow at] LT',
    lastWeek : '[last] dddd [at] LT',
    nextWeek : 'dddd [at] LT',
    sameElse : 'L'
  }
});

Ответ 3

Благодаря @JohannesKlauß для кода. Это в основном то, как я выполнил его ответ и как я ссылаюсь на код на своем веб-сайте.

<script src="/js/moment.min.js"></script>
<script src="/js/moment.executor.js"></script>

Где moment.min.js - библиотека Moment.js, а moment.executor.js имеет этот код (любезно предоставлен Йоханнесом):

jQuery(document).ready(function($){

    var now = moment();

    $('time').each(function(i, e) {
        var time = moment($(e).attr('datetime'));

        if(now.diff(time, 'days') <= 1) {
            $(e).html('<span>' + time.from(now) + '</span>');
        }
    });

});

PS: Фактически вы можете отредактировать moment.min.js и добавить в него вышеупомянутый код в конце. Таким образом, вы сохраните один дополнительный HTTP-запрос.: P

Ответ 4

Расширение реализации @its_me выше, здесь версия, которая

• обновляет все элементы с заданным классом
• хранит их каждую минуту (так что "1 минута назад" становится "2 минуты назад" )
• переключается в другой формат в течение + -1 дня (например, в прошлый вторник в 23:45).

Здесь JSFiddle для вас.

Ваш HTML:

<time class="cw-relative-date" datetime="2014-06-09T12:32:10-00:00"></time>

JS включает:

(function () {

// Define a function that updates all relative dates defined by <time class='cw-relative-date'>
var updateAllRelativeDates = function() {
        $('time').each(function (i, e) {
            if ($(e).attr("class") == 'cw-relative-date') {

                // Initialise momentjs
                var now = moment();
                moment.lang('en', {
                    calendar : {
                        lastDay : '[Yesterday at] LT',
                        sameDay : '[Today at] LT',
                        nextDay : '[Tomorrow at] LT',
                        lastWeek : '[Last] dddd [at] LT',
                        nextWeek : 'dddd [at] LT',
                        sameElse : 'D MMM YYYY [at] LT'
                    }
                });

                // Grab the datetime for the element and compare to now                    
                var time = moment($(e).attr('datetime'));
                var diff = now.diff(time, 'days');

                // If less than one day ago/away use relative, else use calendar display
                if (diff <= 1 && diff >= -1) {
                    $(e).html('<span>' + time.from(now) + '</span>');
                } else {
                    $(e).html('<span>' + time.calendar() + '</span>');
                }
            }
        });
    };

// Update all dates initially
updateAllRelativeDates();

// Register the timer to call it again every minute
setInterval(updateAllRelativeDates, 60000);

})();