Utilizzo di Luxon per data e ora in JavaScript

Lavorare con data e ora può essere un compito di confusione per gli sviluppatori che iniziano con JavaScript. In questo tutorial, scoprirai una nuova libreria JavaScript chiamata Luxon che rende semplicissimo lavorare con data e ora in JavaScript.

Nel corso di questo tutorial, imparerai a conoscere le diverse funzionalità della libreria Luxon e come utilizzarla nei tuoi progetti di applicazione web.

Iniziare

Creerai un progetto Angolare e vedrai come utilizzare la libreria Luxon per la manipolazione di data e ora in Angular. Iniziamo creando un'app web Angolare.

nuovo nuovo AngularLuxon

Una volta creato il progetto, accedere alla directory del progetto e creare un nuovo componente chiamato luxdate.

ng g componente luxdate

Avrai il LuxdateComponent creato e aggiunto al modulo dell'applicazione nel app.module.ts file. Rimuovi il valore predefinito AppComponent dall'applicazione eliminando i file del componente dal src / app cartella. Ecco come app.module.ts aspetto del file:

importare BrowserModule da '@ angular / platform-browser'; import NgModule da '@ angular / core'; import LuxdateComponent da './luxdate/luxdate.component'; @NgModule (dichiarazioni: [LuxdateComponent], importazioni: [BrowserModule], provider: [], bootstrap: [LuxdateComponent]) classe di esportazione AppModule  

Modifica il src / index.html file per aggiungere il LuxdateComponent.

Salvare le modifiche precedenti e avviare il server.

inizio di npm

Avrai l'applicazione in esecuzione su http: // localhost: 4200 /.

Importa la libreria Luxon nella tua applicazione.

installazione npm --save luxon

Una volta installato Luxon nell'applicazione Angular, importarlo nel LuxdateComponent componente. Ora sei pronto per usare la libreria Luxon nel tuo progetto.

Ora locale e ora UTC utilizzando Luxon

Diamo un'occhiata a come ottenere l'ora locale usando il Luxon biblioteca. Importare Appuntamento dalla biblioteca di Luxon.

importa DateTime da 'luxon';

Dentro il LuxdateComponent, definire una variabile chiamata LocalDateTime.

public localDatetime;

Imposta il valore di LocalDateTime variabile come mostrato:

this.localDatetime = DateTime.local ();

Rendi il LocalDateTime variabile nel luxdate.component.html file.

 
 
   LocalDateTime  
 
 
 

Salva le modifiche e avrai l'ora locale visualizzata sulla pagina web.

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

La data e l'ora visualizzate sopra sono le ore locali con il fuso orario allegato. È possibile formattare ulteriormente la data e l'ora per renderlo più intuitivo.

Formattare la data e l'ora da visualizzare utilizzando la riga di codice riportata di seguito.

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

Salva la riga di codice sopra, e avrai la seguente data e ora visualizzate.

31 dicembre 2017, 22:35 GMT + 5: 30 

Allo stesso modo, il .UTC metodo nel Appuntamento oggetto dà il tempo UTC. 

Aggiungi una nuova variabile nel LuxdateComponent per impostare l'ora UTC.

pubblico utcDatetime;

Imposta il valore di utcDatetime variabile usando il Luxon Appuntamento oggetto. 

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

Rendi il utcDatetime variabile nel luxdate.component.html file come mostrato:

 
Biblioteca di Luxon
 
 
  Ora locale :    LocalDateTime  
 
  Ora UTC:    UtcDatetime  
 
 

Aggiungi il seguente stile CSS al file luxdate.component.css file. 

.container text-align: center; larghezza: 100%;  .time display: inline-block;  .local border: 1px solid # 8c8282; allineamento del testo: a sinistra; colore di sfondo: burlywood; imbottitura: 10px;  .utc margin-top: 30px; border: 1px solid # 8c8282; allineamento del testo: a sinistra; colore di sfondo: burlywood; imbottitura: 10px;  .label font-family: serif; font-size: 22px; stile font: iniziale; 

Salvare le modifiche precedenti e sarà possibile visualizzare l'ora locale e l'ora UTC utilizzando la libreria Luxon.

Per visualizzare l'ora locale e l'ora UTC con i secondi inclusi, è possibile utilizzare DATETIME_FULL_WITH_SECONDS. Ecco come apparirà:

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

Salva le modifiche e avrai l'ora locale e l'ora UTC visualizzate in secondi.

Informazioni generali su data e ora mediante Luxon

La libreria Luxon fornisce un Informazioni classe che aiuta a ottenere alcune informazioni generali su data e ora.

Quando si tratta di data e ora, è abbastanza comune che potrebbe essere necessario l'elenco dei mesi in un anno. Usando il Informazioni classe, è possibile ottenere l'elenco dei mesi come una matrice. 

Importa il Informazioni classe nel luxdate.component.ts file.

import DateTime, Info da 'luxon';

Dichiarare una variabile per l'elenco di mesi e inizializzarla.

mesi pubblici; costruttore () this.months = []; 

Imposta l'elenco dei mesi da Informazioni classe.

this.months = Info.months ();

Aggiungi il seguente codice HTML al file luxdate.component.html file per visualizzare il mesi contenuto variabile.

  Mese :     mese    

Salvare le modifiche precedenti e verrà compilato l'elenco dei mesi.

Allo stesso modo, usando il giorni feriali metodo ti dà una lista dei giorni della settimana.

this.weeks = Info.weekdays ();

Salva le modifiche e avrai i giorni della settimana elencati sullo schermo.

Luxon offre anche un'opzione per ottenere l'elenco di meridiems usando il meridiems metodo.

this.meridians = Info.meridiems ();

Modifica il codice HTML nel luxdate.component.html per visualizzare il settimane e meridiani.

    mese       settimana       meridiano    

Salva le modifiche e sarai in grado di visualizzare le settimane ei meridiani visualizzati.

Gestione dell'internazionalizzazione con Luxon 

Luxon fornisce a Ambientazione classe, utilizzando il quale è possibile gestire il comportamento generale di Luxon. Impostiamo le impostazioni internazionali predefinite di Luxon su EL.

Importa il impostazioni classe nel luxdate.component.ts file.

import DateTime, Settings, Info da 'luxon';

Nel metodo costruttore di LuxdateComponent, imposta le impostazioni locali predefinite come mostrato:

constructor () Settings.defaultLocale = 'el'; 

Salva le modifiche e avrai impostato il locale predefinito EL.

Informazioni sulla zona Utilizzo di Luxon

La libreria Luxon fornisce un'interfaccia per ottenere i dettagli relativi alla zona di un particolare Appuntamento oggetto. Per usarlo, è necessario importare Zona dalla biblioteca di Luxon.

import DateTime, Settings, Info, Zone da 'luxon';

Proviamo ad usare Zone su un Luxon Appuntamento oggetto. Crea un locale Appuntamento Oggetto Luxon.

let dateObj = DateTime.local (); 

Puoi usare il Zona interfaccia sul dateObj per ottenere il nome della zona. Aggiungere il seguente codice per registrare il nome della zona.

console.log ('Zone name is', dateObj.zone.name);

Salvare le modifiche e, durante l'esecuzione dell'app, sarà possibile visualizzare il nome della zona registrato nella console del browser.

Il nome della zona è Asia / Kolkata

Proviamo a stampare il nome della zona di un oggetto DateTime UTC.

let utcObj = DateTime.utc (); console.log ('Zone name is', utcObj.zone.name);

Il codice precedente stamperà il nome della zona come UTC.

Il nome della zona è UTC

Il Luxon Zona l'interfaccia fornisce un metodo per confrontare due Fusi orari. Proviamo a confrontare il fuso orario del Appuntamento oggetti localObj e utcObj.

if (localObj.zone.equals (utcObj.zone)) console.log ('Entrambe le zone sono uguali');  else console.log ('Entrambe le zone sono diverse'); 

Come visto nel codice sopra, hai usato il zone.equals metodo per confrontare le zone. Salva le modifiche e prova a eseguire l'app e il risultato verrà registrato.

Entrambe le zone sono diverse

Intervallo a Luxon

Intervallo in Luxon è un involucro per due Appuntamento endpoint che possono essere manipolati usando i metodi di Luxon. Dalla documentazione ufficiale:

Un oggetto Interval rappresenta un intervallo di tempo semiaperto, in cui ogni endpoint è un DateTime. Concettualmente, è un contenitore per questi due endpoint, accompagnato da metodi per la creazione, l'analisi, l'interrogazione, il confronto, la trasformazione e la formattazione.

Ci sono un paio di modi diversi per creare un intervallo usando Luxon. Diamo un'occhiata a come creare un intervallo usando un inizio e una fine Appuntamento oggetto.

Importare Intervallo da Luxon in LuxdateComponent. 

importa Intervallo da 'luxon';

Creare un inizio Appuntamento oggetto e un fine Appuntamento oggetto.

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

Come visto nel codice sopra, hai creato il data d'inizio utilizzando l'ora locale corrente e data di fine incrementando l'ora locale di 15 minuti.

Creare un intervallo usando il fromDateTimes metodo.  

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

Salvare le modifiche precedenti e, durante l'esecuzione dell'applicazione, verrà registrato l'intervallo.

Ora è possibile applicare il metodo Luxon per manipolare o formattare l'ora di inizio e di fine nell'oggetto intervallo. Diciamo che vuoi controllare il nome della zona dell'ora di inizio nell'intervallo. Puoi farlo usando il zone.name proprietà come mostrato:

console.log ('Start date zone is', intv.s.zone.name);

Avrai il seguente output registrato nella console del browser:

La data di inizio è Asia / Kolkata

Creazione della durata usando Luxon

Luxon fornisce un paio di metodi per creare la durata. Per iniziare con la creazione della durata, è necessario importare Durata nel tuo LuxdateComponent.

importa Durata da 'luxon';

Una volta importato, puoi usare il fromMillis metodo per creare una durata specificando i millisecondi.

let fiveMinute = Duration.fromMillis (5 * 60 * 1000); console.log ('Five minutes is', fiveMinute);

Salvare le modifiche e durante l'esecuzione dell'applicazione, si avrà quanto sopra fiveMinute durata registrata.

Puoi anche usarne un altro Appuntamento oggetto per creare una durata usando il fromObject metodo. Ecco come appare il codice:

let startDate = DateTime.local (); lascia dur = Duration.fromObject (startDate); console.log ('Durata dall'oggetto è', dur);

Salva le modifiche e avrai la durata registrata nella console del browser.

Avvolgendolo

In questo tutorial hai visto come iniziare a utilizzare la libreria Luxon per lavorare con data e ora in un progetto Web angolare. Hai imparato come gestire l'ora locale e l'ora UTC e come creare un intervallo e una durata utilizzando Luxon.

Per informazioni approfondite sull'uso della libreria Luxon, ti consiglio di leggere la documentazione ufficiale.

In che modo la tua esperienza ha imparato a lavorare con Luxon? Fateci sapere i vostri pensieri nei commenti qui sotto.