web-dev-qa-db-de.com

Wie benutze ich Moment.js?

Ich kann der Moment.js-Dokumentation nicht folgen und brauche Hilfe beim Einrichten. Ich habe die moment.min.js-Datei auf meiner Webseite wie folgt richtig referenziert:

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

Um zum HTML-Teil meiner Webseite zu gelangen, habe ich zwei verschiedene datetime's auf derselben Seite:

Veröffentlichungsdatum

<time class="pubdate" datetime="2012-06-09T12:32:10-04:00" pubdate>
    June 09, 2012
</time>

Zuletzt geändertes Datum

<time class="updated" itemprop="dateModified" datetime="2012-06-09T12:32:10-04:00">
    June 9, 2012 ~ 12:32
</time>

Wichtig! Das relative Datums-Parsing sollte nicht über "gestern" hinausgehen. Bei <time>-Tags sollte genau die Datumszeit angezeigt werden, die sie ohne JavaScript verwenden würden - d. H. Moment.js sollte keine Datumsangaben berühren, die das Datum "gestern" überschreiten.

Damit die Bibliothek ihre Arbeit wie zuvor beschrieben ausführen kann, muss ich eine Funktion nach der Bibliotheksreferenz aufrufen. Die Frage ist also, was soll die Funktion sein? (Die Verwendung von jQuery ist in Ordnung, da ich die Bibliothek auf meiner Webseite bereits referenziere.)

20
its_me

Bitte geben Sie Ihre Frage an. Ich gehe davon aus, dass Sie ein relatives Datums-Parsing wünschen und das Maximum "gestern" sein sollte.

Ich habe moment.js noch nie benutzt, aber soweit die Docs sagen, ist es ziemlich einfach.

Verwenden Sie var now = moment(); als aktuelles Datum. Parsen Sie dann jedes time- Tag in Ihrem DOM mit var time = moment($(e).attr('datetime'));

Um den Unterschied zu überprüfen, verwenden Sie die diff()-Methode:

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

Verwenden Sie var ago = now.from(time), um die relative Ausgabe abzurufen, und ersetzen Sie die Zeit in Ihrem DOM durch Ihre Variable ago.

Update basierend auf Kommentar :

Okay, ungeprüft, aber das ist die Grundidee:

Der Code wurde aktualisiert.

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

Sie können auch die Funktion moment().calendar() verwenden, mit der Daten für Sie in der Nähe von heute (bis zu einer Woche ab heute) formatiert werden:

$('time').each(function(i, e) {
  var time = moment($(e).attr('datetime'));

  $(e).html('<span>' + time.calendar() + '</span>');
});​

Sie können die Formatzeichenfolgen mit diesem Code anpassen:

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'
};

Wenn Sie kein Datum vor gestern formatieren möchten, ändern Sie einfach die Formate von lastWeek und nextWeek in das vollständige Datums-/Uhrzeitformat (z. B. 'L').


UPDATE 2013-09-06 Anscheinend gibt es eine neue Syntax, mit der Sie sie auch lokalisieren können: 

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

Danke an @ JohannesKlauß für den Code. Dies ist im Wesentlichen, wie ich seine Antwort ausgeführt habe und wie ich auf den Code auf meiner Website verweise.

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

Wobei moment.min.js die Bibliothek Moment.js ist und moment.executor.js diesen Code hat (mit freundlicher Genehmigung von 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: Sie können tatsächlich moment.min.js bearbeiten und den oben genannten Code direkt am Ende einfügen. Auf diese Weise speichern Sie eine zusätzliche HTTP-Anforderung. : P

1
its_me

Die Implementierung von @ its_me oben erweitern, hier eine Version

  • aktualisiert alle Elemente mit einer bestimmten Klasse
  • hält sie jede Minute auf dem neuesten Stand (so wird 'vor 1 Minute' zu 'vor 2 Minuten')
  • wechselt zu einem anderen Format, wenn ab jetzt + -1 Tage (z. B. Letzter Dienstag um 23:45 Uhr)

Hier ist ein JSFiddle zum Spielen.

Ihr HTML:

<time class="cw-relative-date" datetime="2014-06-09T12:32:10-00:00"></time>

Die JS soll enthalten:

(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