Bruke Luxon til dato og klokkeslett i JavaScript

Arbeide med dato og klokkeslett kan være en forvirrende oppgave for utviklere som begynner med JavaScript. I denne opplæringen lærer du om et nytt JavaScript-bibliotek kalt Luxon, som gjør det til en bris å jobbe med dato og klokkeslett i JavaScript.

I løpet av denne opplæringen lærer du om de forskjellige funksjonene i Luxon-biblioteket og hvordan du bruker det i webapplikasjonsprosjektene dine.

Starter

Du lager et vinkelprosjekt og vil se hvordan du bruker Luxon-biblioteket til dato- og tidsmanipulering i Angular. La oss begynne med å lage en kantet web-app.

ng ny AngularLuxon

Når du har opprettet prosjektet, naviger til prosjektkatalogen og opprett en ny komponent som heter luxdate.

ng g komponent luxdate

Du vil ha LuxdateComponent opprettet og lagt til programmodulen i app.module.ts fil. Fjern standardinnstillingen AppComponent fra applikasjonen ved å slette komponentfiler fra src / app mappe. Her er hvordan app.module.ts fil ser ut:

importer BrowserModule fra '@ vinkel / plattform-nettleser'; importer NgModule fra '@ vinkel / kjerne'; importer LuxdateComponent fra '. /luxdate/luxdate.component'; @NgModule (declarations: [LuxdateComponent], import: [BrowserModule], leverandører: [], bootstrap: [LuxdateComponent]) eksportklasse AppModule  

Endre src / index.html fil for å legge til LuxdateComponent.

Lagre endringene ovenfor og start serveren.

npm start

Du vil få programmet til å kjøre på http: // localhost: 4200 /.

La oss importere Luxon-biblioteket til din søknad.

npm installere - lagre luxon

Når du har installert Luxon i Angular-applikasjonen, importerer du den i LuxdateComponent komponent. Nå er du klar til å bruke Luxon-biblioteket i prosjektet ditt.

Lokal tid og UTC-tid ved hjelp av Luxon

La oss ta en titt på hvordan du får den lokale tiden ved hjelp av Luxon bibliotek. Importere Dato tid fra Luxon-biblioteket.

importer DateTime fra 'luxon';

Inne i LuxdateComponent, definer en variabel som heter localDatetime.

offentlig lokal tid;

Angi verdien til localDatetime variabel som vist:

this.localDatetime = DateTime.local ();

Render localDatetime variabel i luxdate.component.html fil.

 
 
  LocalDatetime  
 
 
 

Lagre endringene, og du vil få lokal tid som vises på nettsiden.

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

Dato og klokkeslett vist ovenfor er lokal tid med tidszonen festet. Du kan formatere dato og klokkeslett videre for å gjøre det mer intuitivt.

Formater dato og klokkeslett for å vise ved hjelp av koden nedenfor.

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

Lagre koden ovenfor, og du vil få følgende dato og klokkeslett vist.

31. desember 2017, 10:35 PM GMT + 5:30 

På samme måte, .utc metode i Dato tid objektet gir UTC-tiden. 

Legg til en ny variabel i LuxdateComponent for å stille inn UTC-tiden.

offentlig utcDatenime;

Angi verdien til utcDatetime variabel ved bruk av Luxon Dato tid gjenstand. 

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

Render utcDatetime variabel i luxdate.component.html fil som vist:

 
Luxon-biblioteket
 
 
  Lokal tid :   LocalDatetime  
 
  UTC-tid:   UtcDatetime  
 
 

Legg til følgende CSS-stil i luxdate.component.css fil. 

.container text-align: center; bredde: 100%;  .time display: inline-block;  .local border: 1px solid # 8c8282; tekstjustering: venstre; bakgrunnsfarge: burlywood; polstring: 10px;  .utc margin-top: 30px; grense: 1px solid # 8c8282; tekstjustering: venstre; bakgrunnsfarge: burlywood; polstring: 10px;  .label font-family: serif; skriftstørrelse: 22px; font-style: initial; 

Lagre endringene ovenfor, og du vil kunne se lokal tid og UTC-tiden ved hjelp av Luxon-biblioteket.

For å vise lokal tid og UTC-tid med sekunder inkludert, kan du bruke DATETIME_FULL_WITH_SECONDS. Slik ser det ut:

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

Lagre endringene, og du vil få lokal tid og UTC-tid som vises med sekunder.

Generell dato og klokkeslettinformasjon ved hjelp av Luxon

Luxon biblioteket tilbyr en info klasse som hjelper med å få litt generell informasjon om dato og klokkeslett.

Når det gjelder dato og klokkeslett, er det ganske vanlig at du kanskje trenger listen over måneder på et år. Bruker info klasse, kan du få listen over måneder som en matrise. 

Importer info klasse i luxdate.component.ts fil.

importer DateTime, Info fra 'luxon';

Erklære en variabel for listen over måneder og initialiser den.

offentlige måneder; konstruktør () this.months = []; 

Sett månedslisten fra info klasse.

this.months = Info.months ();

Legg til følgende HTML for luxdate.component.html fil for å vise måneder variabelt innhold.

  Måned:     måned    

Lagre endringene ovenfor, og du vil få månedslisten befolket.

På samme måte bruker du hverdager Metoden gir deg en liste over hverdager.

this.weeks = Info.weekdays ();

Lagre endringene, og du vil ha ukedager oppført på skjermen.

Luxon gir også et alternativ for å få listen over meridiems bruker meridiems metode.

this.meridians = Info.meridiems ();

Endre HTML-koden i luxdate.component.html å vise uker og meridianer.

    måned       uke       Meridian    

Lagre endringene, og du vil kunne se ukene og meridianene som vises.

Håndtering av internasjonalisering ved hjelp av Luxon 

Luxon gir en Innstilling klasse, som du kan bruke til å håndtere Luxons samlede oppførsel. La oss angi standard lokalinnstilling for Luxon til el.

Importer innstillinger klasse i luxdate.component.ts fil.

importer DateTime, Settings, Info fra 'luxon';

I konstruktørmetoden til LuxdateComponent, angi standard locale som vist:

konstruktør () Settings.defaultLocale = 'el'; 

Lagre endringene, og du vil ha standard lokalsett til el.

Soneinfo ved hjelp av Luxon

Luxon-biblioteket gir et grensesnitt for å få detaljer relatert til sonen til en bestemt Dato tid gjenstand. For å bruke det, må du importere sone fra Luxon-biblioteket.

importer DateTime, Settings, Info, Zone fra 'luxon';

La oss prøve å bruke Zone på en Luxon Dato tid gjenstand. Lag en lokal Dato tid Luxon objekt.

la dateObj = DateTime.local (); 

Du kan bruke sone grensesnitt på dateObj for å få sonenavnet. Legg til følgende kode for å logge sonenavnet.

console.log ('Sone navn er', datoObj.zone.name);

Lagre endringene, og når du kjører appen, kan du se sonenavnet som er logget inn i nettleserkonsollen.

Sone navn er Asia / Kolkata

La oss prøve å skrive ut sonenavnet til en UTC DateTime-objekt.

la utcObj = DateTime.utc (); console.log ('Sone navn er', utcOjj.zone.name);

Ovennevnte kode vil skrive ut sonenavnet som UTC.

Sone navn er UTC

The Luxon sone grensesnitt gir en metode for å sammenligne to tidssoner. La oss prøve å sammenligne tidssone av Dato tid objekter localObj og utcObj.

hvis (localObj.zone.equals (utcObj.zone)) console.log ('Begge sonene er like');  else console.log ('Begge sonene er forskjellige'); 

Som vist i koden ovenfor har du brukt zone.equals metode for å sammenligne sonene. Lagre endringene og prøv å kjøre appen, og du vil få resultatet logget.

Begge sonene er forskjellige

Intervall i Luxon

intervall i Luxon er en wrapper for to Dato tid Endpoints som kan manipuleres ved hjelp av Luxon-metodene. Fra den offisielle dokumentasjonen:

Et intervallobjekt representerer et halvt åpent tidsintervall hvor hvert sluttpunkt er en DateTime. Konseptuelt er det en beholder for de to endepunktene, ledsaget av metoder for å lage, analysere, forhøre, sammenligne, transformere og formatere dem.

Det er et par forskjellige måter å skape et intervall ved hjelp av Luxon. La oss se på hvordan du lager et intervall ved hjelp av en start og slutt Dato tid gjenstand.

Importere intervall fra Luxon i LuxdateComponent. 

importer Intervall fra 'luxon';

Lage en start Dato tid objekt og en slutt Dato tid gjenstand.

la startDate = DateTime.local (); la endDate = DateTime.local (). pluss (minutter: 15);

Som vist i koden ovenfor skapte du startdato bruker gjeldende lokal tid og sluttdato ved å øke lokal tid med 15 minutter.

Lag et intervall ved hjelp av fromDateTimes metode.  

la intv = Interval.fromDateTimes (startDate, endDate); console.log ('Intervall er', intv);

Lagre endringene ovenfor, og når du kjører programmet, vil du få intervallet logget.

Nå kan du bruke Luxon-metoden til å manipulere eller formatere start- og sluttidspunktet i intervallobjektet. La oss si at du vil sjekke sonenavnet til starttiden i intervallet. Du kan gjøre det ved å bruke zone.name eiendom som vist:

console.log ('Startdatasone er', intv.s.zone.name);

Du vil få følgende utgang logget inn i nettleserkonsollen:

Startdatasone er Asia / Kolkata

Opprette varighet ved hjelp av Luxon

Luxon gir et par metoder for å skape varighet. For å komme i gang med å skape varighet, må du importere Varighet i din LuxdateComponent.

importer Varighet fra 'luxon';

Når den er importert, kan du bruke fromMillis metode for å lage en varighet ved å spesifisere millisekunder.

la femMinute = Varighet.fromMillis (5 * 60 * 1000); console.log ('Fem minutter er', femMinute);

Lagre endringene, og når du kjører programmet, har du det ovenfor fiveMinute varighet logget.

Du kan også bruke en annen Dato tid motsette seg å opprette en varighet ved hjelp av fromObject metode. Slik ser koden ut:

la startDate = DateTime.local (); la dur = Duration.fromObject (startDate); console.log ('Varighet fra objekt er', dur);

Lagre endringene, og du vil ha varigheten logget inn i nettleserkonsollen.

Pakke det opp

I denne veiledningen så du hvordan du begynner med å bruke Luxon-biblioteket for å jobbe med dato og klokkeslett i et Angular web-prosjekt. Du lærte hvordan du skal håndtere lokal tid og UTC-tid, og hvordan du lager et intervall og varighet ved hjelp av Luxon.

For grundig informasjon om bruk av Luxon-biblioteket, vil jeg anbefale å lese den offisielle dokumentasjonen.

Hvordan var din erfaring lært å jobbe med Luxon? Gi oss beskjed om dine tanker i kommentarene nedenfor.