Share
Werken met datum en tijd kan een verwarrende taak zijn voor ontwikkelaars die beginnen met JavaScript. In deze zelfstudie leert u meer over een nieuwe JavaScript-bibliotheek met de naam Luxon, waardoor het een koud kunstje is om met datum en tijd te werken in JavaScript.
In de loop van deze zelfstudie leert u meer over de verschillende functies van de Luxon-bibliotheek en hoe u deze kunt gebruiken in uw webapplicatieprojecten..
U maakt een Angular-project en ziet hoe u de Luxon-bibliotheek gebruikt voor datum- en tijdmanipulatie in Angular. Laten we beginnen door een Angular web-app te maken.
ng nieuwe AngularLuxon
Nadat u het project hebt gemaakt, navigeert u naar de projectdirectory en maakt u een nieuw onderdeel genaamd luxdate.
ng g component luxdate
Je hebt de LuxdateComponent gemaakt en toegevoegd aan de applicatiemodule in de app.module.ts het dossier. Verwijder de standaard AppComponent van de toepassing door de componentbestanden te verwijderen uit de src / app map. Hier is hoe het app.module.ts bestand ziet er:
import BrowserModule vanuit '@ angular / platform-browser'; import NgModule uit '@ angular / core'; importeer LuxdateComponent van './luxdate/luxdate.component'; @ NgModule (aangiften: [LuxdateComponent], importeert: [BrowserModule], providers: [], bootstrap: [LuxdateComponent]) exportklasse AppModule
Wijzig de src / index.html bestand om de. toe te voegen LuxdateComponent.
Sla de bovenstaande wijzigingen op en start de server.
npm start
U zult de applicatie draaien op http: // localhost: 4200 /.
Laten we de Luxon-bibliotheek importeren in uw applicatie.
npm install - bewaar luxon
Nadat u Luxon in de Angular-toepassing hebt geïnstalleerd, importeert u deze in de LuxdateComponent component. Nu bent u klaar om de Luxon-bibliotheek in uw project te gebruiken.
Laten we eens kijken hoe we de lokale tijd kunnen gebruiken met de Luxon bibliotheek. Importeren Datum Tijd van de Luxon-bibliotheek.
importeer DateTime van 'luxon';
Binnen in de LuxdateComponent, definieer een variabele genaamd localDatetime.
public localDatetime;
Stel de waarde in van de localDatetime variabele zoals getoond:
this.localDatetime = DateTime.local ();
Render de localDatetime variabele in de luxdate.component.html het dossier.
LocalDatetime
Sla de wijzigingen op en de lokale tijd wordt weergegeven op de webpagina.
2017-12-31T15: 55: 12,761 + 05: 30
De hierboven weergegeven datum en tijd is de lokale tijd met de tijdzone als bijlage. U kunt de datum en tijd verder indelen om het intuïtiever te maken.
Formatteer de datum en tijd om weer te geven met behulp van de onderstaande coderegel.
this.localDatetime = DateTime.local (). toLocaleString (DateTime.DATETIME_FULL);
Sla de bovenstaande regel code op en de volgende datum en tijd worden weergegeven.
31 december 2017, 10:35 PM GMT + 5: 30
Evenzo is de .UTC methode in de Datum Tijd object geeft de UTC-tijd.
Voeg een nieuwe variabele toe in de LuxdateComponent om de UTC-tijd in te stellen.
openbare utcDatetime;
Stel de waarde in van de utcDatetime variabele met behulp van de Luxon Datum Tijd voorwerp.
this.utcDatetime = DateTime.utc (). toLocaleString (DateTime.DATETIME_FULL);
Render de utcDatetime variabele in de luxdate.component.html bestand zoals getoond:
Luxon-bibliotheek
Lokale tijd : LocalDatetimeUTC-tijd: UtcDatetime
Voeg de volgende CSS-stijl toe aan de luxdate.component.css het dossier.
.container text-align: center; breedte: 100%; .time display: inline-block; .local border: 1px solid # 8c8282; text-align: left; achtergrondkleur: burlywood; opvulling: 10px; .utc margin-top: 30px; rand: 1px vast # 8c8282; text-align: left; achtergrondkleur: burlywood; opvulling: 10px; .label font-family: serif; lettertypegrootte: 22px; lettertype-stijl: initiaal;
Sla de bovenstaande wijzigingen op en u kunt de lokale tijd en de UTC-tijd bekijken met behulp van de Luxon-bibliotheek.
Om de lokale tijd en UTC-tijd met de seconden opgenomen weer te geven, kunt u gebruiken DATETIME_FULL_WITH_SECONDS. Hier is hoe het eruit zal zien:
ngOnInit () this.localDatetime = DateTime.local (). toLocaleString (DateTime.DATETIME_FULL_WITH_SECONDS); this.utcDatetime = DateTime.utc (). toLocaleString (DateTime.DATETIME_FULL_WITH_SECONDS);
Sla de wijzigingen op en u krijgt de lokale tijd en UTC-tijd weergegeven met seconden.
De Luxon-bibliotheek biedt een info klasse die helpt bij het verkrijgen van algemene informatie over datum en tijd.
Als het gaat om datum en tijd, is het vrij normaal dat u de lijst met maanden in een jaar nodig heeft. De ... gebruiken info klasse, je kunt de lijst met maanden als een array krijgen.
Importeer de info klasse in de luxdate.component.ts het dossier.
importeer DateTime, Info uit 'luxon';
Declareer een variabele voor de lijst met maanden en initialiseer deze.
openbare maanden; constructor () this.months = [];
Stel de maandlijst in vanuit de info klasse.
this.months = Info.months ();
Voeg de volgende HTML toe aan de luxdate.component.html bestand om de maanden variabele inhoud.
Maand:
Sla de bovenstaande wijzigingen op en u heeft de maandlijst ingevuld.
Evenzo, met behulp van de doordeweekse dagen methode geeft u een lijst met de weekdagen.
this.weeks = Info.weekdays ();
Sla de wijzigingen op en de weekdagen staan op het scherm.
Luxon biedt ook een optie om de lijst van te krijgen meridiems de ... gebruiken meridiems methode.
this.meridians = Info.meridiems ();
Pas de HTML-code in de luxdate.component.html om de weken en meridianen.
Sla de wijzigingen op en u kunt de weergegeven weken en meridianen bekijken.
Luxon biedt een omgeving klasse, waarmee je het algemene gedrag van Luxon aankunt. Laten we de standaard locale instelling van Luxon instellen op el.
Importeer de instellingen klasse in de luxdate.component.ts het dossier.
importeer DateTime, Instellingen, Info vanuit 'luxon';
In de constructormethode van LuxdateComponent, stel de standaard locale in zoals getoond:
constructor () Settings.defaultLocale = 'el';
Sla de wijzigingen op en je hebt de standaard locale ingesteld op el.
De Luxon-bibliotheek biedt een interface om de details te krijgen die betrekking hebben op de zone van een bepaald gebied Datum Tijd voorwerp. Om het te gebruiken, moet je importeren Zone van de Luxon-bibliotheek.
importeer DateTime, Instellingen, Info, Zone vanuit 'luxon';
Laten we proberen Zone op een Luxon te gebruiken Datum Tijd voorwerp. Maak een lokaal Datum Tijd Luxon-object.
laat dateObj = DateTime.local ();
U kunt de Zone interface op de dateObj om de zonenaam te krijgen. Voeg de volgende code toe om de zonenaam te loggen.
Accentsconagua
console.log ('Zonenaam is', dateObj.zone.name);Sla de wijzigingen op en bij het uitvoeren van de app kunt u de zonelaam bekijken die is vastgelegd in de browserconsole.
Zonenaam is Azië / Kolkata
Laten we proberen de zonenaam van een UTC DateTime-object af te drukken.
laat utcObj = DateTime.utc (); console.log ('Zonenaam is', utcObj.zone.name);De bovenstaande code zal de zonenaam als afdrukken UTC.
Zonenaam is UTC
De Luxon Zone interface biedt een methode om twee te vergelijken tijdzones. Laten we proberen het te vergelijken tijdzone van de Datum Tijd voorwerpen localObj en utcObj.
if (localObj.zone.equals (utcObj.zone)) console.log ('Beide zones zijn gelijk'); else console.log ('Beide zones zijn verschillend'); Zoals te zien in de bovenstaande code, hebt u de zone.equals methode om de zones te vergelijken. Sla de wijzigingen op en probeer de app uit te voeren, en u zult het resultaat laten loggen.
Beide zones zijn verschillend
Interval in Luxon is een wikkel voor twee Datum Tijd eindpunten die kunnen worden gemanipuleerd met behulp van de Luxon-methoden. Van de officiële documentatie:
Een Interval-object vertegenwoordigt een half-open interval van tijd, waarbij elk eindpunt een DateTime is. Conceptueel gezien is het een container voor die twee eindpunten, vergezeld van methoden voor het maken, ontleden, ondervragen, vergelijken, transformeren en formatteren ervan.
Er zijn een aantal verschillende manieren om een interval te maken met behulp van Luxon. Laten we eens kijken naar hoe een interval te maken met behulp van een begin en einde Datum Tijd voorwerp.
Importeren Interval van Luxon in LuxdateComponent.
import Interval uit 'luxon';
Maak een begin Datum Tijd object en een einde Datum Tijd voorwerp.
laat startDate = DateTime.local (); laat endDate = DateTime.local (). plus (minuten: 15);
Zoals te zien in de bovenstaande code, hebt u de begin datum gebruik van de huidige lokale tijd en einddatum door de lokale tijd met 15 minuten te verhogen.
Maak een interval met behulp van de fromDateTimes methode.
laat intv = Interval.fromDateTimes (startdatum, einddatum); console.log ('Interval is', intv);Sla de bovenstaande wijzigingen op en bij het uitvoeren van de toepassing wordt het interval vastgelegd.
Nu kunt u de Luxon-methode toepassen om de begin- en eindtijd in het intervalobject te bewerken of te formatteren. Stel dat u de zonenaam van de begintijd in het interval wilt controleren. U kunt dit doen met behulp van de zone.name eigendom zoals getoond:
console.log ('Start datum zone is', intv.s.zone.name);U heeft de volgende uitvoer vastgelegd in de browserconsole:
Startdatumzone is Azië / Kolkata
Luxon biedt een aantal methoden om de duur te maken. Als u wilt beginnen met het maken van de duur, moet u importeren Looptijd in uw LuxdateComponent.
importeer Duur van 'luxon';
Nadat het is geïmporteerd, kunt u de fromMillis methode om een duur te maken door de milliseconden op te geven.
laat fiveMinute = Duration.fromMillis (5 * 60 * 1000); console.log ('Five minutes is', fiveMinute);Sla de wijzigingen op en bij het uitvoeren van de toepassing heeft u het bovenstaande vijf minuten duur ingelogd.
Je kunt ook een andere gebruiken Datum Tijd object om een duur te maken met behulp van de fromObject methode. Hier ziet u hoe de code eruitziet:
laat startDate = DateTime.local (); laat dur = Duration.fromObject (startDatum); console.log ('Duur van object is', dur);Sla de wijzigingen op en je hebt de duur aangemeld in de browserconsole.
In deze zelfstudie zag u hoe u aan de slag kon gaan met het gebruik van de Luxon-bibliotheek voor het werken met datum en tijd in een hoekig webproject. Je hebt geleerd hoe je om moet gaan met lokale tijd en UTC-tijd en hoe je een interval en duur kunt creëren met Luxon.
Voor uitgebreide informatie over het gebruik van de Luxon-bibliotheek raad ik u aan de officiële documentatie te lezen.
Hoe was je ervaring om met Luxon te leren werken? Laat het ons weten in de reacties hieronder.
