Moment.js - Clientseitig Zeiten parsen und berechnen

27 Juli 2016
Andreas Heizmann

Für das Arbeiten mit Zeiten im serverseitigen .NET Umfeld gibt es im System Namespace die Klasse DateTime. Diese bietet out of the box, alles was man an Grundfunktionalität zum Parsen, Berechnen und Vergleichen von Zeiten im Alltag braucht. In der clientseitigen Javascript-Welt existiert dazu das Objekt Date als Gegenstück. Da jedoch nicht alle Browser die Funktionen von Date gleich implementieren entstehen hier vor allem beim Parsen sehr leicht Fehler.

Zum Glück gibt es auch hierfür wieder Hilfe in Form einer weiteren Javascript-Bibliothek mit Namen „Moment.js“.
Moment.js beseitigt die Kompatibilitätsprobleme und ist damit so etwas wie das jQuery der Javascript Zeiten.

Das Moment-Objekt:

Zum Rechnen und Vergleichen muss man sich zunächst ein neues Moment-Objekt erzeugen.
Dazu kann man sich entweder direkt das Objekt mit dem aktuellen Datum erzeugen lassen:
var jetzt = moment();

oder einen vorhandenen String parsen.

Beim Parsen gibt es zwei Möglichkeiten ein neues Moment-Objekt zu erstellen.

1. Möglichkeit: Mit einem String
var datum = moment("2016-08-01")

Diese Variante sollte man jedoch nur verwenden wenn man ein Datum als Text in einem gültigen ISO-8601 Format vorliegen hat.

2. Möglichkeit: Ein String und ein dazugehörendes Format:
var letztesJahr = moment("27.07.2015", "DD.MM.YYYY");

Validierung:

Zur Validierung stehen verschiedene Methoden zur Verfügung:

  1.   moment([2015, 25, 35]).format(); => 'Invalid date'
  2.   moment("dieser Text ist kein Datum").isValid(); => false

Anzeige von Zeitabständen:

Das Killerfeature überhaupt, ist die Möglichkeit Zeitabstände zu berechnen und sich direkt als passenden Text ausgeben zu lassen:

moment("27.07.2015","DD.MM.YYYY").fromNow(); => 1 year ago

var datumHeute = moment("27.07.2016","DD.MM.YYYY");
var datum2 = moment("29.07.2018","DD.MM.YYYY");
datum1.from(datum2); => "in 2 years"

Dabei werden automatisch sinnvolle Schritte zwischen Minuten, Stunden, Tagen usw. gemacht.

Ausgabe und Datumsformatierung:

Möchte man das Datum in einem bestimmten Format anzeigen, bietet Moment.js die gleichnamige format() Methode:

moment().format("dddd, MMMM Do YYYY, h:mm:ss"); => "Mittwoch, Juli 27. 2016, 10:50:10"

i18n

Möchte man andere Sprachen unterstützen, kann man entweder das komplette Paket inklusive Lokalisierung verwenden (moment-with-locales.js),
oder nur die Basisvariante moment.js + passendem Sprachpaket. Ich empfehle die letzte Variante, da das Komplettpaket selbst mit gzip Komprimierung auf stolze 60kB kommt.

Der Wechsel zwischen den Sprachen ist denkbar simpel:

moment.locale("de");

 

Das war ein kleiner Auszug an Features von Moment.js.
Alle Funktionen und weitere Details gibt es auf der offiziellen Seite des Projekts unter http://momentjs.com/