Share
Att arbeta med datum och tid kan vara en förvirrande uppgift för utvecklare som börjar med JavaScript. I denna handledning läser du om ett nytt JavaScript-bibliotek som heter Luxon vilket gör det lätt att arbeta med datum och tid i JavaScript.
Under hela handledningen kommer du att lära dig om de olika funktionerna i Luxon-biblioteket och hur du använder det i dina webbapplikationsprojekt.
Du skapar ett Angular-projekt och ser hur du använder Luxon-biblioteket för datum- och tidsmanipulation i Angular. Låt oss börja med att skapa en Angular web app.
ng ny AngularLuxon
När du har skapat projektet, navigera till projektkatalogen och skapa en ny komponent som heter luxdate.
ng g komponent luxdate
Du kommer att ha LuxdateComponent skapad och läggas till i applikationsmodulen i app.module.ts fil. Ta bort standardvärdet AppComponent från programmet genom att radera komponentfilerna från src / app mapp. Här är hur app.module.ts fil ser ut:
importera BrowserModule från '@ vinkel / plattform-webbläsare'; importera NgModule från '@ vinkel / kärna'; importera LuxdateComponent från '. /luxdate/luxdate.component'; @NgModule (deklarationer: [LuxdateComponent], import: [BrowserModule], leverantörer: [], bootstrap: [LuxdateComponent]) exportklass AppModule
Ändra src / index.html fil för att lägga till LuxdateComponent.
Spara ovanstående ändringar och starta servern.
npm start
Du kommer att få programmet att gå på http: // localhost: 4200 /.
Låt oss importera Luxon-biblioteket till din ansökan.
npm installera - spara luxon
När du har installerat Luxon i Angular-applikationen, importera den i LuxdateComponent komponent. Nu är du redo att använda Luxon-biblioteket i ditt projekt.
Låt oss ta en titt på hur man får den lokala tiden med hjälp av Luxon bibliotek. Importera Datum Tid från Luxon-biblioteket.
importera DateTime från 'luxon';
Inuti LuxdateComponent, definiera en variabel som heter localDatetime.
allmän lokal tid
Ställ in värdet på localDatetime variabel som visat:
this.localDatetime = DateTime.local ();
Render the localDatetime variabel i luxdate.component.html fil.
LocalDatetime
Spara ändringarna och du får lokal tid som visas på webbsidan.
2017-12-31T15: 55: 12,761 + 05: 30
Datum och tid som visas ovan är lokal tid med den tillhörna tidszonen. Du kan formatera datum och tid för att göra det mer intuitivt.
Formatera datum och tid för visning med hjälp av den nedan angivna koden.
this.localDatetime = DateTime.local (). toLocaleString (DateTime.DATETIME_FULL);
Spara ovanstående kodrad och du får följande datum och tid.
31 december 2017, 10:35 PM GMT + 5:30
På samma sätt, .utc metod i Datum Tid objektet ger UTC-tiden.
Lägg till en ny variabel i LuxdateComponent för att ställa in UTC-tiden.
offentlig utcDatenime;
Ställ in värdet på utcDatetime variabel med hjälp av Luxon Datum Tid objekt.
this.utcDatetime = DateTime.utc (). toLocaleString (DateTime.DATETIME_FULL);
Render the utcDatetime variabel i luxdate.component.html fil som visas:
Luxon-biblioteket
Lokal tid : LocalDatetimeUTC-tid: UtcDatetime
Lägg till följande CSS-stil i luxdate.component.css fil.
.behållare text-align: center; bredd: 100%; .tid display: inline-block; .local border: 1px solid # 8c8282; text-align: left; bakgrundsfärg: burlywood; vaddering: 10px; .utc margin-top: 30px; gränsen: 1px fast # 8c8282; text-align: left; bakgrundsfärg: burlywood; vaddering: 10px; .label font-family: serif; fontstorlek: 22px; typsnittstyp: initialt;
Spara ovanstående ändringar, och du kommer att kunna visa lokal tid och UTC-tid med Luxon-biblioteket.
För att visa lokal tid och UTC-tid med medföljande sekunder kan du använda DATETIME_FULL_WITH_SECONDS. Så här ser det ut:
ngOnInit () this.localDatetime = DateTime.local (). toLocaleString (DateTime.DATETIME_FULL_WITH_SECONDS); this.utcDatetime = DateTime.utc (). toLocaleString (DateTime.DATETIME_FULL_WITH_SECONDS);
Spara ändringarna, och du kommer att få lokal tid och UTC-tid som visas med sekunder.
Luxon-biblioteket ger en Info klass som hjälper till att få lite allmän information om datum och tid.
När det gäller datum och tid är det ganska vanligt att du kanske behöver listan över månader på ett år. Använda Info klass, kan du få listan över månader som en matris.
Importera Info klass i luxdate.component.ts fil.
importera DateTime, Info från 'luxon';
Förklara en variabel för listan över månader och initiera den.
offentliga månader konstruktör () this.months = [];
Ange månadslistan från Info klass.
this.months = Info.months ();
Lägg till följande HTML i luxdate.component.html fil för att visa månader variabelt innehåll.
Månad:
Spara ovanstående ändringar, och du kommer att få månadslistan befolkade.
På samma sätt använder man vardagar Metoden ger dig en lista över vardagar.
this.weeks = Info.weekdays ();
Spara ändringarna, och du kommer att ha vardagen listade på skärmen.
Luxon ger också ett alternativ att få listan över meridiems använda meridiems metod.
this.meridians = Info.meridiems ();
Ändra HTML-koden i luxdate.component.html för att visa veckor och meridianer.
Spara ändringarna, och du kommer att kunna visa veckorna och meridianerna som visas.
Luxon ger en Miljö klass, med vilken du kan hantera Luxons övergripande beteende. Låt oss ställa in standardinställningen för Luxon till el.
Importera inställningar klass i luxdate.component.ts fil.
importera DateTime, Settings, Info från 'luxon';
I konstruktormetoden för LuxdateComponent, ställa in standardpositionen som visas:
konstruktör () Settings.defaultLocale = 'el';
Spara ändringarna, och du kommer att ha standard locale set till el.
Luxon-biblioteket ger ett gränssnitt för att få detaljer relaterade till zonen för en viss Datum Tid objekt. För att kunna använda det måste du importera Zon från Luxon-biblioteket.
importera DateTime, Settings, Info, Zone från "luxon";
Låt oss försöka använda Zone på en Luxon Datum Tid objekt. Skapa en lokal Datum Tid Luxon objekt.
låt dateObj = DateTime.local ();
Du kan använda Zon gränssnitt på dateObj för att få zonnamnet. Lägg till följande kod för att logga in zonnamnet.
Accentsconagua
console.log ('Zonnamn är', datumObj.zon.namn);Spara ändringarna, och när du kör appen kan du se zonnamnet som är inloggat i webbläsarkonsolen.
Zonnamn är Asien / Kolkata
Låt oss försöka skriva ut zonnamnet på ett UTC DateTime-objekt.
låt utcObj = DateTime.utc (); console.log ('Zonnamn är', utcObj.zone.name);Ovanstående kod kommer att skriva ut zonnamnet som UTC.
Zonnamn är UTC
Luxon Zon gränssnitt ger en metod för att jämföra två tidszoner. Låt oss försöka jämföra tidszon av Datum Tid objekt localObj och utcObj.
om (localObj.zone.equals (utcObj.zone)) console.log ("Båda zoner är lika"); else console.log ("Båda zoner är olika"); Som framgår av ovanstående kod har du använt zone.equals Metod för att jämföra zoner. Spara ändringarna och försök att köra appen, så får du resultatet loggat.
Båda zonen är olika
Intervall i Luxon är ett omslag för två Datum Tid slutpunkter som kan manipuleras med hjälp av Luxon-metoderna. Från den officiella dokumentationen:
Ett intervallobjekt representerar ett halvt öppet tidsintervall, där varje slutpunkt är en DateTime. Konceptuellt är det en behållare för de två ändpunkterna, åtföljd av metoder för att skapa, analysera, förhöra, jämföra, omvandla och formatera dem.
Det finns ett par olika sätt att skapa ett intervall med Luxon. Låt oss titta på hur man skapar ett intervall med start och slut Datum Tid objekt.
Importera Intervall från Luxon i LuxdateComponent.
importera Intervall från 'luxon';
Skapa en Start Datum Tid objekt och an slutet Datum Tid objekt.
låt startDate = DateTime.local (); låt endDate = DateTime.local (). plus (minuter: 15);
Som framgår av ovanstående kod skapade du start datum med aktuell lokal tid och slutdatum genom att öka lokal tid med 15 minuter.
Skapa ett intervall med hjälp av fromDateTimes metod.
låt intv = Interval.fromDateTimes (startDate, endDate); console.log ("Intervall är", intv);Spara ovanstående ändringar, och om du kör programmet ska du ha intervallet loggat.
Nu kan du använda Luxon-metoden för att manipulera eller formatera start- och sluttid i intervallobjektet. Låt oss säga att du vill kontrollera zonnamnet för starttiden i intervallet. Du kan göra det genom att använda zone.name egendom som visas:
console.log ('Start datumzon är', intv.s.zone.name);Du kommer att få följande utmatning inloggad i webbläsarkonsolen:
Startdatumszon är Asien / Kolkata
Luxon ger ett antal metoder för att skapa varaktighet. För att komma igång med att skapa varaktighet måste du importera Varaktighet i din LuxdateComponent.
importera Duration från 'luxon';
När det är importerat kan du använda fromMillis metod för att skapa en varaktighet genom att specificera millisekunderna.
låt femMinute = Duration.fromMillis (5 * 60 * 1000); console.log ("Fem minuter är", femMinute);Spara ändringarna, och om du kör programmet ska du ha ovanstående fiveMinute varaktighet loggad.
Du kan också använda en annan Datum Tid objekt att skapa en varaktighet med hjälp av fromObject metod. Så här ser koden ut:
låt startDate = DateTime.local (); låt dur = Duration.fromObject (startDate); console.log ('Varaktighet från objekt är', dur);Spara ändringarna, och du kommer att ha längden inloggad i webbläsarkonsolen.
I denna handledning såg du hur du började med att använda Luxon-biblioteket för att arbeta med datum och tid i ett Angular web-projekt. Du lärde dig hur man hanterar lokal tid och UTC-tid, och hur man skapar ett intervall och varaktighet med Luxon.
För djup information om användningen av Luxon-biblioteket rekommenderar jag att du läser den officiella dokumentationen.
Hur var din erfarenhet att lära sig att arbeta med Luxon? Låt oss veta dina tankar i kommentarerna nedan.
