如何使用Moment.js?

its*_*_me 22 javascript jquery relative-date momentjs

我无法关注Moment.js文档,需要一些设置帮助.我moment.min.js在我的网页上正确引用了该文件,如下所示:

<script src="/js/moment.min.js"></script>
Run Code Online (Sandbox Code Playgroud)

来到我的网页的HTML部分,我在同一页面上有两个不同的日期时间:

发布日期

<time class="pubdate" datetime="2012-06-09T12:32:10-04:00" pubdate>
    June 09, 2012
</time>
Run Code Online (Sandbox Code Playgroud)

上次修改日期

<time class="updated" itemprop="dateModified" datetime="2012-06-09T12:32:10-04:00">
    June 9, 2012 ~ 12:32
</time>
Run Code Online (Sandbox Code Playgroud)

重要!解析的相对日期不应超过"昨天".至于其他所有内容,<time>标签应显示没有JavaScript的确切日期时间 - 即Moment.js不应触及或解析过去"昨天"的日期.

现在,为了使库完成前面提到的工作,我需要在库引用之后调用一个函数.所以,问题是,该功能应该是什么?(使用jQuery很好,因为我已经在我的网页上引用了库.)

Joh*_*auß 22

请指出你的问题.我假设你想要一个相对日期解析,最大值应该是"昨天".

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

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

要检查差异,请使用以下diff()方法:

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

使用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>');
    }
});
Run Code Online (Sandbox Code Playgroud)


kod*_*kod 5

您还可以使用该moment().calendar()函数,该函数将为您设置接近今天(从今天起最多一周)的日期格式:

$('time').each(function(i, e) {
  var time = moment($(e).attr('datetime'));

  $(e).html('<span>' + time.calendar() + '</span>');
});?
Run Code Online (Sandbox Code Playgroud)

您可以使用以下代码自定义格式字符串:

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'
};
Run Code Online (Sandbox Code Playgroud)

如果您没有在昨天之前格式化日期兴趣,只是改变的格式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'
  }
});
Run Code Online (Sandbox Code Playgroud)