Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » JavaScript & jQuery » Neue Zeitrechnung mit der JavaScript-Bibliothek Moment.js

Neue Zeitrechnung mit der JavaScript-Bibliothek Moment.js

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Keine Kommentare
Lesedauer: 2 Minuten
  • von Denis Potschien
  • 9. Februar 2013

Inhaltsverzeichnis

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.

momentjs Neue Zeitrechnung mit der JavaScript-Bibliothek Moment.js
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:

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:

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:

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.

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:

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:

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

Denis Potschien

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.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

WebOptimizer Logo mit der Aufschrift: Die deutsche Agentur in Österreich.

WebOptimizer

Villach

SEO Galaxy Logo.

SEO Galaxy

Udler

Minddraft Agentur Logo.

minddraft AG

Allenwinden

Zwei N als Logo für die Niel Neumann Online Marketing Agentur.

Niels Neumann Online Marketing

Limburgerhof

Johda Webdesign Berlin Logo.

JOHDA Webdesign

Berlin

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Die passende Digitalagentur finden: Das solltest Du beachten

Wir unterstützen Dich bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Mitarbeiter einer WordPress-Agentur mit einer Tasse Kaffee im Vordergrund.
WordPress

WordPress — eine gute Wahl für Ihre Unternehmenswebsite?

Hier finden Sie ein ausführliches FAQ zu WordPress als Entscheidungshilfe und eine Auswahl von professionellen WordPress Agenturen.

→

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑