Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Moment.js: Zeiten parsen und berechnen mit JavaScript

Moment.js macht für Webworker die Arbeit mit Datums- und Zeitwerten zum Kinderspiel. (Screenshot: Moment.js)

Die Zeit ist ein kompliziertes Thema. Nicht nur philosophisch, auch für Web-Worker stellen Zeitberechnungen eine Herausforderung dar. Mit Moment.js soll die Arbeit mit der Zeit in Web-Anwendungen einfacher werden.

Moment.js: Die Basics

Moment.js
Moment.js macht für Webworker die Arbeit mit der Datums- und Zeitwerten zum Kinderspiel. (Screenshot: t3n)

Moment.js ist eine JavaScript-Bibliothek zum Parsen, Validieren, Manipulieren und Berechnen von Zeit- und Datumswerten. Die rund zehn Kilobyte große Bibliothek liegt derzeit in der Version 2.8.1 vor und bietet verschiedenste Möglichkeiten, um mit Zeitwerten zu arbeiten.

Moment.js funktioniert sowohl im Browser als auch unter Node.js und unterstützt die Asynchronous-Module-Definition (AMD), wie sie beispielsweise bei Require.js eingesetzt wird. Der Einfachheit halber betrachten wir Moment.js als im Browser über das Script-Tag eingebundene Bibliothek.

Moment.js: Parsing

Um den aktuellen Datums- und Zeitwert zu erhalten, musst du Moment.js mit der moment()-Methode ohne Übergabe jeglicher Parameter initialisieren.

<script src="pfad/zu/moment.js"></script>
<script>var now = moment();</script>

Parsing mit einem String

Das vorhergehende Beispiel würde ein Moment-Objekt mit dem aktuellen Datum des Clients erzeugen. Mit Moment.js ist es jedoch zusätzlich möglich, das Datum aus einem String zu extrahieren.

var datum = moment("2013-02-08")

Der Browsersupport für diese Methode ist jedoch inkonsistent. Genauere Ergebnisse erhältst du, wenn du das Parsing mit Angabe der Formatierung durchführst. Eine Ausnahme hierfür gibt es jedoch: Wenn du einen String in ISO-8601-Formatierung verwendest, wird Moment.js die Verarbeitung korrekt durchführen.

Parsing mit einem String und dem dazugehörigen Format

Wenn das Format des Input-Strings bekannt ist, kann es an Moment.js zum Parsen übergeben werden.

moment("25.12.2014", "DD.MM.YYYY");

Der Parser ignoriert hierbei jegliche Sonderzeichen, sodass beide nachfolgenden Schreibweisen funktionieren würden.

moment("25.12.2014", "DD.MM.YYYY");
moment("25/12/2014", "DD.MM.YYYY");

Sofern keine Zeitzone definiert wird, nutzt Moment.js die aktuelle Zeitzone für das Parsing.

moment("18.08.2014 15:30", "DD.MM.YYYY HH:mm");
// 15:30 nach Lokalzeit
moment("18.08.2014 15:30", "DD.MM.YYYY HH:mm Z");
// 15:30 GMT

Parsing mit einem String und mehreren Formate

Wenn das exakte Format des Strings nicht bekannt ist, aber mehrere Möglichkeiten in Frage kommen, können mehrere Formate als Parameter an Moment.js übergeben werden.

moment("12-25-1995", ["MM-DD-YYYY", "YYYY-MM-DD“]);

Moment.js: Die Validierung

Moment.js bietet eine Methode zur Validierung von Datums- und Zeitwerten und beinhaltet eine strengere Logik als der Date-Konstruktor von JavaScript.

new Date(2013, 25, 14).toString(); // "Sat Feb 14 2015 00:00:00 GMT-0500 (EST)"
moment([2015, 25, 35]).format(); // 'Invalid date'
moment("not a real date").isValid(); // false

Moment.js: Getter und Setter-Methoden

Moment.js benutzt Getter- und Setter-Methoden, die schon aus jQuery bekannt sein dürften. Wird die Methode parameterlos aufgerufen, dient sie als Getter. Mit Übergabe eines Parameters wird sie zum Setter.

moment().second(Number);
moment().second(); // Number

moment().minute(Number);
moment().minute(); // Number

moment().hour(Number);
moment().hour(); // Number

moment().date(Number);
moment().date(); // Number

moment().day(Number|String);
moment().day(); // Number

Solltest du zu hohe Werte an den Setter übergeben (zum Beispiel 90 Sekunden), werden sie an die nächsthöhere Instanz – in diesem Fall also für Minuten – zur Berechnung weitergegeben.

Zeitmanipulation mit Moment.js

Sobald du ein Moment-Objekt hast, wirst du es wahrscheinlich in irgendeiner Form zum Rechnen benutzen wollen. Hierfür stehen verschiedene Methoden zur Verfügung.

moment().add() und moment().substract()

Mit moment().add() und moment().subtract() kannst du beispielsweise verschiedene Zeitwerte hinzuaddieren oder subtrahieren.

// Fügt sieben Tage hinzu
moment().add('days', 7);
// Kurzschreibweise
moment().add('d', 7);
// Verkettung mit Monats-Manipulation
moment().add('days', 7).add('months', 1);

// Subtrahiert 7 Tage
moment().subtract('days', 7);
// Kurzschreibweise
moment().subtract('d', 7);
// Verkettung mit Monats-Manipulation
moment().subtract('days', 7).subtract('months', 1);

Zeitabstände mit Moment.js berechnen

Natürlich kann Moment.js auch Zeitabstände berechnen. So können beispielsweise die zeitlichen Abstände zwischen dem aktuellen Zeitstempel oder zwei Moment-Objekten berechnet werden.

moment("01.01.2012","DD.MM.YYYY").fromNow(); // 2 years ago

var a = moment("01.01.2012","DD.MM.YYYY");
var b = moment("18.08.2015","DD.MM.YYYY");
a.from(b); // "in 2 years"

Datumsformatierung mit Moment.js

Wenn die Berechnungen abgeschlossen sind, soll in der Regel eine Ausgabe der Daten erfolgen. Hierfür stellt Moment.js die format()-Methode zur Verfügung. Mit moment().format() kannst du die errechneten Werte im von dir benötigten Format ausgeben.

moment().format("dddd, MMMM Do YYYY, h:mm:ss");
// "Tuesday, August 18th 2015, 12:00:00"
moment('gibberish').format('YYYY MM DD');
// "Invalid date"

Moment.js hat noch mehr zu bieten

Dies sind nur die grundlegenden Funktionen, die Moment.js zu bieten hat. Die Bibliothek stellt einen noch weitaus größeren Funktionsumfang wie Vergleichsfunktionen, Lokalisierung und Zeitzonen-Support (mit entsprechender Erweiterung) zur Verfügung. Was Moment.js noch zu bieten hat, erfährst du auf der offiziellen Seite von Moment.js.

Bitte beachte unsere Community-Richtlinien

3 Reaktionen
Martin

@Werner: Kalenderwochen gibt es doch:

Schau mal hier: http://momentjs.com/docs/#/get-set/week-year/

Werner

Fehlen wohl die Kalenderwochen..für betriebliches oft unverzichtbar..
Syntax erinnert mich an Rails: my_date = Time.now + 6.days .. nett.

Sascha

Wirklich sehr nützlich! Habe ich schon in mehreren Projekten eingesetzt!
kann ich nur jedem empfehlen der viel mit Zeiten zu rechnen hat!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Finde einen Job, den du liebst