Framework der Woche: moment.js [JS]

Mit dem dieswöchigen Framework kannst du allerlei Spielereien mit der Zeit anstellen. Okay, das funktioniert nur im Web und nicht im echten Leben, aber immerhin...

Initialisierung

Was du brauchst? Du musst nur die Datei von moment.js (idealerweise mit der Lokalisierungsdatei) in deiner Seite einbinden, jQuery oder ähnliches werden nicht benötigt. Und schon kann es los gehen, indem du ein moment()-Objekt definierst und (optional) auf die deutsche Lokalisierung stellst.

var now = moment(); 
now.locale('de');

Zeit setzen

In dem obigen Beispiel wird die aktuelle Systemzeit als Zeitdefinition genutzt. Du kannst aber auch andere Daten als Input benutzen:

var now = moment("Aug 07, 2014"); // ISO-Format oder natives JS-Date-Format 
var now = moment("25.12.2014 11:05", "DD.MM.YYYY HH:mm"); // Datum mit anschließendem Formatstring 
var now = moment.unix(1318781876); // UNIX-Timestamp

Bei mittlerem lassen sich statt des einzelnen Formatstrings auch ein Array von Formatstrings angeben, die nacheinander durchprobiert werden. Das ist zum Beispiel sinnvoll, wenn Formulareingaben eines Nutzers ausgewertet werden sollen.

Zeit ausgeben

Die Zeit auszugeben ist ähnlich einfach wie das setzen:

now.date(); // Tag 
now.month(); // Monat (Achtung, 0 entspricht Januar!) 
now.year(); // Jahr 
now.hour(); // Stunde 
now.minute(); // Minute

Zusammengesetzte Formate sind auch kein Problem:

now.format("dddd, Do MMMM YYYY, h:mm"); // Bsp: Donnerstag, 25. Dezember 2014, 11:05 
now.format("LL"); // Bsp: 25. Dezember 2014

Letzteres Beispiel sind anhand der Lokalisierung vorgegebene Formate. Diese findest du auf der Startseite von moment.js für alle Lokalisierungen ganz unten.

Besonderheit: Zeitdifferenz ausgeben

Was moment.js sehr gut kann: Zeitdifferenzen ausgeben. Für PHP habe ich eine solche Funktion schon einmal erstellt.

now.fromNow(); // Bsp: In 4 Monaten 
now.from(anderesMomentObjekt, true); // Bsp: 5 Tage

Zeit manipulieren

Auch das ist kein Problem, zumindest im Web. Du kannst mittels add(name, value) problemlos Werte hinzufügen, das auch mehrfach hintereinander. Dabei werden beispielsweise auch automatisch Tageswerte über 30/31 in Monate umgerechnet.

now.add('days', 7); 
now.add('h', 7).add('m', 30); // 7 Stunden 30 Minuten hinzufügen

Funktioniert genauso auch mit .substract(name, value), also Werte abziehen.

Zeit vergleichen

Sehr schön: Hiermit kannst du vergleichen, ob ein Moment vor oder nach einem anderen Moment liegt (oder vielleicht auch der selbe ist). Dabei sind nicht nur direkte Vergleich möglich (wäre ja langweilig), auch Vergleiche auf Tages oder auch Jahresebene sind möglich.

moment('2010-10-20').isBefore('2010-10-21'); // true 
moment('2010-10-20').isBefore('2010-12-31', 'year'); // false 
moment('2010-10-20').isBefore('2011-01-01', 'year'); // true

Statt isBefore kannst du genauso auch isSame und isAfter benutzen. Und nun bleibt mir nur noch zu sagen: Viel Spaß mit diesen Momenten ;-)

In dieser neuen Artikelserie stelle ich dir jede Woche ein interessantes Framework inklusive Beispiel für die Webentwicklung vor.