如何使用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的确切日期<time> - 即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)获取相对输出，并用您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>');
    }
});

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

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

})();