Share
Lucrul cu data și ora poate fi o sarcină confuză pentru dezvoltatorii care încep cu JavaScript. În acest tutorial, veți afla despre o nouă bibliotecă JavaScript numită Luxon, ceea ce face ca briza să funcționeze cu data și ora în JavaScript.
De-a lungul acestui tutorial, veți afla despre diferitele caracteristici ale bibliotecii Luxon și cum să le utilizați în proiectele de aplicații web.
Veți crea un proiect Angular și veți vedea cum să utilizați biblioteca Luxon pentru manipularea datei și a timpului în Angular. Să începem prin crearea unei aplicații web angulare.
ng noul AngularLuxon
După ce ați creat proiectul, navigați la directorul proiectului și creați o componentă nouă numită luxdate.
ng g componentă luxdate
Veți avea LuxdateComponent create și adăugate la modulul de aplicație din app.module.ts fişier. Eliminați setările implicite AppComponent din aplicație, prin ștergerea fișierelor componente din src / app pliant. Iată cum app.module.ts file looks:
import BrowserModule din '@ unghiular / platform-browser'; import NgModule de la '@ angular / core'; import LuxdateComponent din "./luxdate/luxdate.component"; @NgModule (declarații: [LuxdateComponent], import: [BrowserModule], furnizori: [], bootstrap: [LuxdateComponent]) clasa de export AppModule
Modificați src / index.html fișier pentru a adăuga LuxdateComponent.
Salvați modificările de mai sus și porniți serverul.
npm start
Veți avea aplicația care rulează la http: // localhost: 4200 /.
Să importăm biblioteca Luxon în aplicația dvs..
npm install --save luxon
Odată ce ați instalat aplicația Luxon în aplicația Angular, introduceți-l în aplicația LuxdateComponent componentă. Acum sunteți gata să utilizați biblioteca Luxon în proiectul dvs..
Să aruncăm o privire asupra modului de utilizare a timpului local Luxon bibliotecă. Import DateTime din biblioteca Luxon.
import DateTime de la "luxon";
În interiorul LuxdateComponent, defini o variabilă numită localDatetime.
public localDatetime;
Setați valoarea câmpului localDatetime variabilă după cum se arată:
this.localDatetime = DateTime.local ();
Render the localDatetime variabilă în luxdate.component.html fişier.
LocalDatetime
Salvați modificările și veți avea ora locală afișată pe pagina web.
2017-12-31T15: 55: 12.761 + 05: 30
Data și ora afișate mai sus reprezintă ora locală cu fusul orar atașat. Puteți formata data și ora în continuare pentru ao face mai intuitivă.
Formatați data și ora pentru a fi afișate utilizând linia de mai jos a codului.
this.localDatetime = DateTime.local () pentru aLocaleString (DateTime.DATETIME_FULL);
Salvați linia de cod de mai sus și veți avea afișat data și ora următoare.
31 decembrie 2017, ora 22:35 GMT + 5:30
În mod similar, .UTC metodă în DateTime obiect dă timpul UTC.
Adăugați o nouă variabilă în LuxdateComponent pentru a seta ora UTC.
public utcDatetime;
Setați valoarea câmpului utcDatetime variabilă folosind Luxon datetime obiect.
this.utcDatetime = DateTime.utc () pentru aLocaleString (DateTime.DATETIME_FULL);
Render the utcDatetime variabilă în luxdate.component.html fișier după cum se arată:
Biblioteca Luxon
Ora locala : LocalDatetimeTimp UTC: UtcDatetime
Adăugați următorul stil CSS la luxdate.component.css fişier.
.container text-aliniere: centru; lățime: 100%; .time display: inline-block; .local border: 1px solid # 8c8282; text-aliniere: stânga; fundal-culoare: burlywood; padding: 10px; .utc margin-top: 30px; frontieră: 1px solid # 8c8282; text-aliniere: stânga; fundal-culoare: burlywood; padding: 10px; .label font-family: serif; font-size: 22px; font-style: inițial;
Salvați modificările de mai sus și veți putea vizualiza ora locală și ora UTC utilizând biblioteca Luxon.
Pentru a afișa ora locală și ora UTC cu secunde incluse, puteți utiliza DATETIME_FULL_WITH_SECONDS. Iata cum va arata:
ngOnInit () this.localDatetime = DateTime.local () pentru aLocaleString (DateTime.DATETIME_FULL_WITH_SECONDS); this.utcDatetime = DateTime.utc () pentru aLocaleString (DateTime.DATETIME_FULL_WITH_SECONDS);
Salvați modificările și veți avea ora locală și ora UTC afișate cu secunde.
Biblioteca Luxon oferă un Info clasa care ajută la obținerea unor informații generale privind data și ora.
Când vă ocupați de dată și oră, este destul de comun că este posibil să aveți nevoie de lista de luni într-un an. Utilizarea Info clasa, puteți obține lista de luni ca o matrice.
Importați Info clasa în luxdate.component.ts fişier.
import DateTime, Info de la "luxon";
Declarați o variabilă pentru lista de luni și inițializați-o.
luni publice; constructor () this.months = [];
Setați lista de luni din Info clasă.
this.months = Info.months ();
Adăugați următorul cod HTML la luxdate.component.html fișier pentru a afișa luni conținut variabil.
Luna:
Salvați modificările de mai sus și veți avea lista lunară populate.
În mod similar, folosind zilele saptamanii vă oferă o listă a săptămânilor.
this.weeks = Info.weekdays ();
Salvați modificările, iar săptămânile vor fi afișate pe ecran.
Luxon oferă, de asemenea, o opțiune pentru a obține lista de meridiems folosind meridiems metodă.
this.meridians = Info.meridiems ();
Modificați codul HTML în luxdate.component.html pentru a afișa săptămâni și meridiane.
Salvați modificările și veți putea vedea săptămânile și meridianele afișate.
Luxon oferă o reglaj clasa, prin care puteți trata comportamentul general al lui Luxon. Să setăm setarea implicită a locației Luxon la el.
Importați Setări clasa în luxdate.component.ts fişier.
import DateTime, Setări, Info de la "luxon";
În metoda constructorului LuxdateComponent, setați localizarea implicită după cum se arată:
constructor () Setări.defaultLocale = 'el';
Salvați modificările și veți avea setarea locală implicită la el.
Biblioteca Luxon oferă o interfață pentru a obține detaliile legate de zona particulară DateTime obiect. Pentru ao folosi, trebuie să importați Zona din biblioteca Luxon.
importați DateTime, Settings, Info, Zone de la "luxon";
Să încercăm să folosim Zona pe un Luxon DateTime obiect. Creați un local DateTime Obiectul Luxon.
permite dateObj = DateTime.local ();
Puteți utiliza funcția Zona interfață pe dateObj pentru a obține numele zonei. Adăugați următorul cod pentru a înregistra numele zonei.
Accentsconagua
console.log ("Numele zonei este", dataObj.zone.name);Salvați modificările și executați aplicația, veți putea vizualiza numele zonei înregistrate în consola browserului.
Numele zonei este Asia / Kolkata
Să încercăm să imprimați numele zonei unui obiect DateTime UTC.
lasă utcObj = DateTime.utc (); console.log ("Numele zonei este", utcObj.zone.name);Codul de mai sus va imprima numele zonei ca UTC.
Numele zonei este UTC
Luxonul Zona interfața oferă o metodă de comparare a două fusuri orare. Să încercăm să comparăm fus orar din DateTime obiecte localObj și utcObj.
if (localObj.zone.equals (utcObj.zone)) console.log ("Ambele zone sunt egale"); altceva console.log ("Ambele zone sunt diferite"); După cum se vede în codul de mai sus, ați folosit zone.equals metoda de comparare a zonelor. Salvați modificările și încercați să rulați aplicația și veți înregistra rezultatul.
Ambele zone sunt diferite
Interval în Luxon este un înveliș pentru doi DateTime puncte finale care pot fi manipulate folosind metodele Luxon. Din documentația oficială:
Un obiect Interval reprezintă un interval semi-deschis de timp, în care fiecare punct final este DateTime. Conceptual, este un container pentru cele două puncte finale, însoțit de metode de creare, parsing, interogare, comparare, transformare și formatare a acestora.
Există câteva moduri diferite de a crea un interval folosind Luxon. Să ne uităm la cum să creăm un interval folosind un început și un sfârșit DateTime obiect.
Import Interval de la Luxon din LuxdateComponent.
import Interval de la "luxon";
Creeaza o start DateTime obiect și an Sfârșit DateTime obiect.
permiteți startDate = DateTime.local (); permiteți endDate = DateTime.local () plus (minute: 15);
După cum se vede în codul de mai sus, ați creat data de început utilizând ora locală curentă și Data de încheiere prin creșterea timpului local cu 15 minute.
Creați un interval utilizând funcția fromDateTimes metodă.
permiteți intv = Interval.fromDateTimes (startDate, endDate); console.log ('Interval este', intv);Salvați modificările de mai sus și la rularea aplicației, veți avea intervalul înregistrat.
Acum puteți aplica metoda Luxon pentru a manipula sau a forma timpul de începere și de sfârșit în obiectul interval. Să presupunem că doriți să verificați numele zonei de timp de pornire în intervalul respectiv. Puteți face acest lucru folosind zone.name proprietate după cum se arată:
console.log ('Zona dată de început este', intv.s.zone.name);În consola browserului veți avea următorul rezultat înregistrat:
Zona de început este Asia / Kolkata
Luxon oferă câteva metode de creare a duratei. Pentru a începe să creezi durata, trebuie să imporți Durată în tine LuxdateComponent.
import Durata de la "luxon";
Odată ce ați fost importat, puteți utiliza funcția fromMillis pentru a crea o durată specificând milisecunde.
lăsați cinci minute = Durată. de la Millis (5 * 60 * 1000); console.log ("Cinci minute este", cinci minute);Salvați modificările și executați aplicația, veți avea cele de mai sus fiveMinute durata înregistrată.
Puteți folosi și altul DateTime obiect pentru a crea o durată folosind fromObject metodă. Iată cum arată codul:
permiteți startDate = DateTime.local (); dur dur = Duration.fromObject (startDate); console.log ('Durata de la obiect este', dur);Salvați modificările și veți avea durata înregistrată în consola browserului.
În acest tutorial, ați văzut cum să începeți să utilizați biblioteca Luxon pentru a lucra cu data și ora într-un proiect web angular. Ați învățat cum să rezolvați timpul local și timpul UTC și cum să creați un interval și o durată folosind Luxon.
Pentru informații detaliate privind utilizarea bibliotecii Luxon, aș recomanda citirea documentației oficiale.
Cum ați învățat experiența dvs. să lucrați cu Luxon? Spuneți-ne gândurile dvs. în comentariile de mai jos.
