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

Question

Я не могу следить за Moment.js documentation и вам нужна помощь в его настройке. Я ссылается файл moment.min.js должным образом на веб-странице, как так:

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

Приезжая в HTML часть моей веб-страницы, у меня есть две разные даты-времени на той же странице:

Опубликовано Дата

<time class="pubdate" datetime="2012-06-09T12:32:10-04:00" pubdate> 
    June 09, 2012 
</time> 

Дата последнего изменения

<time class="updated" itemprop="dateModified" datetime="2012-06-09T12:32:10-04:00"> 
    June 9, 2012 ~ 12:32 
</time> 

Важно! Относительная синтаксическая обработка даты не должна превышать «вчера». Что касается всего выше, теги <time> должны отображать точные даты и времени, которые были бы без JavaScript - то есть Moment.js не должен касаться или анализировать даты, прошедшие «вчера».

Теперь, чтобы библиотека выполняла свою работу, как указано выше, мне нужно вызвать функцию после ссылки на библиотеку. Итак, вопрос в том, какова должна быть функция? (Использование jQuery в порядке, так как я уже ссылаюсь на библиотеку на своей веб-странице.)

Answer 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>'); 
    } 
}); 

Answer 2

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

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

Где moment.min.js является библиотека Moment.js и moment.executor.js имеет этот код (любезно Johannes):

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

Answer 3

Вы можете также использовать функцию 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' 
    } 
}); 

Answer 4

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

• обновляет все элементы с заданным классом
• сохраняет их каждую минуту (так «1 минута назад» b ecomes '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); 

})();