如何使用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); 

})();