如何使用 Moment.js？

Question

我无法跟随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也可以，因为我已经在我的��页上引用了这个库。）

- its_me

Answer 1

请具体说明您的问题。我假设您想要进行相对日期解析，并且最大时间应为“昨天”。

我从未使用过moment.js，但据文档所述，它非常简单。

使用 var now = moment(); 作为当前日期。然后使用 var time = moment($(e).attr('datetime')); 解析DOM中的每个 time标签。

使用 diff() 方法来检查差异：

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

使用var ago = now.from(time)获取相对时间，并用你的ago变量替换DOM中的时间。

根据评论更新：

好的，虽然未经测试，但这是基本思路：

更新了代码。

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

- Johannes Klauß

---

问题是，我不懂JavaScript。而且，是的，我的意思是最大值应该是“昨天”，超过这个时间的所有内容都不应该被解析。 - its_me

如果能得到更多的帮助就太好了。 (1) 它输出的是“在19小时内”，能否改成“19小时前”之类的？(2) 它替换了整个内容，即<time class="pubdate" datetime="2012-06-09T12:32:10-04:00" pubdate>June 09, 2012</time>被替换为例如<span>in 19 hours</span>。是否可能做到这样的事情？ <time class="pubdate" datetime="2012-06-09T12:32:10-04:00" pubdate>19小时前</time> — 只替换<time>标签内的内容，即用“19小时前”替换“June 09, 2012”，而不替换其他任何内容。 - its_me

我更新了代码，但请注意：如果你想用JavaScript构建东西，那么请先学习JavaScript。你的问题非常基础，你真的应该花些时间学习这门语言。 - Johannes Klauß

Johannes，你说得对。实际上我计划在几天内开始学习JavaScript。再次感谢你的时间。 :) 代码运行得很好。 - its_me

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'）即可。

---

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

- kodkod

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

- its_me

---

额外的HTTP请求相对不重要，但如果您的请求次数有限，您可以链接到托管库的CDN。 - Alastair

Answer 4

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

• 更新所有具有给定类的元素
• 每分钟保持更新（因此“1分钟前”变为“2分钟前”）
• 在现在的前后一天内（例如“上周二晚上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);

})();

- Scott Davey