如何使用Moment.js?
我无法关注Moment.js文档 ,需要一些设置帮助。 我在我的网页上正确引用了moment.min.js
文件,如下所示:
来到我的网页的HTML部分,我在同一页面上有两个不同的日期时间:
发布日期
June 09, 2012
上次修改日期
June 9, 2012 ~ 12:32
重要! 解析的相对日期不应超过“昨天”。 至于其他所有内容, 标签应显示没有JavaScript的确切日期
– 即Moment.js不应触及或解析过去“昨天”的日期。
现在,为了使库完成前面提到的工作,我需要在库引用之后调用一个函数。 所以,问题是,该function应该是什么? (使用jQuery很好,因为我已经在我的网页上引用了库。)
请指出你的问题。 我假设你想要一个相对日期解析,最大值应该是“昨天”。
我从未使用过moment.js,但就文档而言,它非常简单。
使用var now = moment();
作为你当前的日期。 然后每次在你的DOM中解析-tag 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('' + time.from(now) + ''); } });
您还可以使用moment().calendar()
函数,该函数将为您接近今天的日期格式(从今天起最多一周):
$('time').each(function(i, e) { var time = moment($(e).attr('datetime')); $(e).html('' + time.calendar() + ''); });
您可以使用以下代码自定义格式字符串:
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' } });
感谢@JohannesKlauß的代码。 这基本上是我如何执行他的答案以及我如何引用我网站上的代码。
其中, 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('' + time.from(now) + ''); } }); });
PS:您实际上可以编辑moment.min.js并在其末尾添加上述代码。 这样,您将保存一个额外的HTTP请求。 :P
扩展@ its_me的实现,这是一个版本
- 使用给定的类更新所有元素
- 让它们每分钟都更新(所以’1分钟前’成为’2分钟前”
- 从现在起+ 1天后切换到不同的格式(例如,上周二晚上11:45)
这是一个可以玩的JSFiddle 。
你的HTML:
JS包括:
(function () { // Define a function that updates all relative dates defined by