Kako rukovati upravljanjem datumom i vremenom u Reactu koristeći Moment.js

Upravljanje datumima i vremenom u Reactu može predstavljati izazov za one koji nisu upoznati s tim područjem. Srećom, postoji nekoliko biblioteka koje vam mogu pomoći u upravljanju datumom i vremenom u Reactu. Jedna od tih biblioteka je Moment.js.

Moment.js je lagana biblioteka s jednostavnim načinom za manipuliranje i formatiranje datuma i vremena u JavaScriptu.

Instaliranje biblioteke Moment.js

Moment.js knjižnica je a paket za upravljanje operacijama datuma i vremena u JavaScriptu. Instaliranje biblioteke Moment.js prvi je korak u korištenju Moment.js u vašoj React aplikaciji. To možete učiniti pokretanjem sljedeće naredbe na vašem terminalu:

trenutak instalacije npm-a

Kada instalacija završi, možete koristiti Moment.js u svojoj React komponenti.

Korištenje Moment.js za prikaz datuma i vremena

Možete koristiti Moment.js za prikaz datuma i vremena u određenom formatu unutar vaše aplikacije React. Da biste koristili biblioteku, uvezite trenutak iz instaliranog paketa.

uvoz Reagirati iz'reagirati';
uvoz trenutak iz'trenutak';
funkcijaaplikacija() {
konst datum = trenutak().format("MMMM DD GGGG");
konst vrijeme = trenutak().format("HH mm ss");
povratak (



 Danasdatum je { datum } 

 Vrijeme je {vrijeme} </p>
 </div>
 )
}
izvozzadano aplikacija

The trenutak() metoda stvara novi objekt trenutka koji predstavlja određenu točku u vremenu. The format() metoda formatira trenutni objekt u prikaz niza.

The format() metoda uzima argument niza koji navodi željeni format za trenutni objekt. Argument niza može uključivati ​​kombinaciju slova i posebnih znakova, od kojih svaki ima specifično značenje.

Neki od ovih posebnih znakova su:

• GGGG: Godina s četiri znamenke
• YY: Godina s dvije znamenke
• MM: Mjesec s dvije znamenke
• M: Mjesec s jednom ili dvije znamenke
• MMMM: Mjesec u slov
• dd: Dan u mjesecu s dvije znamenke
• D: Dan u mjesecu s jednom ili dvije znamenke
• Čini: Dan u mjesecu s rednim brojem
• HH: Sat s dvije znamenke
• H: Sat s jednom ili dvije znamenke
• mm: Minuta s dvije znamenke
• m: Minuta s jednom ili dvije znamenke
• ss: sekunda s dvije znamenke
• s: sekunda s jednom ili dvije znamenke

Kada aplikacija komponenta u prethodnom bloku koda prikazana, trenutni datum i vrijeme prikazani su u navedenom formatu na zaslonu.

The trenutak() metoda može uzeti argument niza datuma ili vremena. Kada trenutak() metoda ima argument datuma ili vremena niza, ona stvara objekt trenutka koji predstavlja taj datum ili vrijeme. Niz može biti u različitim formatima, kao što su ISO 8601, RFC 2822 ili Unix vremenska oznaka.

Na primjer:

konst datum = trenutak('1998-06-23').format("MMMM DD GGGG");

Korištenje Moment.js za manipuliranje datumom i vremenom

Biblioteka Moment.js također nudi nekoliko metoda za manipuliranje datumima i vremenima. Ove vam metode omogućuju dodavanje ili oduzimanje vremenskih intervala, postavljanje specifičnih vrijednosti za komponente datuma i vremena i izvođenje drugih primjenjivih operacija.

Na primjer:

uvoz Reagirati iz'reagirati';
uvoz trenutak iz'trenutak';
funkcijaaplikacija() {
konst sutra = trenutak().add(1, 'dan').format("Do MMMM, GGGG");
konst vrijeme = trenutak().oduzmi(1, 'sat').format("HH: mm: ss");
konst lastYear = moment().set('godina', 2022).set('mjesec', 1).format("Do MMMM, GGGG");
konst sat = trenutak().get('sat');
povratak (

"Aplikacija">
Sutradatum je {sutra}

Ovo je bilo vrijeme: { time }, prije sat vremena</p>

{ prošla godina }</p>

{ sat </p>
 </div>
 )
}
izvozzadano aplikacija

U ovom primjeru, vi deklarirajte sljedeće JavaScript varijable: sutra, vrijeme, prošle godine, i sat. Ove četiri varijable koriste različite metode biblioteke Moment.js za manipuliranje datumom i vremenom.

The sutra varijabla koristi dodati() metoda za dodavanje jednog dana trenutnom datumu. The dodati() metoda dodaje vrijeme zadanom objektu Moment. Funkcija uzima dva argumenta: vrijednost trajanja i niz koji predstavlja jedinicu vremena za dodavanje. Jedinica bi mogla biti godine, mjeseca, tjedni, dana, sati, minuta, i sekundi.

Također možete oduzeti vrijeme pomoću oduzeti() metoda. U ovom slučaju, vrijeme varijabla koristi oduzeti() metoda za oduzimanje jednog sata od trenutnog vremena.

Koristiti postaviti () metoda, prošle godine varijabla postavlja godinu na 2022., a mjesec na veljaču (jer je siječanj predstavljen kao mjesec 0). The postaviti () metoda dodjeljuje određenu jedinicu vremena objektu Moment.

s dobiti() možete dohvatiti određeno vrijeme. The dobiti() metoda uzima jedan argument, jedinicu vremena.

Korištenje Moment.js za analizu datuma i vremena

Još jedna korisna značajka Moment.js je njegova sposobnost analiziranja datuma i vremena iz nizova. Ovo može biti korisno kada radite s podacima iz vanjskih izvora.

Da biste raščlanili datum ili vrijeme iz niza, morate koristiti trenutak() metoda. U ovom slučaju, trenutak() metoda uzima dva argumenta, niz datuma i niz formata.

Evo primjera kako možete koristiti trenutak() metoda za analizu datuma i vremena:

uvoz Reagirati iz'reagirati';
uvoz trenutak iz'trenutak';
funkcijaaplikacija() {
konst datum = trenutak('2920130000', 'Do-MMMM-GGGG').doDatuma();
konzola.log(datum);
povratak (

</div>
 )
}
izvozzadano aplikacija

U gornjem bloku koda, trenutak() metoda će analizirati ovaj niz '2920130000' pomoću niza formata "Do-MMMM-GGGG". The doDatum() metoda pretvara trenutni objekt u izvorni JavaScript objekt Datum.

The doDatum() metoda ne uzima argumente i vraća JavaScript objekt Datum koji predstavlja isti datum i vrijeme kao i objekt trenutka.

Prikaz relativnog vremena

S bibliotekom Moment.js možete oblikovati i prikazati relativno vrijeme. Da biste to učinili, koristite od sada() i sada() metode. Ove metode prikazuju vrijeme između određenog datuma i trenutnog vremena.

Na primjer:

uvoz Reagirati iz'reagirati';
uvoz trenutak iz'trenutak';
funkcijaaplikacija() {
konst jučer = trenutak().oduzmi(7, 'dan');
konst vrijeme1 = jučer.odsada(); // prije 7 dana
konst vrijeme2 = yesterday.toNow(); // za 7 dana
povratak (



{vrijeme1 }</p>

{vrijeme2 }</p>
 </div>
 )
}
izvozzadano aplikacija

U ovom primjeru, od sada() metoda vraća relativno vrijeme proteklo od navedenog datuma, dok sada() metoda vraća relativno vrijeme do trenutnog vremena.

Više za Moment.js

Moment.js je moćna biblioteka koja pruža jednostavan način za manipulaciju i formatiranje datuma i vremena u JavaScriptu. Naučili ste kako manipulirati, prikazati i analizirati datume i vremena u Reactu koristeći Moment.js.

Moment.js nudi nekoliko drugih metoda, kao što su local, startOf, endOf i tako dalje. Međutim, s pruženim informacijama, više ste nego spremni početi koristiti Moment.js u svojoj React aplikaciji.