Anzeige
Anzeige
UX & Design

Moment.js: Zeiten parsen und berechnen mit JavaScript

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.

Von Ilja Zaglov
3 Min.
Artikel merken
Anzeige
Anzeige

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

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

<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.

Anzeige
Anzeige
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.

Anzeige
Anzeige
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.

Anzeige
Anzeige
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.

Anzeige
Anzeige

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.

Anzeige
Anzeige
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.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
4 Kommentare
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

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

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

Antworten
Martin

@Werner: Kalenderwochen gibt es doch:

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

Antworten
Abbrechen

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

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige