如何使用 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(); 作为您的当前日期。然后用var time = moment($(e).attr('datetime'));解析你的DOM中的每个time-Tag

要检查差异，请使用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-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 3

感谢@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 4

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

• 使用给定类更新所有元素
• 每分钟更新一次（因此“1 分钟前”变为“2 分钟前”）
• 从现在起 +-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);

})();