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

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

4 Kommentare
Sascha

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

Antworten
Werner
Werner

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

Antworten
Martin
Martin

@Werner: Kalenderwochen gibt es doch:

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

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.