web-dev-qa-db-ja.com

Moment.jsの使用方法

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を使用しても問題ありません。すでにWebページでライブラリを参照しています。）

javascriptjqueryrelative-datemomentjs
22
its_me

質問を指定してください。相対的な日付解析が必要であり、最大値は「昨日」であると想定しています。

Moment.jsを使用したことはありませんが、ドキュメントによると、非常に簡単です。

現在の日付としてvar now = moment();を使用します。次に、DOMのすべてのtime- Tagをvar time = moment($(e).attr('datetime'));で解析します

違いを確認するには、diff()メソッドを使用します。

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

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>');
    }
});
_
21
Johannes Klauß

moment().calendar() 関数を使用することもできます。これは、今日に近い日付（今日から最大1週間）を書式設定します。

$('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'）。

更新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'
  }
});
4
kodkod

コードを提供してくれた@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を編集し、最後に前述のコードを追加できます。この方法で、1つの追加HTTP要求を保存します。 ：P

1
its_me

上記の@its_meの実装を拡張したものが、次のバージョンです

  • 指定されたクラスのすべての要素を更新します
  • それらを毎分更新し続けます（「1分前」は「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);

})();
1
Scott Davey