24

我无法遵循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 很好，因为我已经在我的网页上引用了该库。）

4

4 回答 4

24

请说明您的问题。我假设你想要一个相对日期解析，最大值应该是“昨天”。

我从未使用过 moment.js，但就文档而言，它非常简单。

用作var now = moment();您的当前日期。然后解析time你的 DOM 中的每个 -Tagvar 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>');
    }
});
于 2012-06-10T11:02:38.017 回答
5

您还可以使用该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'
  }
});
于 2012-11-22T15:11:41.037 回答
2

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

于 2012-06-10T12:34:58.480 回答
1

扩展上面@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);

})();
于 2014-08-04T02:17:45.713 回答