如何使用Moment.js？

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

感谢@JohannesKlauß的代码。这基本上是我如何执行他的答案，以及我如何参考我网站上的代码。

<script src="/js/moment.min.js"></script> 
<script src="/js/moment.executor.js"></script> 

其中，moment.min.js是Moment.js库，并moment.executor.js有这个代码（约翰内斯提供）：

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 3

您也可以使用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'）。

---

UPDATE 2013年9月6日显然，它有一个新的语法，您还可以定位它：

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 4

扩展@ its_me的实现上面，这里有一个版本，

• 更新给定类别的所有元素
• 让它们每分钟更新一次（所以'1分钟前'b ecomes'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); 

})();