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

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

})();

如何使用Moment.js？

4 个答案: