Moment.js: Vollständige Erklärung und praktische Beispiele der Datumsbibliothek

Informatec Digital » Lenguajes » Moment.js: Vollständige Erklärung und praktische Beispiele der Datumsbibliothek

Die Arbeit mit Datum und Uhrzeit in JavaScript kann für Webentwickler eine echte Herausforderung sein . Glücklicherweise vereinfachen Tools wie Moment.js diesen Prozess erheblich und erleichtern alles von der einfachen Datumsformatierung bis hin zu komplexen Manipulations- und Validierungsvorgängen. Wenn Sie jemals frustriert waren, weil Sie in Ihren Projekten Datumsangaben nicht korrekt konvertieren, vergleichen oder anzeigen konnten, war Moment.js wahrscheinlich schon einer Ihrer besten Freunde – oder Sie sollten es zumindest einmal ausprobieren.

In diesem Artikel erfahren Sie alles Wissenswerte über Moment.js : von den Hauptfunktionen und weniger bekannten Tricks über praktische Beispiele bis hin zur Integration mit anderen Bibliotheken. Ich erkläre Ihnen die Syntax und die damit realisierbaren Aufgaben. Außerdem beleuchten wir die Grenzen, aktuelle Updates und Alternativen, falls Sie nach einer moderneren Lösung suchen.

Was ist Moment.js und warum ist es so beliebt geworden?

Moment.js ist eine JavaScript-Bibliothek, die die Arbeit mit Datum und Uhrzeit vereinfacht . Sie ermöglicht das Erstellen, Parsen, Bearbeiten und Anzeigen von Datumsangaben in nahezu jedem erdenklichen Format mit einer einfachen, aber leistungsstarken Syntax. Seit Jahren ist diese Bibliothek die wichtigste Lösung der Community, um die Einschränkungen des nativen JavaScript-Objekts `Date()` zu überwinden.

Das Herzstück von Moment.js ist das `moment()` -Objekt , das aus nahezu jeder gültigen Eingabe Datumsangaben generieren kann: Textstrings, Date-Objekte, Zeitstempel oder direkt numerische Argumente. Dadurch ist es äußerst flexibel und in allen Arten von Projekten nützlich – von kleinen Skripten bis hin zu Unternehmensanwendungen, die internationale Zeitzonen oder historische Datensätze verwalten.

Was hat Moment.js so erfolgreich gemacht? Seine Zuverlässigkeit, Benutzerfreundlichkeit und die Vielfalt der mitgelieferten Tools und Plugins . Selbst im Wartungsmodus verfügt Moment.js weiterhin über eine große Nutzerbasis und eine umfangreiche Dokumentation , was seine Position als führende Datenlösung in JavaScript und Node.js festigt.

Hauptfunktionen und Vorteile von Moment.js

• Einfache und intuitive APIEine der größten Stärken von Moment.js ist die klare Syntax. Sie können einfache Operationen wie das Abrufen des aktuellen Datums oder die Konvertierung einer Zeichenfolge in ein bestimmtes Format sowie komplexe Berechnungen und Validierungen in nur wenigen Zeilen durchführen.
• Flexibles Parsen und FormatierenDas Parsen von Datumszeichenfolgen in nahezu jedem Format und deren Konvertierung in die gewünschte Ausgabe war noch nie so einfach. Mit Moment.js können Sie Datumsangaben in benutzerdefinierten Präsentationen schnell und problemlos formatieren..
• Datumsmanipulation: Das Addieren oder Subtrahieren von Tagen, Monaten, Jahren, Wochen oder anderen Zeiteinheiten ist so einfach wie die Verwendung der Methoden hinzufügen() y subtrahieren()Dies ist sehr nützlich, wenn Sie mit relativen Daten, Fälligkeitsdaten oder Zeitrahmen arbeiten müssen, die dynamisch variieren.
• Robuste Validierung: Wenn Sie überprüfen müssen, ob ein Datum gültig ist oder existiert (z. B. 30. Februar), macht Moment.js es Ihnen leicht. Die Methode ist gültig() Es ist in der Lage, subtile Fehler im Format oder in der Logik von Datumsangaben zu erkennen.
• Unterstützung für Zeitzonen und Lokalisierung: Dank Ihres Plugins Moment-ZeitzoneDie Konvertierung von Daten zwischen verschiedenen Zeitzonen ist sehr einfach. Sie können auch Datumsangaben anzeigen, die an die Sprache und regionalen Konventionen des Benutzers angepasst sind, was bei globalen Anwendungen von entscheidender Bedeutung ist.
• Plugin-Ökosystem: Neben der Hauptbibliothek gibt es ein Ökosystem von Plugins zur Erweiterung der Funktionalität (Kalender, Kompatibilität mit anderen Frameworks, exotische Formate ...).

So starten Sie mit Moment.js in Ihrem Projekt

Die Installation ist sehr einfach . Sie können Moment.js mit einer einzigen Zeile in Ihr HTML einbinden:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

Wenn Sie mit Node.js oder einer modernen Entwicklungsumgebung arbeiten, ist es üblich, es mit npm oder yarn zu installieren:

npm install moment

Sobald dies erledigt ist, können Sie Moment.js gemäß der von Ihnen verwendeten Syntax importieren:

// Versión CommonJS
var moment = require('moment');
moment().format();

// ES6
import moment from 'moment';
moment().format();

Termine erstellen: verschiedene Möglichkeiten und Praxisbeispiele

Termine einfach erstellen

Um das aktuelle Datum und die aktuelle Uhrzeit abzurufen, einfach verwenden moment():

console.log(moment()); // Devuelve la fecha actual en formato ISO8601

Sie können ein bestimmtes Datum erstellen, indem Sie Argumente übergeben:

moment("2022-10-14"); // Crea el 14 de octubre de 2022

Sie können auch im strikten Modus mit einer bestimmten Zeichenfolge und einem bestimmten Format beginnen:

moment("25/12/1995", "DD/MM/YYYY", true); // Analiza y comprueba el formato

Haben Sie ein natives Datumsobjekt?

const fechaJS = new Date();
const miFecha = moment(fechaJS);

Formatieren und Anzeigen von Datumsangaben

Moment.js ermöglicht die Anzeige von Datumsangaben in jedem erdenklichen Format . Um beispielsweise das aktuelle Datum als Tag/Monat/Jahr anzuzeigen:

moment().format('DD/MM/YYYY');

Wenn Sie eine humanisiertere Kette wünschen, können Sie Folgendes verwenden:

moment().format('MMMM Do YYYY, h:mm:ss a'); // Ejemplo: "marzo 8º 2024, 3:21:10 pm"

Einige nützliche Platzhalter für die Formatierung :

• YYYY: 4-stellige Jahreszahl
• MM: mein
• DD: Tag des Monats
• hh o HH: Uhrzeit (12h- oder 24h-Format)
• mm: Minuten
• ss: Sekunden
• a: am/pm

Um beispielsweise nur die Uhrzeit anzuzeigen:

moment().format('HH:mm:ss');

Erweiterte Formatierung mit Token und regionaler Unterstützung

Moment.js unterstützt mehrere lokalisierte Formate und Übersetzungen . Es ist möglich, die Sprache dynamisch zu wechseln, um Monats- und Tagesnamen in einer anderen Sprache anzuzeigen.

moment.locale('es'); // Cambia a español
document.write(moment().format('LLLL'));
// Ejemplo: martes, 8 de marzo de 2024 15:21

Datumsmanipulation: Addition, Subtraktion und Vergleich

Die Arbeit mit relativen Daten ist eine der Stärken von Moment.js.

• Fügen Sie Tage, Monate oder Jahre hinzu:

  moment().add(3, 'days').format('DD/MM/YYYY');

• Einheiten subtrahieren:

  moment().subtract(2, 'months').format('DD/MM/YYYY');

• Beginn und Ende der Perioden:

  moment().startOf('month').format('DD/MM/YYYY'); // Primer día del mes
  moment().endOf('month').format('DD/MM/YYYY');   // Último día del mes

Daten validieren und Fehler erkennen

Bevor Sie mit Datumsangaben arbeiten, müssen Sie unbedingt überprüfen, ob diese korrekt sind:

moment('2024-02-30', 'YYYY-MM-DD').isValid(); // false, el 30 de febrero no existe

Dadurch werden unerwartete Fehler in Anwendungen vermieden, die Datumsangaben vom Benutzer erhalten.

Datumsvergleich: Prüfen Sie, ob ein Datum unter anderen ist

Moment.js enthält mehrere Methoden zum Vergleichen von Daten:

• istVorher(): Überprüft, ob ein Datum vor einem anderen liegt.
• istNach(): Überprüft, ob ein Datum später ist.
• istBetween(): Gibt an, ob ein Datum zwischen zwei angegebenen Daten liegt.

let hoy = moment();
let ayer = moment().subtract(1, 'days');
console.log(hoy.isAfter(ayer)); // true

Umgang mit Zeitzonen und internationalen Daten

Bei der Zusammenarbeit mit Nutzern in verschiedenen Teilen der Welt können Zeitzonen ein echtes Problem darstellen . Mit dem Moment-Timezone -Plugin lassen sich Datumsangaben zwischen verschiedenen Regionen ganz einfach umrechnen.

const moment = require('moment-timezone');
const fechaUTC = moment('2024-05-25');
const fechaNY = fechaUTC.tz('America/New_York').format('YYYY-MM-DD HH:mm:ss');
console.log(fechaNY);
// Ejemplo: "2024-05-24 20:00:00"

Darüber hinaus ist Moment.js in der Lage, Datumsangaben anzuzeigen, die an die regionalen Einstellungen des Benutzers angepasst sind , und korrekt übersetzte Monats- und Tagesnamen anzuzeigen.

Wichtige Anwendungsbeispiele und erweiterte Tipps

Unterschiede zwischen Datumsangaben ermitteln

Sie können die zwischen zwei Daten verstrichene Zeit in verschiedenen Einheiten berechnen:

let inicio = moment('2024-01-01');
let fin = moment('2024-03-08');
let dias = fin.diff(inicio, 'days'); // Devuelve el número de días entre ambas

Relative Daten und menschliche Zeiten

Moment.js eignet sich hervorragend zum Anzeigen von Nachrichten wie „vor 3 Tagen“ oder „in 5 Stunden“:

moment().subtract(3, 'days').fromNow(); // "hace 3 días"
moment().add(2, 'hours').fromNow();    // "en 2 horas"

Menschlicher Kalender

Die Funktion calendar() zeigt relative Datumsangaben wie "gestern um 17:00 Uhr", "morgen um 9:00 Uhr" an und ist daher sehr gut für Kalender-Apps geeignet.

moment().subtract(1, 'days').calendar(); // "Ayer a las..."
moment().add(3, 'days').calendar();     // "Próximo martes a las..."

Unterstützung für Jahressprünge und besondere Tage

Möchten Sie wissen, ob ein Jahr ein Schaltjahr ist?

moment([2024]).isLeapYear(); // true

Die Methode isLeapYear() liefert Ihnen direkt das Ergebnis.

Erweiterte Anpassung: Formate, Token und striktes Parsen

Moment.js ermöglicht die Verwendung benutzerdefinierter Zeichenketten und Tokens zum Erstellen und Lesen von Datumsangaben in unzähligen Formaten . Der strikte Modus erfordert zudem exakte Übereinstimmungen und verhindert so subtile Fehler und unerwünschte Überraschungen.

So analysieren Sie beispielsweise ein Datum im Format „Tag/Monat/Jahr“:

moment('12/03/2023', 'DD/MM/YYYY', true);

Liste gängiger Token und Beispiele

• Jahr: JJJJ (2024), JJ (24), J (-500)
• Monat: MM (01 – 12), MMM (Jan), MMMM (Januar)
• Día: TT (01 – 31), C (1. – 31.)
• Zeit: HH (00 – 23), hh (01 – 12), mm (Minuten), ss (Sekunden)
• Zone: Z, ZZ

Diese Token können kombiniert werden, um vollständig benutzerdefinierte Ausgaben zu erstellen. Die vollständige Liste und Sonderfälle finden Sie in der Dokumentation.