如何使用Moment.js？(How to use Moment.js?)

我无法跟随Moment.js文档，并且需要一些帮助设置它。我引用的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:

您还可以使用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年9月6日显然，它有一个新的语法，您还可以定位它：

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

Answer 4:

扩展@ its_me的实现上面，这里有一个版本，

更新与给定类的所有元素
让他们每分钟更新一次（所以“1分钟前”变成了“1分钟前”）
切换到+当不同格式-1天从现在开始（例如，上周二晚上11: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);

})();

文章来源: How to use Moment.js?