24

Moment.jsのドキュメントに従うことができず、設定についてサポートが必要です。私は次のmoment.min.jsように私のウェブページでファイルを適切に参照しました：

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

私のウェブページの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は「昨日」を過ぎた日付に触れたり解析したりしないでください。

ここで、ライブラリに前述のように機能させるには、ライブラリ参照の後に関数を呼び出す必要があります。だから、問題は、関数はどうあるべきかということです。（私はすでに自分のWebページでライブラリを参照しているので、jQueryの使用は問題ありません。）

4

4 に答える 4

24

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

私はmoment.jsを使用したことはありませんが、ドキュメントにある限り、それは非常に単純です。

var now = moment();現在の日付として使用します。次にtime、DOM内のすべての-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>');
    }
});
于 2012-06-10T11:02:38.017 に答える
5

関数を使用することもでき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'。

UPDATE 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'
  }
});
于 2012-11-22T15:11:41.037 に答える
2

コードを提供してくれた @JohannesKlauß に感謝します。これは基本的に私が彼の答えを実行した方法であり、私のウェブサイトでコードを参照している方法です.

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

ここで、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('<span>' + time.from(now) + '</span>');
        }
    });

});

PS:実際にはmoment.min.jsを編集して、最後に前述のコードを追加できます。このようにして、追加の HTTP 要求を 1 つ節約できます。:P

于 2012-06-10T12:34:58.480 に答える
1

上記の @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);

})();
于 2014-08-04T02:17:45.713 に答える