Moment.jsの使い方

Question

私はMoment.js documentationに従うことができず、設定に助けが必要です。私はそうのように私のWebページ上で適切にmoment.min.jsファイルを参照しました：

公開日

：

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

は私のWebページのHTML部分に来て、私は、同じページ上の2つの異なる日時のを持っています

<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();を使用してください。相対出力を取得し、あなたのago変数を使用してDOMに時間を交換する

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

使用var ago = now.from(time)：次にdiff()メソッドを使用して違いを確認するにはvar time = moment($(e).attr('datetime'));

であなたのDOM内のすべてのtime -Tagを解析。コメントに基づい

更新：

、オーケーもテストされていないが、それは基本的な考え方です：

コードを更新しました。コードの@JohannesKlaußに

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

感謝。これは基本的に私が彼の答えを実行した方法と私のウェブサイト上でコードを参照している方法です。

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がMoment.jsライブラリで、moment.executor.jsは、このコード（ヨハネスの礼儀を）持っている、

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

：moment.minを実際に編集することができます。jsそして最後に上記のコードを追加してください。このようにして、追加のHTTPリクエストを1つ保存します。 ：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' 
}; 

あなたは昨日より前の日付の書式に興味がない場合は、単に（'L'など）のフル日時形式にlastWeekとnextWeekのフォーマットを変更します。

---

UPDATE 2013年9月6日は、どうやら、それはまた、あなたがそれをローカライズすることができる新しい構文があります。上記のits_meの実装@拡張

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

を、ここ

バージョンです
• は、指定されたクラスのすべての要素を更新します
• は毎分更新されます（したがって '1分前に' b ecomes '2 minutes ago'）
• は、今から+ -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); 

})();