Datum/Zeit Libraries in Javascript

Um in Javascript mit Daten und Zeiten zu arbeiten gibt es das Date Objekt.

Ein Aufruf des Konstruktors ohne Argumente liefert ein Objekt mit dem aktuellen Datum und der aktuellen Zeit zurück.

Ein spezifisches Datum lässt sich mit der Übergabe von Argumenten erstellen. Date kann Strings im Format RFC2822 verarbeiten. Neuere Browser unterstützen auch einen Teil des ISO 8601 Standards. Oder man übergibt die Anzahl Millisekunden seit Mitternacht 1.1.1970 UTC. Als dritte Möglichkeit übergibt man Jahr, Monat, Tag und optional Stunden, Minuten, Sekunden, Millisekunden.

Beim Monat muss darauf geachtet werden das dieser 0 basiert ist (0 = Januar, 11 = Dezember). Nicht vergessen sollte man new anzugeben. Ohne new erhält man anstatt einem Date einen String zurück, der das aktuelle Datum und Zeit beinhaltet.

Das Date Objekt liefert Funktionen mit um Teile des Datums und der Zeit zu lesen und zu verändern. Zum Beispiel liest folgender Code das aktuelle Jahr.

Mit setFullYear(year) wird das Datum auf ein bestimmtes Jahr gesetzt.

Eine Auflistung der Date Funktionen findet man auf dem Mozilla Developer Network.

Mit den get/set Funktionen lassen sich auch einfache Berechnungen durchführen. Folgender Code erstellt ein Date Objekt das 3 Tage in der Zukunft liegt.

Differenzen lassen sich mit der Funktion getTime berechnen. Diese Funktion liefert die Anzahl Millisekunden seit dem 1.1.1970 zurück.

Ein Schwachpunkt des nativen Date Objektes ist Parsen und Formatieren von Datum und Zeit. Date kennt zwar die parse Funktion aber der String muss entweder als RFC2822 oder ISO 8601 (Subset) übergeben werden. Auch beim Konvertieren in einen String kennt Date einige Funktionen (z.B. toISOString, toLocaleString). Aber wenn man sein eigenes Datumsformat ausgeben will muss dies programmiert werden.

Da Berechnungen und Parsen/Formatieren vom nativen Date Objekt nicht genügend unterstützt werden, gibt es einige Libraries die hier in die Lücke springen und die Behandlung von Datum und Zeit versuchen zu vereinfachen.

Wir schauen uns im folgenden die Libraries XDate, Moment.js und Sugar genauer an.

XDate

XDate ist komprimiert (gzip) 2.9 kB gross und hat keine Abhängigkeit zu anderen Libraries. Das zentrale Objekt in XDate ist XDate. Ein aktuelles Datum mit aktueller Zeit lässt sich, wie das Date Objekt, mit new erstellen.

XDate unterstützt alle Konstruktor Aufrufe die vom Date bekannt sind. Zusätzlich kann ein Date Objekt als Argument dem Konstruktor übergeben werden.

Umgekehrt lässt sich mit toDate aus dem XDate das Date Objekt extrahieren.

XDate kennt die vom Date Objekt bekannten get/set Funktionen. Interessant sind die zusätzlichen Funktionen mit denen sich Berechnungen durchführen lassen. Folgendes Beispiel berechnet die Differenz in Tagen bis zu Weihnachen.

Für jede Einheit (Year, Month, Week, …) gibt es eine entsprechende diffEinheit Funktion (diffYears, diffMonths, diffWeeks)

Einheiten addieren und subtrahieren lassen sich mit der entsprechenden addEinheit Funktion

Beim Parsen unterstützt XDate nur Strings im Format ISO8601 und IETF.

Beim Formattieren bietet XDate mit den Funktionen toString und toUTCString mehr Möglichkeiten als Date. Mann kann diesen Funktionen einen Formatstring mitgeben der das Outputformat beschreibt.

Eine Beschreibung der unterstützten Tokens findet man hier: http://arshaw.com/xdate/#Formatting

Localization wird auch unterstützt. Allerdings müssen die benötigten Strings für Monatsname und Wochentagname selber angegeben werden. Hier ein Beispiel für Französisch: https://gist.github.com/1221376

Moment.js

Diese Library ist minified und komprimiert 3.3 kB gross und hat, wie XDate, keine Abhängigkeit zu anderen Libraries. Moment.js liefert verschiedene Sprachen mit die allerdings nicht im Core Javascript enthalten sind sondern bei Bedarf zusätzlich geladen werden müssen.

Das zentrale Objekt in Moment.js ist moment. Folgender Code erzeugt ein Objekt mit dem aktuellen Datum und Zeit.

Der Funktion moment können auch ein bestehendes Date Objekt oder die Anzahl Millisekunden übergeben werden um damit ein bestimmtes Datum zu erzeugen.

Eine weitere Möglichkeit ist ein Array mit Parametern zu übergeben. Die Reihenfolge der Zahlen im Array entspricht dem Konstruktor Aufruf beim Date Objekt. Wenn Bestandteile wegelassen werden wird immer der kleinste Wert angenommen.

Mehr Möglichkeiten als Date und XDate bietet Moment.js beim Parsen von Strings. Hier kann ein Formatstring mitgegeben werden der angibt in welchem Format der String aufgebaut ist.

Die Beschreibung der unterstützen Tokens findet man in der Dokumentation: http://momentjs.com/docs/#/parsing/date

Formatieren lässt sich ein Datum mit der format Funktion. Diese Funktion unterstützt die gleichen Tokens wie das Parsen.

Eine Möglichkeit um die Differenz zwischen zwei Daten auszugeben bietet from an. Damit lassen sich Strings wie “a day ago” oder “in 5 days” erzeugen.

Moment.js liefert auch Funktionen mit um einzelne Bestandteile eines Datums zu lesen und zu ändern. Im Gegensatz zu Date haben diese Funktionen kein set/get Prefix.

Diese Funktionen lassen sich auch miteinander verketten.

Um die Zeit auf 00:00:00.000 zu setzen gibt es die Funktion sod (start of day) und eod (end of day) um die Zeit auf 23:59:59.999 zu setzen.

Zusätzlich kann mit day der Wochentag gesetzt werden. Dabei ist 0 = Sonntag und 6 = Samstag. Mit der Subtraktion oder Addition von 7 lässt sich der Wochentag von letzter oder nächster Woche setzen.

Die Funktion diff berechnet Differenzen zwischen zwei Daten. Dabei kann spezifiziert werden in welcher Einheit das Ergebnis zurückgegeben werden soll.

Additionen und Subtraktionen lassen sich mit add und subtract durchführen.

Eine weitere nützliche Funktion von Moment.js ist isLeapYear die true oder false zurückliefert.

Sugar

Sugar ist keine reine Datumslibrary sondern erweitert alle nativen Javascript Objekte (Array, String, Number, …) um weitere Funktionen. Die Library ist deshalb einiges grösser (17kB gzipped). Sugar liefert aber eine Version aus (sugar-x.x.x-dates-only.min.js) die nur die Datumsfunktionen beinhaltet.

Im Gegensatz zu XDate und Moment.js gibt es hier kein neues Objekt sondern die zusätzlichen Funktion werden im Prototype des entsprechenden Objektes angefügt und stehen dann überall zur Verfügung.

Um ein Datumsobjekt zu erstellen führt Sugar die Funktion create ein.

Zusätzlich erlaubt es create auch Daten aus Strings zu parsen.

Sugar kann auch spezielle String wie “today” oder “the 13th of next month” verarbeiten. Eine Liste von möglichen Werten findet man in der Dokumentation.

Mit der zusätzlichen Angabe einer Sprache werden auch andere Sprachen und Formate verstanden.

Mit set können beliebige Teile des Datums und der Zeit verändert werden.

beginningOfUnit setzt das Datum an den Beginn der entsprechenden Einheit. Mit dem Gegenstück endOfUnit setzt man das Datum an das Ende der entsprechenden Einheit.

Für die Datumsarithmetik steht die Funktionen addUnits zur Verfügung. Zusätzlich kann mit rewind und advance das Datum um bestimmte Werte “vorgespult” oder “zurückgespult” werden.

Sugar bietet umfangreiche Funktionen an um Daten zu vergleichen. Es ist möglich zwei Daten miteinander zu vergleichen und zu prüfen ob eins davon zeitlich vor dem anderen liegt. isBetween erlaubt es zu prüfen ob ein Datum zwischen zwei Daten liegt. isFuture und isPast ermöglichen eine Prüfung ob ein Datum in der Zukunft oder in der Vergangenheit liegt. Mit is kann geprüft werden ob das Datum auf einem bestimmten Tag, Monat, Jahr liegt. isWeekend und isWeekday prüfen das Datum darauf ob es auf einem Samstag-Sonntag oder Montag-Freitag liegt.

Differenzen zwischen zwei Daten lassen sich mit unitsSince und unitsUntil berechnen.

Mit der Funktion format kann ein Datum auf unterschiedlichste Arten in einen String umgewandelt werden. Dazu übergibt man der Funktionen einen String der das Format beschreibt. Die einzelnen Tokens werden mit geschweiften Klammern {..} umschlossen. Zusätzlich existieren Konstanten, wie Date.ISO8601_DATETIME, die ein standardisiertes Format beschreiben und der format Funktion übergeben werden können.

Sugar kennt, wie Moment.js, Funktionen um Strings wie “4 days ago” und “10 minutes from now” zu erzeugen.

Sugar erweiter nicht nur das Date Objekt, sondern auch das Number Objekt um Datumsfunktionen, wie zum Beispiel unitBefore und unitAfter. Oder die unit Funktionen um eine Einheit in Millisekunden umzurechnen.

Fazit

Date bietet nur minimale Funktionen um mit Daten und Zeiten zu arbeiten. XDate ist vom Funktionsumfang gesehen die kleinste der drei hier vorgestellten Libraries. Wenn in einem Projekt Datumsformatierungen vorgenommen werden, Datumsarithmetik oder Differenzen berechnet werden müssen ist XDate aber eine gute Wahl, die mit einem Overhead von 2.9 kB nicht gross ins Gewicht fällt. Moment.js kennt ein paar Tricks mehr, wie das Parsen von Daten und die relativen Daten (10 minutes ago), und ist mit 3.3 kB nicht viel grösser als XDate.
Sugar ist dann eine gute Wahl wenn man nicht nur die Date Funktionen sondern auch die Erweiterungen der anderen nativen Objekte (String, Number,Array, Objekt, Function, RegExp) benutzen möchte. Alternativ kann aber auch das Sugar Javscript File eingebunden werden das nur die Datumsfunktionen beinhaltet.

Es braucht aber nicht immer eine zusätzliche Datum/Zeit Library. Oft genügt das native Date Objekt in anderen Fällen können die Datumsberechnungen auf dem Server durchgeführt werden und der Client muss die Resultate dann nur anzeigen. Wichtig ist das man die Grösse der Javascript Files im Auge behält. Dies ist dann wichtig wenn Webapplikationen für mobile Geräte entwickelt werden.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">