Moment.js on fantastiline raamatukogu Reacti rakenduste kuupäeva ja kellaaja tõhusaks haldamiseks.

Kuupäevade ja kellaaja haldamine Reactis võib osutuda väljakutseks neile, kes ei tunne seda piirkonda hästi. Õnneks on mitu teeki, mis aitavad teil Reactis kuupäeva ja kellaaega hallata. Üks neist teekidest on Moment.js.

Moment.js on kerge teek, mille abil saab JavaScriptis kuupäevi ja kellaaegu lihtsalt manipuleerida ja vormindada.

Teegi Moment.js installimine

Moment.js raamatukogu on a pakett kuupäeva ja kellaaja toimingute haldamiseks JavaScriptis. Teegi Moment.js installimine on esimene samm rakenduses Moment.js kasutamiseks. Seda saate teha, käivitades terminalis järgmise käsu:

npm installi hetk

Kui installimine on lõpetatud, saate oma Reacti komponendis kasutada Moment.js-i.

Moment.js kasutamine kuupäeva ja kellaaja kuvamiseks

Saate kasutada Moment.js-i, et kuvada oma Reacti rakenduses kuupäevad ja kellaajad kindlas vormingus. Teegi kasutamiseks importige hetk installitud paketist.

importida





instagram viewer

 Reageerige alates'reageeri';
importida hetk alates'hetk';
funktsiooniRakendus() {


konst kuupäev = hetk().format("MMMM DD YYYY");
konst aeg = hetk().format("HH mm ss");


tagasi (




 Tänakuupäev on { kuupäev } 


 Kell on { aeg } </p>
 </div>
 )
}


eksportidavaikimisi Rakendus

The hetk () meetod loob uue hetkeobjekti, mis esindab konkreetset ajahetke. The formaat () meetod vormindab hetkeobjekti stringi esitusviisiks.

The formaat () meetod võtab stringargumendi, mis määrab hetkeobjekti soovitud vormingu. Stringi argument võib sisaldada tähtede ja erimärkide kombinatsiooni, millest igaühel on konkreetne tähendus.

Mõned neist erimärkidest on:

  • AAAA: neljakohaline aasta
  • YY: kahekohaline aasta
  • MM: kahekohaline kuu
  • M: kuu ühe või kahe numbriga
  • MMMM: Kuu sõnadega
  • DD: kahekohaline kuupäev
  • D: kuu päev ühe või kahe numbriga
  • Tee: kuu päev järjekorraga
  • HH: kahekohaline tund
  • H: tund ühe või kahe numbriga
  • mm: kahekohaline minut
  • m: minut ühe või kahe numbriga
  • ss: teine ​​kahekohaline
  • s: teine ​​ühe või kahe numbriga

Kui Rakendus renderdatakse eelmise koodiploki komponent, kuvatakse ekraanil praegune kuupäev ja kellaaeg määratud vormingus.

The hetk () meetod võib võtta stringi kuupäeva või kellaaja argumendi. Kui hetk () meetodil on string kuupäev või kellaaeg, loob see hetkeobjekti, mis esindab seda kuupäeva või kellaaega. String võib olla erinevates vormingutes, näiteks ISO 8601, RFC 2822 või Unixi ajatempel.

Näiteks:

konst kuupäev = hetk ('1998-06-23'.format("MMMM DD YYYY");

Moment.js-i kasutamine kuupäeva ja kellaaja manipuleerimiseks

Teek Moment.js pakub ka mitmeid meetodeid kuupäevade ja kellaaegade manipuleerimiseks. Need meetodid võimaldavad teil lisada või lahutada ajavahemikke, määrata kuupäeva ja kellaaja komponentidele konkreetseid väärtusi ning teha muid kohaldatavaid toiminguid.

Näiteks:

importida Reageerige alates'reageeri';
importida hetk alates'hetk';
funktsiooniRakendus() {


konst homme = hetk().add(1, 'päev'.format("Kas MMMM, YYYY");
konst aeg = hetk().lahutama(1, 'tund'.format("HH: mm: ss");
konst viimane aasta = hetk().set('aasta', 2022).set('kuu', 1.format("Kas MMMM, YYYY");
konst tund = hetk().get('tund');


tagasi (


"Rakendus">
Hommekuupäev on { homme }


See oli aeg: { aeg }, tund tagasi</p>


{ eelmine aasta }</p>


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


eksportidavaikimisi Rakendus

Selles näites sina deklareerida järgmised JavaScripti muutujad: homme, aega, eelmisel aastalja tund. Need neli muutujat kasutavad kuupäeva ja kellaaja muutmiseks erinevaid teegi Moment.js meetodeid.

The homme muutuja kasutab lisama() meetod praegusele kuupäevale ühe päeva lisamiseks. The lisama() meetod lisab antud hetkeobjektile aega. Funktsioonil on kaks argumenti: kestuse väärtus ja string, mis tähistab lisatavat ajaühikut. Üksus võiks olla aastat, kuud, nädalaid, päevadel, tundi, minutitja sekundit.

Samuti saate aega lahutada kasutades lahuta () meetod. Sel juhul on aega muutuja kasutab lahuta () meetod praegusest kellaajast ühe tunni lahutamiseks.

Kasutades set() meetod, eelmisel aastal muutuja seab aastaks 2022 ja kuuks veebruariks (kuna jaanuar on esitatud kuuna 0). The set() meetod määrab hetkeobjektile kindla ajaühiku.

Koos saada () meetodil, saate hankida kindla aja. The saada () meetod võtab ühe argumendi, ajaühiku.

Moment.js-i kasutamine kuupäeva ja kellaaja sõelumiseks

Veel üks Moment.js-i kasulik funktsioon on selle võime sõeluda kuupäevi ja kellaaegu stringidest. See võib olla kasulik välistest allikatest pärit andmetega töötamisel.

Kuupäeva või kellaaja sõelumiseks stringist peate kasutama hetk () meetod. Sel juhul on hetk () meetodil on kaks argumenti, kuupäevastring ja vormingustring.

Siin on näide selle kohta, kuidas saate kasutada hetk () kuupäevade ja kellaaegade sõelumise meetod:

importida Reageerige alates'reageeri';
importida hetk alates'hetk';
funktsiooniRakendus() {


konst kuupäev = hetk ('2920130000', „Do-MMMM-YYYY”).Kuupäev();
konsool.log( kuupäev );


tagasi (


</div>
 )
}
eksportidavaikimisi Rakendus

Ülaltoodud koodiplokis hetk () meetod parsib selle stringi '2920130000', kasutades vormingustringi "Do-MMMM-YYYY". The kuupäev() meetod teisendab hetkeobjekti natiivne JavaScripti kuupäevaobjekt.

The kuupäev() meetod ei võta argumente ja tagastab JavaScripti kuupäeva objekti, mis esindab sama kuupäeva ja kellaaega kui hetkeobjekt.

Suhtelise aja kuvamine

Teegi Moment.js abil saate suhtelist aega vormindada ja kuvada. Selleks kasutate nüüdsest() ja nüüd () meetodid. Need meetodid kuvavad kellaaega antud kuupäeva ja praeguse kellaaja vahel.

Näiteks:

importida Reageerige alates'reageeri';
importida hetk alates'hetk';
funktsiooniRakendus() {


konst eile = hetk().lahutama(7, 'päev');
konst aeg1 = eile.fromNow(); // 7 päeva tagasi
konst aeg2 = eile.kuni(); // 7 päevaga


tagasi (




{ aeg1 }</p>


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


eksportidavaikimisi Rakendus

Selles näites on nüüdsest() meetod tagastab määratud kuupäevast möödunud suhtelise aja, samas kui nüüd () meetod tagastab suhtelise aja kuni praeguse ajani.

Rohkem Moment.js-ile

Moment.js on võimas teek, mis pakub lihtsat viisi JavaScriptis kuupäevade ja kellaaegade manipuleerimiseks ja vormindamiseks. Olete õppinud, kuidas Moment.js-i abil Reactis kuupäevi ja kellaaegu manipuleerida, kuvada ja sõeluda.

Moment.js pakub mitmeid muid meetodeid, nagu kohalik, startOf, endOf ja nii edasi. Esitatud teabe põhjal olete aga enam kui valmis alustama Moment.js-i kasutamist oma Reacti rakenduses.