Verwenden von Luxon für Datum und Uhrzeit in JavaScript

Das Arbeiten mit Datum und Uhrzeit kann für Entwickler, die mit JavaScript beginnen, eine verwirrende Aufgabe sein. In diesem Lernprogramm erfahren Sie mehr über eine neue JavaScript-Bibliothek namens Luxon, die das Arbeiten mit Datum und Uhrzeit in JavaScript zum Kinderspiel macht.

In diesem Lernprogramm erfahren Sie mehr über die verschiedenen Funktionen der Luxon-Bibliothek und deren Verwendung in Ihren Webanwendungsprojekten.

Fertig machen

Sie erstellen ein Angular-Projekt und erfahren, wie Sie die Luxon-Bibliothek zur Datums- und Zeitmanipulation in Angular verwenden. Beginnen wir mit der Erstellung einer Angular-Web-App.

ng neues AngularLuxon

Wenn Sie das Projekt erstellt haben, navigieren Sie zum Projektverzeichnis und erstellen Sie eine neue Komponente mit dem Namen Luxdate.

ng g Komponenten-Luxdate

Sie werden die haben LuxdateComponent erstellt und dem Anwendungsmodul im hinzugefügt app.module.ts Datei. Entfernen Sie den Standard AppComponent aus der Anwendung durch Löschen der Komponentendateien aus der src / app Mappe. Hier ist wie das app.module.ts Datei sieht:

BrowserModule aus '@ angle / platform-browser' importieren; NgModule aus '@ angle / core' importieren; import LuxdateComponent aus './luxdate/luxdate.component'; @NgModule (Deklarationen: [LuxdateComponent], importiert: [BrowserModule], Anbieter: [], Bootstrap: [LuxdateComponent]) Exportklasse AppModule  

Modifiziere den src / index.html Datei zum Hinzufügen der LuxdateComponent.

Speichern Sie die obigen Änderungen und starten Sie den Server.

npm starten

Die Anwendung wird unter http: // localhost: 4200 / ausgeführt..

Lassen Sie uns die Luxon-Bibliothek in Ihre Anwendung importieren.

npm install --save luxon

Wenn Sie Luxon in der Angular-Anwendung installiert haben, importieren Sie es in der LuxdateComponent Komponente. Nun können Sie die Luxon-Bibliothek in Ihrem Projekt verwenden.

Ortszeit und UTC-Zeit mit Luxon

Schauen wir uns an, wie man mit der Ortszeit die Ortszeit ermittelt Luxon Bibliothek. Einführen Terminzeit aus der Luxon-Bibliothek.

importiere DateTime von 'luxon';

In der LuxdateComponent, Definiere eine aufgerufene Variable localDatetime.

public localDatetime;

Stellen Sie den Wert von ein localDatetime Variable wie gezeigt:

this.localDatetime = DateTime.local ();

Rendern Sie die localDatetime Variable in der luxdate.component.html Datei.

 
 
  localDatetime  
 
 
 

Wenn Sie die Änderungen speichern, wird die Ortszeit auf der Webseite angezeigt.

2017-12-31T15: 55: 12,761 + 05:30 

Das oben angezeigte Datum und die Uhrzeit sind die Ortszeit mit angehängter Zeitzone. Sie können Datum und Uhrzeit weiter formatieren, um sie intuitiver zu gestalten.

Formatieren Sie das Datum und die Uhrzeit für die Anzeige mithilfe der folgenden Codezeile.

this.localDatetime = DateTime.local (). toLocaleString (DateTime.DATETIME_FULL);

Wenn Sie die obige Codezeile speichern, werden das folgende Datum und die folgende Uhrzeit angezeigt.

31. Dezember 2017, 22:35 Uhr GMT + 5:30 Uhr 

Ebenso die .koordinierte Weltzeit Methode in der Terminzeit Objekt gibt die UTC-Zeit an. 

Fügen Sie eine neue Variable im hinzu LuxdateComponent um die UTC-Zeit einzustellen.

public utcDatetime;

Stellen Sie den Wert von ein utcDatetime Variable mit dem Luxon Terminzeit Objekt. 

this.utcDatetime = DateTime.utc (). toLocaleString (DateTime.DATETIME_FULL);

Rendern Sie die utcDatetime Variable in der luxdate.component.html Datei wie gezeigt:

 
Luxon-Bibliothek
 
 
  Ortszeit :   localDatetime  
 
  UTC-Zeit:   utcDatetime  
 
 

Fügen Sie den folgenden CSS-Stil hinzu luxdate.component.css Datei. 

.container text-align: center; Breite: 100%;  .time Anzeige: Inline-Block;  .local border: 1px fest # 8c8282; Text ausrichten: links; Hintergrundfarbe: Burlywood; Polsterung: 10px;  .utc margin-top: 30px; Grenze: 1px fest # 8c8282; Text ausrichten: links; Hintergrundfarbe: Burlywood; Polsterung: 10px;  .label font-family: serif; Schriftgröße: 22px; font-style: initial; 

Speichern Sie die obigen Änderungen und Sie können die Ortszeit und die UTC-Zeit mithilfe der Luxon-Bibliothek anzeigen.

Um die Ortszeit und die UTC-Zeit einschließlich der Sekunden anzuzeigen, können Sie verwenden DATETIME_FULL_WITH_SECONDS. So wird es aussehen:

ngOnInit () this.localDatetime = DateTime.local (). toLocaleString (DateTime.DATETIME_FULL_WITH_SECONDS); this.utcDatetime = DateTime.utc (). toLocaleString (DateTime.DATETIME_FULL_WITH_SECONDS); 

Wenn Sie die Änderungen speichern, werden die Ortszeit und die UTC-Zeit mit Sekunden angezeigt.

Allgemeine Datums- und Uhrzeitinformationen mit Luxon

Die Luxon-Bibliothek bietet eine Info Klasse, die hilft, allgemeine Informationen zu Datum und Uhrzeit zu erhalten.

Wenn Sie mit Datum und Uhrzeit arbeiten, ist es durchaus üblich, dass Sie die Liste der Monate eines Jahres benötigen. Verwendung der Info Klasse können Sie die Liste der Monate als Array erhalten. 

Importieren Sie die Info Klasse in der luxdate.component.ts Datei.

importiere DateTime, Info von 'luxon';

Deklarieren Sie eine Variable für die Liste der Monate und initialisieren Sie sie.

öffentliche Monate; Konstruktor () this.months = []; 

Stellen Sie die Monatsliste von ein Info Klasse.

this.months = Info.months ();

Fügen Sie das folgende HTML hinzu luxdate.component.html Datei zur Anzeige der Monate variabler Inhalt.

  Monat:     Monat    

Speichern Sie die obigen Änderungen, und die Monatsliste wird aufgefüllt.

Ebenso mit der Wochentage Methode gibt Ihnen eine Liste der Wochentage.

this.weeks = Info.weekdays ();

Speichern Sie die Änderungen, und die Wochentage werden auf dem Bildschirm angezeigt.

Luxon bietet auch eine Option zum Abrufen der Liste an Meridiems Verwendung der Meridiems Methode.

this.meridians = Info.meridiems ();

Ändern Sie den HTML-Code im luxdate.component.html anzeigen Wochen und Meridiane.

    Monat       Woche       Meridian    

Speichern Sie die Änderungen und Sie können die angezeigten Wochen und Meridiane anzeigen.

Umgang mit Internationalisierung mit Luxon 

Luxon bietet eine Rahmen Klasse, mit der Sie das allgemeine Verhalten von Luxon handhaben können. Setzen Sie die Standardeinstellung für das Gebietsschema von Luxon auf el.

Importieren Sie die die Einstellungen Klasse in der luxdate.component.ts Datei.

DateTime, Settings, Info aus 'luxon' importieren;

In der Konstruktormethode von LuxdateComponent, Legen Sie das Standardgebietsschema wie gezeigt fest:

constructor () Settings.defaultLocale = 'el'; 

Speichern Sie die Änderungen, und Sie haben das Standardgebietsschema auf festgelegt el.

Zoneninformationen mit Luxon

Die Luxon-Bibliothek bietet eine Schnittstelle zum Abrufen der Details, die sich auf die Zone einer bestimmten Person beziehen Terminzeit Objekt. Um es zu verwenden, müssen Sie importieren Zone aus der Luxon-Bibliothek.

importiere DateTime, Einstellungen, Info, Zone aus 'luxon';

Versuchen wir, Zone auf einem Luxon zu verwenden Terminzeit Objekt. Erstellen Sie ein lokales Terminzeit Luxon-Objekt.

let dateObj = DateTime.local (); 

Du kannst den ... benutzen Zone Schnittstelle auf der dateObj um den Zonennamen zu erhalten. Fügen Sie den folgenden Code hinzu, um den Zonennamen zu protokollieren.

console.log ('Zonenname ist', dateObj.zone.name);

Speichern Sie die Änderungen und beim Ausführen der App können Sie den in der Browserkonsole protokollierten Zonennamen anzeigen.

Der Name der Zone lautet Asia / Kolkata

Versuchen wir, den Zonennamen eines UTC DateTime-Objekts zu drucken.

let utcObj = DateTime.utc (); console.log ('Zonenname ist', utcObj.zone.name);

Der obige Code druckt den Zonennamen als koordinierte Weltzeit.

Der Zonenname lautet UTC

Das Luxon Zone Schnittstelle bietet eine Methode, um zwei zu vergleichen Zeitzonen. Versuchen wir das zu vergleichen Zeitzone des Terminzeit Objekte localObj und utcObj.

if (localObj.zone.equals (utcObj.zone)) console.log ('Beide Zonen sind gleich');  else console.log ('Beide Zonen sind unterschiedlich'); 

Wie im obigen Code zu sehen, haben Sie die zone.equals Methode zum Vergleich der Zonen. Speichern Sie die Änderungen und versuchen Sie, die App auszuführen. Das Ergebnis wird protokolliert.

Beide Zonen sind unterschiedlich

Intervall in Luxon

Intervall in Luxon ist ein Wrapper für zwei Terminzeit Endpunkte, die mit den Luxon-Methoden bearbeitet werden können. Aus der offiziellen Dokumentation:

Ein Interval-Objekt stellt ein halboffenes Zeitintervall dar, wobei jeder Endpunkt ein DateTime ist. Konzeptionell ist dies ein Container für diese beiden Endpunkte, begleitet von Methoden zum Erstellen, Analysieren, Abfragen, Vergleichen, Umwandeln und Formatieren.

Es gibt verschiedene Möglichkeiten, ein Intervall mit Luxon zu erstellen. Sehen wir uns an, wie man ein Intervall aus Anfang und Ende erstellt Terminzeit Objekt.

Einführen Intervall von Luxon in LuxdateComponent. 

Intervall aus 'Luxon' importieren;

Ein ... kreieren Start Terminzeit Objekt und ein Ende Terminzeit Objekt.

let startDate = DateTime.local (); let endDate = DateTime.local (). plus (Minuten: 15);

Wie im obigen Code zu sehen, haben Sie das erstellt Anfangsdatum mit der aktuellen Ortszeit und Endtermin durch Erhöhen der Ortszeit um 15 Minuten.

Erstellen Sie ein Intervall mit der fromDateTimes Methode.  

let intv = Interval.fromDateTimes (startDate, endDate); console.log ('Interval is', intv);

Speichern Sie die obigen Änderungen und beim Ausführen der Anwendung wird das Intervall protokolliert.

Jetzt können Sie die Luxon-Methode anwenden, um die Start- und Endzeit im Intervallobjekt zu ändern oder zu formatieren. Angenommen, Sie möchten den Zonennamen der Startzeit im Intervall überprüfen. Sie können dies tun, indem Sie die zone.name Eigenschaft wie gezeigt:

console.log ('Startdatumszone ist', intv.s.zone.name);

Die folgende Ausgabe wird in der Browserkonsole protokolliert:

Startdatumsbereich ist Asien / Kolkata

Dauer mit Luxon erstellen

Luxon bietet eine Reihe von Methoden, um Dauer zu erstellen. Um mit dem Erstellen der Dauer beginnen zu können, müssen Sie importieren Dauer in deiner LuxdateComponent.

import Duration von 'luxon';

Nach dem Import können Sie die von Millis Methode zum Erstellen einer Dauer durch Angabe der Millisekunden.

Lassen Sie fiveMinute = Duration.vonMillis (5 * 60 * 1000); console.log ('Fünf Minuten ist', fünf Minuten);

Speichern Sie die Änderungen und beim Ausführen der Anwendung haben Sie die oben genannten Informationen fünf Minuten Dauer protokolliert.

Sie können auch eine andere verwenden Terminzeit Objekt zum Erstellen einer Dauer mit vonObject Methode. So sieht der Code aus:

let startDate = DateTime.local (); let dur = Duration.fromObject (startDate); console.log ('Dauer von Objekt ist', dur);

Speichern Sie die Änderungen, und die Dauer wird in der Browserkonsole protokolliert.

Verpacken

In diesem Lernprogramm haben Sie erfahren, wie Sie mit der Verwendung der Luxon-Bibliothek für das Arbeiten mit Datum und Uhrzeit in einem Angular-Webprojekt beginnen können. Sie haben gelernt, wie Sie mit der Ortszeit und der UTC-Zeit umgehen, und wie Sie mit Luxon ein Intervall und eine Dauer erstellen.

Für ausführliche Informationen zur Verwendung der Luxon-Bibliothek würde ich empfehlen, die offizielle Dokumentation zu lesen.

Wie haben Sie gelernt, mit Luxon zu arbeiten? Teilen Sie uns Ihre Meinung in den Kommentaren unten mit.