Moment.js je fantastična knjižnica za učinkovito upravljanje datuma in časa v aplikacijah React.

Upravljanje datumov in časa v Reactu lahko predstavlja izziv za tiste, ki tega področja ne poznajo. Na srečo obstaja več knjižnic, ki vam lahko pomagajo pri upravljanju datuma in časa v Reactu. Ena od teh knjižnic je Moment.js.

Moment.js je lahka knjižnica s preprostim načinom za manipulacijo in oblikovanje datumov in ur v JavaScriptu.

Namestitev knjižnice Moment.js

Moment.js knjižnica je a paket za upravljanje datumskih in časovnih operacij v JavaScriptu. Namestitev knjižnice Moment.js je prvi korak pri uporabi Moment.js v vaši aplikaciji React. To lahko storite tako, da v terminalu zaženete naslednji ukaz:

trenutek namestitve npm

Ko je namestitev končana, lahko uporabite Moment.js v komponenti React.

Uporaba Moment.js za prikaz datuma in ure

Moment.js lahko uporabite za prikaz datumov in ur v določeni obliki v aplikaciji React. Za uporabo knjižnice uvozite trenutek iz nameščenega paketa.

uvoz Reagiraj 
od'reagirati';
uvoz trenutek od'trenutek';
funkcijoaplikacija() {


konst datum = moment().format("MMMM DD LLLL");
konst čas = trenutek().format("HH mm ss");


vrnitev (




 Danesdatum osebe je { datum } 


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


izvozprivzeto aplikacija

The trenutek() metoda ustvari nov objekt trenutka, ki predstavlja določeno točko v času. The format() metoda oblikuje trenutni objekt v predstavitev niza.

The format() metoda sprejme argument niza, ki določa želeno obliko za trenutni objekt. Argument niza lahko vključuje kombinacijo črk in posebnih znakov, od katerih ima vsak poseben pomen.

Nekateri od teh posebnih znakov so:

  • LLLL: Štirimestno leto
  • YY: Dvomestno leto
  • MM: Mesec z dvema števkama
  • M: Mesec z eno ali dvema števkama
  • MMMM: Mesec v slov
  • DD: dan v mesecu z dvema števkama
  • D: dan v mesecu z eno ali dvema števkama
  • naredi: dan v mesecu z ordinalom
  • HH: Ura z dvema števkama
  • H: Ura z eno ali dvema števkama
  • mm: Minuta z dvema števkama
  • m: Minuta z eno ali dvema števkama
  • ss: Drugo z dvema števkama
  • s: sekunda z eno ali dvema števkama

Ko aplikacija komponenta v prejšnjem bloku kode je upodobljena, sta trenutni datum in ura prikazana v podani obliki na zaslonu.

The trenutek() metoda lahko sprejme argument datuma ali časa niza. Ko trenutek() ima argument niz datuma ali časa, ustvari objekt trenutka, ki predstavlja ta datum ali čas. Niz je lahko v različnih formatih, kot je ISO 8601, RFC 2822 ali časovni žig Unix.

Na primer:

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

Uporaba Moment.js za manipulacijo datuma in ure

Knjižnica Moment.js ponuja tudi več metod za manipulacijo datumov in ur. Te metode vam omogočajo dodajanje ali odštevanje časovnih intervalov, nastavitev posebnih vrednosti za komponente datuma in časa ter izvajanje drugih ustreznih operacij.

Na primer:

uvoz Reagiraj od'reagirati';
uvoz trenutek od'trenutek';
funkcijoaplikacija() {


konst jutri = trenutek().add(1, 'dan').format("Naredi MMMM, LLLL");
konst čas = trenutek().odštej(1, 'ura').format("HH: mm: ss");
konst lastYear = moment().set('leto', 2022).set('mesec', 1).format("Naredi MMMM, LLLL");
konst ura = trenutek().get('ura');


vrnitev (


"Aplikacija">
jutridatum je {jutri}


To je bil čas: {time}, pred eno uro</p>


{ zadnje leto }</p>


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


izvozprivzeto aplikacija

V tem primeru ste vi deklarirajte naslednje spremenljivke JavaScript: jutri, čas, lansko leto, in uro. Te štiri spremenljivke uporabljajo različne metode knjižnice Moment.js za manipulacijo datuma in ure.

The jutri spremenljivka uporablja dodaj() način za dodajanje enega dneva trenutnemu datumu. The dodaj() metoda doda čas danemu objektu Trenutek. Funkcija sprejme dva argumenta: vrednost trajanja in niz, ki predstavlja enoto časa za dodajanje. Enota bi lahko bila leta, mesecih, tedne, dnevi, ure, minut, in sekund.

Čas lahko odštejete tudi z odštej() metoda. V tem primeru je čas spremenljivka uporablja odštej() način za odštevanje ene ure od trenutnega časa.

Uporabljati set() metoda, lansko leto spremenljivka nastavi leto na 2022 in mesec na februar (ker je januar predstavljen kot mesec 0). The set() metoda dodeli določeno časovno enoto objektu Trenutek.

z dobiti () način, lahko pridobite določen čas. The dobiti () metoda sprejme en argument, enoto časa.

Uporaba Moment.js za razčlenitev datuma in časa

Druga koristna funkcija Moment.js je njegova zmožnost razčlenjevanja datumov in ur iz nizov. To je lahko koristno pri delu s podatki iz zunanjih virov.

Če želite razčleniti datum ali čas iz niza, morate uporabiti trenutek() metoda. V tem primeru je trenutek() metoda sprejme dva argumenta, datumski niz in formatni niz.

Tukaj je primer, kako lahko uporabite trenutek() metoda za razčlenitev datumov in ur:

uvoz Reagiraj od'reagirati';
uvoz trenutek od'trenutek';
funkcijoaplikacija() {


konst datum = trenutek('2920130000', 'Do-MMMM-LLLL').doDate();
konzola.log(datum);


vrnitev (


</div>
 )
}
izvozprivzeto aplikacija

V zgornjem kodnem bloku trenutek() metoda bo razčlenila ta niz '2920130000' z uporabo niza oblike "Do-MMMM-LLLL". The toDate() metoda pretvori trenutni objekt v izvorni predmet JavaScript Datum.

The toDate() metoda ne sprejema argumentov in vrne objekt JavaScript Date, ki predstavlja isti datum in čas kot objekt trenutka.

Prikaz relativnega časa

S knjižnico Moment.js lahko formatirate in prikažete relativni čas. Če želite to narediti, uporabite od sedaj() in toNow() metode. Te metode prikažejo čas med danim datumom in trenutnim časom.

Na primer:

uvoz Reagiraj od'reagirati';
uvoz trenutek od'trenutek';
funkcijoaplikacija() {


konst včeraj = trenutek().odštej(7, 'dan');
konst čas1 = včeraj.fromNow(); // pred 7 dnevi
konst time2 = yesterday.toNow(); // v 7 dneh


vrnitev (




{čas1 }</p>


{čas2 }</p>
 </div>
 )
}


izvozprivzeto aplikacija

V tem primeru je od sedaj() metoda vrne relativni čas, ki je pretekel od navedenega datuma, medtem ko toNow() metoda vrne relativni čas do trenutnega časa.

Več o Moment.js

Moment.js je zmogljiva knjižnica, ki omogoča preprost način za manipulacijo in oblikovanje datumov in ur v JavaScriptu. Naučili ste se manipulirati, prikazati in razčleniti datume in ure v Reactu z uporabo Moment.js.

Moment.js ponuja številne druge metode, kot so lokalne, startOf, endOf in tako naprej. Vendar pa ste s posredovanimi informacijami več kot pripravljeni, da začnete uporabljati Moment.js v svoji aplikaciji React.