JavaScript & jQuery

Neue Zeitrechnung mit der JavaScript-Bibliothek Moment.js

9. Februar 2013
von

Mit Zeitangaben zu rechnen, ist nicht ganz einfach. Es gibt viele unterschiedliche Einheiten (Jahr, Monat, Tag, Stunde etc.) und beinahe ebenso viele Zahlensysteme, von denen keines dezimal ist. Die JavaScript-Bibliothek Moment.js liefert eine Reihe nützlicher Funktionen, mit denen sich bequem Zeitspannen ausrechnen und Zeitangaben in unterschiedlichen Formaten ausgeben lassen – und das für verschiedene Sprachen und Länder.


Moment.js

Zeiten schnell und einfach formatieren

Ist die fünf Kilobyte große JavaScript-Datei im HTML-Kopf eingebunden, reicht eine Zeile JavaScript, um die Funktionen von Moment.js anzuwenden. Wer die Bibliothek in einer anderen Sprache als Englisch nutzen will, muss eine entsprechende Sprachdatei mit einbinden:

1
2
moment().lang("de");
moment().format("Do MMMM. YYYY");

Die erste Zeile des Beispiels stellt die Sprache auf Deutsch um. Die zweite Zeile gibt das aktuelle Datum in der gängigen deutschen Schreibweise (Ordnungszahl, Monat- und Jahreszahl) aus. Es werden die bekannten Abkürzungen für unterschiedliche Ausgaben verwenden („M“ für Monat als Zahl ohne führende Null, „MM“ für Monat mit führender Null, „MMM“ für abgekürzten Monat und „MMMM“ für ausgeschriebenen Monat). Die Angabe „Do“ gibt den Tag als Ordnungszahl aus. Im Deutschen wird der Zahl einfach ein Punkt angefügt. Interessant ist diese Angabe für die englische Ausgabe, da die Bildung von Ordnungszahlen dort anders ist als im Deutschen („1st“, „2nd“, „3rd“ etc.).

Anstelle der aktuellen Zeit kann natürlich auch eine beliebige andere Zeitangabe formatiert werden:

1
moment("01-31-2013, "DD-MM-YYYY").format("Do MMMM. YYYY"); // 31. Januar 2013

Moment.js kann Datumsangaben auch validieren und gibt false aus, wenn eine Angabe kein Datum sein kann:

1
moment("01-32-2013", "MM-DD-YYYY").isValid(); // false

Zeitspannen und Dauern berechnen und ausgeben

Knifflig wird es ja immer dann, wenn man mit Zeit rechnen will, um eine Zeitspanne oder eine Dauer auszugeben. Da werden Zeitangaben erst in Sekunden umgerechnet und anschließend – nach Addition oder Subtraktion von zwei Zeiten – wird das Ganze wieder in ein für den Menschen nachvollziehbares Format gebracht. Moment.js nimmt einem diese wilde Rechnerei ab und stellt dafür entsprechende Funktionen zur Verfügung.

1
moment().add("days", 7).add("months", 1);

Im Beispiel werden dem aktuellen Datum sieben Tage und ein Monat hinzugefügt. Das Datum lässt sich anschließend mit format() beliebig formatieren. Das Gegenstück subtract() zum Subtrahieren von Zeiten ist ebenfalls vorhanden.

Häufig werden Zeitangaben in Relation zum aktuellen Datum gemacht– zum Beispiel um anzugeben, wann etwas stattfindet oder wann etwas stattgefunden hat. Mit der Funktion fromNow() können solche Angaben berechnet und ausgeben werden:

1
moment("01-31-2013, "DD-MM-YYYY").fromNow();

Je nachdem, wie lange das angegebene Datum in der Zukunft oder Vergangenheit liegt, gibt Moment.js die Dauer in Jahren, Monaten, Tagen, Stunden oder Minuten an. Statt einfach das Datum auszugeben werden übliche Angaben wie „in drei Tagen“ oder „morgen“ verwendet.

Die Funktion humanizeDuration() kann zudem feste Zeitspannen in für den Menschen gebräuchliche Angaben ausgeben:

1
moment.humanizeDuration(-1, "minutes", true); // vor einer Minute

Fazit: Moment.js macht es einem wirklich einfach, mit Zeitangaben zu rechnen. Dass Zeiten nicht nur als schnöde Zahlen ausgegeben werden können, sondern als gängige Wortkombinationen, ist das I-Tüpfelchen auf diesem umfangreichen und nützlichen Werkzeug. Moment.js steht frei unter der MIT-Lizenz zur Verfügung.

(dpe)

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Tags:

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!