Moment.js er et fantastisk bibliotek for effektiv håndtering av dato og klokkeslett i React-applikasjoner.

Å administrere datoer og klokkeslett i React kan være en utfordring for de som mangler kjennskap til området. Heldigvis finnes det flere biblioteker som kan hjelpe deg med dato- og tidsstyring i React. Et av disse bibliotekene er Moment.js.

Moment.js er et lettvektsbibliotek med en enkel måte å manipulere og formatere datoer og klokkeslett i JavaScript.

Installerer Moment.js-biblioteket

Moment.js biblioteket er en pakke for å administrere dato- og klokkeslettoperasjoner i JavaScript. Installasjon av Moment.js-biblioteket er det første trinnet i å bruke Moment.js i React-applikasjonen din. Du kan gjøre dette ved å kjøre følgende kommando i terminalen din:

npm installasjonsmoment

Når installasjonen er fullført, kan du bruke Moment.js i din React-komponent.

Bruke Moment.js for å vise dato og klokkeslett

Du kan bruke Moment.js til å vise datoer og klokkeslett i et spesifikt format i React-appen din. Importer for å bruke biblioteket øyeblikk fra den installerte pakken.

instagram viewer 
import Reagere fra'reagere';
import øyeblikk fra'øyeblikk';
funksjonApp() {


konst dato = øyeblikk().format("MMMM DD ÅÅÅÅ");
konst tid = øyeblikk().format("HH mm ss");


komme tilbake (




 I dagsin dato er {dato } 


 Klokken er { time } </p>
 </div>
 )
}


eksportmisligholde App

De øyeblikk() metoden lager et nytt øyeblikksobjekt som representerer et spesifikt tidspunkt. De format() metode formaterer et øyeblikksobjekt til en strengrepresentasjon.

De format() metoden tar et strengargument som spesifiserer ønsket format for øyeblikksobjektet. Strengargumentet kan inneholde en kombinasjon av bokstaver og spesialtegn, hver med en bestemt betydning.

Noen av disse spesialtegnene er:

  • ÅÅÅÅ: Årstall med fire sifre
  • ÅÅ: Årstall med to sifre
  • MM: Måned med to sifre
  • M: Måned med ett eller to sifre
  • MMMM: Måned i ord
  • DD: Dag i måneden med to sifre
  • D: Dag i måneden med ett eller to sifre
  • Gjøre: Dag i måneden med ordinalen
  • HH: Time med to sifre
  • H: Time med ett eller to sifre
  • mm: Minutt med to sifre
  • m: Minutt med ett eller to sifre
  • ss: Andre med to sifre
  • s: Andre med ett eller to sifre

Når App komponenten i forrige kodeblokk gjengis, gjeldende dato og klokkeslett vises i det angitte formatet på skjermen.

De øyeblikk() metode kan ta et strengdato- eller klokkeslettargument. Når øyeblikk() metoden har et strengdato- eller klokkeslettargument, oppretter den et øyeblikksobjekt som representerer den datoen eller klokkeslettet. Strengen kan være i forskjellige formater, for eksempel ISO 8601, RFC 2822 eller Unix-tidsstempel.

For eksempel:

konst dato = øyeblikk('1998-06-23').format("MMMM DD ÅÅÅÅ");

Bruke Moment.js til å manipulere dato og klokkeslett

Moment.js-biblioteket tilbyr også flere metoder for å manipulere datoer og klokkeslett. Disse metodene lar deg legge til eller trekke fra tidsintervaller, angi spesifikke verdier for dato- og klokkeslettkomponenter og utføre andre aktuelle operasjoner.

For eksempel:

import Reagere fra'reagere';
import øyeblikk fra'øyeblikk';
funksjonApp() {


konst i morgen = øyeblikk().add(1, 'dag').format("Gjør MMMM, ÅÅÅÅ");
konst tid = øyeblikk(). subtract(1, 'time').format("HH: mm: ss");
konst lastYear = øyeblikk().set('år', 2022).sett('måned', 1).format("Gjør MMMM, ÅÅÅÅ");
konst time = øyeblikk().get('time');


komme tilbake (


"App">
I morgendatoen til er { i morgen }


Dette var tiden: { time }, for en time siden</p>


{ i fjor }</p>


{ time }</p>
 </div>
 )
}


eksportmisligholde App

I dette eksemplet, du erklære følgende JavaScript-variabler: i morgen, tid, i fjor, og time. Disse fire variablene bruker ulike metoder i Moment.js-biblioteket for å manipulere dato og klokkeslett.

De i morgen variabelen bruker Legg til() metode for å legge til én dag til gjeldende dato. De Legg til() metoden legger til tid til et gitt Moment-objekt. Funksjonen tar to argumenter: en varighetsverdi og en streng som representerer tidsenheten som skal legges til. Enheten kan være år, måneder, uker, dager, timer, minutter, og sekunder.

Du kan også trekke fra tid ved å bruke trekke fra() metode. I dette tilfellet tid variabelen bruker trekke fra() metode for å trekke en time fra gjeldende tid.

Bruker sett() metoden, den i fjor variabel setter året til 2022 og måneden til februar (siden januar er representert som måned 0). De sett() metoden tildeler en bestemt tidsenhet til et Moment-objekt.

Med få() metode, kan du hente et bestemt tidspunkt. De få() metoden tar et enkelt argument, en tidsenhet.

Bruke Moment.js til å analysere dato og klokkeslett

En annen nyttig funksjon i Moment.js er evnen til å analysere datoer og klokkeslett fra strenger. Dette kan være nyttig når du arbeider med data fra eksterne kilder.

For å analysere en dato eller et klokkeslett fra en streng, må du bruke øyeblikk() metode. I dette tilfellet øyeblikk() metoden tar to argumenter, datostrengen og en formatstreng.

Her er et eksempel på hvordan du kan bruke øyeblikk() metode for å analysere datoer og klokkeslett:

import Reagere fra'reagere';
import øyeblikk fra'øyeblikk';
funksjonApp() {


konst dato = øyeblikk('2920130000', "Gjør-MMMM-ÅÅÅÅ").toDate();
konsoll.log(dato);


komme tilbake (


</div>
 )
}
eksportmisligholde App

I kodeblokken ovenfor, øyeblikk() metoden vil analysere denne strengen '2920130000' ved å bruke "Do-MMMM-YYYY"-formatstrengen. De toDate() metoden konverterer øyeblikksobjektet til et innebygd JavaScript Date-objekt.

De toDate() metoden tar ingen argumenter og returnerer et JavaScript Date-objekt som representerer samme dato og klokkeslett som momentobjektet.

Viser relativ tid

Med Moment.js-biblioteket kan du formatere og vise relativ tid. For å gjøre dette bruker du fra nå() og til nå() metoder. Disse metodene viser tiden mellom en gitt dato og gjeldende klokkeslett.

For eksempel:

import Reagere fra'reagere';
import øyeblikk fra'øyeblikk';
funksjonApp() {


konst i går = øyeblikk().subtract(7, 'dag');
konst tid1 = i går.fraNå(); // 7 dager siden
konst tid2 = i går.tilNå(); // om 7 dager


komme tilbake (




{ tid1 }</p>


{ tid2 }</p>
 </div>
 )
}


eksportmisligholde App

I dette eksemplet er fra nå() metoden returnerer den relative tiden som har gått siden den angitte datoen, mens til nå() metoden returnerer den relative tiden frem til gjeldende tidspunkt.

Mer til Moment.js

Moment.js er et kraftig bibliotek som gir en enkel måte å manipulere og formatere datoer og klokkeslett i JavaScript. Du har lært hvordan du manipulerer, viser og analyserer datoer og klokkeslett i React ved å bruke Moment.js.

Moment.js tilbyr flere andre metoder, som lokal, startOf, endOf, og så videre. Men med den oppgitte informasjonen er du mer enn forberedt på å begynne å bruke Moment.js i din React-applikasjon.