Moment.js er et fantastisk bibliotek til effektiv håndtering af dato- og tidsstyring i React-applikationer.

Håndtering af datoer og klokkeslæt i React kan udgøre en udfordring for dem, der mangler kendskab til området. Heldigvis er der flere biblioteker, der kan hjælpe dig med dato- og tidsstyring i React. Et af disse biblioteker er Moment.js.

Moment.js er et letvægtsbibliotek med en enkel måde at manipulere og formatere datoer og tidspunkter i JavaScript.

Installation af Moment.js-biblioteket

Moment.js biblioteket er en pakke til styring af dato og klokkeslæt i JavaScript. Installation af Moment.js-biblioteket er det første trin i at bruge Moment.js i din React-applikation. Du kan gøre dette ved at køre følgende kommando i din terminal:

npm installationsmoment

Når installationen er færdig, kan du bruge Moment.js i din React-komponent.

Brug af Moment.js til at vise dato og klokkeslæt

Du kan bruge Moment.js til at vise datoer og tidspunkter i et bestemt format i din React-app. Importér for at bruge biblioteket øjeblik fra den installerede pakke.

instagram viewer 
importere Reagere fra'reagere';
importere øjeblik fra'øjeblik';
fungereApp() {


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


Vend tilbage (




 I dagdatoen er {dato } 


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


eksportStandard App

Det øjeblik() metoden skaber et nyt øjebliksobjekt, der repræsenterer et bestemt tidspunkt. Det format() metode formaterer et øjebliksobjekt til en strengrepræsentation.

Det format() metoden tager et strengargument, der angiver det ønskede format for momentobjektet. Strengargumentet kan omfatte en kombination af bogstaver og specialtegn, hver med en bestemt betydning.

Nogle af disse specialtegn er:

  • ÅÅÅÅ: Årstal med fire cifre
  • ÅÅ: Årstal med to cifre
  • MM: Måned med to cifre
  • M: Måned med et eller to cifre
  • MMMM: Måned i ord
  • DD: Dag i måneden med to cifre
  • D: Dag i måneden med et eller to cifre
  • Gør: Dag i måneden med ordinalen
  • HH: Time med to cifre
  • H: Time med et eller to cifre
  • mm: Minutter med to cifre
  • m: Minutter med et eller to cifre
  • ss: Anden med to cifre
  • s: Anden med et eller to cifre

Når App komponent i den forrige kodeblok gengives, vises den aktuelle dato og klokkeslæt i det angivne format på skærmen.

Det øjeblik() metode kan tage et strengdato- eller tidsargument. Når øjeblik() metoden har et strengdato- eller klokkeslætsargument, opretter den et øjebliksobjekt, der repræsenterer denne dato eller klokkeslæt. Strengen kan være i forskellige formater, såsom ISO 8601, RFC 2822 eller Unix tidsstempel.

For eksempel:

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

Brug af Moment.js til at manipulere dato og klokkeslæt

Moment.js-biblioteket giver også flere metoder til at manipulere datoer og tidspunkter. Disse metoder giver dig mulighed for at tilføje eller trække tidsintervaller fra, indstille specifikke værdier for dato- og tidskomponenter og udføre andre relevante handlinger.

For eksempel:

importere Reagere fra'reagere';
importere øjeblik fra'øjeblik';
fungereApp() {


konst i morgen = øjeblik().add(1, 'dag').format("Gør MMMM, ÅÅÅÅ");
konst tid = moment().subtract(1, 'time').format("HH: mm: ss");
konst lastYear = moment().set('år', 2022).sæt('måned', 1).format("Gør MMMM, ÅÅÅÅ");
konst time = øjeblik().get('time');


Vend tilbage (


"App">
I morgendatoen er { i morgen }


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


{ sidste år }</p>


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


eksportStandard App

I dette eksempel vil du erklære følgende JavaScript-variabler: i morgen, tid, sidste år, og time. Disse fire variabler bruger forskellige metoder i Moment.js-biblioteket til at manipulere dato og klokkeslæt.

Det i morgen variabel bruger tilføje() metode til at tilføje en dag til den aktuelle dato. Det tilføje() metode tilføjer tid til et givet Moment-objekt. Funktionen tager to argumenter: en varighedsværdi og en streng, der repræsenterer den tidsenhed, der skal tilføjes. Enheden kunne være flere år, måneder, uger, dage, timer, minutter, og sekunder.

Du kan også trække tiden fra ved hjælp af trække fra() metode. I dette tilfælde tid variabel bruger trække fra() metode til at trække en time fra det aktuelle tidspunkt.

Bruger sæt() metode, den sidste år variabel indstiller året til 2022 og måneden til februar (da januar er repræsenteret som måned 0). Det sæt() metoden tildeler en bestemt tidsenhed til et Moment-objekt.

Med få() metode, kan du hente et bestemt tidspunkt. Det få() metode tager et enkelt argument, en tidsenhed.

Brug af Moment.js til at analysere dato og klokkeslæt

En anden nyttig funktion ved Moment.js er dens evne til at parse datoer og tidspunkter fra strenge. Dette kan være nyttigt, når du arbejder med data fra eksterne kilder.

For at parse en dato eller et klokkeslæt fra en streng skal du bruge øjeblik() metode. I dette tilfælde øjeblik() metoden tager to argumenter, datostrengen og en formatstreng.

Her er et eksempel på, hvordan du kan bruge øjeblik() metode til at analysere datoer og tidspunkter:

importere Reagere fra'reagere';
importere øjeblik fra'øjeblik';
fungereApp() {


konst dato = øjeblik('2920130000', "Gør-MMMM-ÅÅÅÅ").til dato();
konsol.log(dato);


Vend tilbage (


</div>
 )
}
eksportStandard App

I kodeblokken ovenfor, øjeblik() metoden vil parse denne streng '2920130000' ved hjælp af "Do-MMMM-YYYY" formatstrengen. Det til dato() metode konverterer momentobjektet til et indbygget JavaScript Date-objekt.

Det til dato() metoden tager ingen argumenter og returnerer et JavaScript Date-objekt, der repræsenterer samme dato og klokkeslæt som momentobjektet.

Viser relativ tid

Med Moment.js-biblioteket kan du formatere og vise relativ tid. For at gøre dette bruger du fra nu() og tilNu() metoder. Disse metoder viser tiden mellem en given dato og det aktuelle klokkeslæt.

For eksempel:

importere Reagere fra'reagere';
importere øjeblik fra'øjeblik';
fungereApp() {


konst i går = øjeblik().subtract(7, 'dag');
konst tid1 = i går.fraNu(); // 7 dage siden
konst tid2 = i går.tilNu(); // om 7 dage


Vend tilbage (




{ tid1 }</p>


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


eksportStandard App

I dette eksempel er fra nu() metode returnerer den relative tid, der er forløbet siden den angivne dato, mens tilNu() metode returnerer den relative tid indtil det aktuelle tidspunkt.

Mere til Moment.js

Moment.js er et kraftfuldt bibliotek, der giver en enkel måde at manipulere og formatere datoer og tidspunkter i JavaScript. Du har lært, hvordan du manipulerer, viser og parser datoer og tidspunkter i React ved hjælp af Moment.js.

Moment.js tilbyder flere andre metoder, såsom lokal, startOf, endOf og så videre. Men med de oplyste oplysninger er du mere end parat til at begynde at bruge Moment.js i din React-applikation.