Moment.js ir fantastiska bibliotēka efektīvai datuma un laika pārvaldībai React lietojumprogrammās.

Datumu un laika pārvaldīšana pakalpojumā React var radīt izaicinājumu tiem, kam nav zināšanu par šo apgabalu. Par laimi, ir vairākas bibliotēkas, kas var jums palīdzēt ar datuma un laika pārvaldību programmā React. Viena no šīm bibliotēkām ir Moment.js.

Moment.js ir viegla bibliotēka ar vienkāršu veidu, kā manipulēt un formatēt datumus un laikus JavaScript.

Moment.js bibliotēkas instalēšana

Moment.js bibliotēka ir a pakotne datuma un laika operāciju pārvaldībai JavaScript. Moment.js bibliotēkas instalēšana ir pirmais solis Moment.js izmantošanā React lietojumprogrammā. To var izdarīt, terminālī izpildot šādu komandu:

npm instalēšanas brīdis

Kad instalēšana ir pabeigta, savā React komponentā varat izmantot Moment.js.

Moment.js izmantošana, lai parādītu datumu un laiku

Varat izmantot Moment.js, lai jūsu React lietotnē parādītu datumus un laikus noteiktā formātā. Lai izmantotu bibliotēku, importējiet brīdis no instalētās pakotnes.

instagram viewer 
imports Reaģēt no'reaģēt';
imports brīdis no'mirklis';
funkcijuApp() {


konst datums = moments().format("MMMM DD GGGG");
konst laiks = moments().format("HH mm ss");


atgriezties (




 Šodiendatums ir { date } 


 Laiks ir {laiks} </p>
 </div>
 )
}


eksportētnoklusējuma App

The brīdis () metode rada jaunu momenta objektu, kas attēlo noteiktu laika punktu. The formāts () metode formatē momenta objektu virknes attēlojumā.

The formāts () metode izmanto virknes argumentu, kas norāda vēlamo formātu momenta objektam. Virknes arguments var ietvert burtu un speciālo rakstzīmju kombināciju, katrai no kurām ir noteikta nozīme.

Dažas no šīm īpašajām rakstzīmēm ir:

  • GGGG: gads ar četriem cipariem
  • YY: gads ar diviem cipariem
  • MM: mēnesis ar diviem cipariem
  • M: mēnesis ar vienu vai diviem cipariem
  • MMMM: Mēnesis vārdos
  • DD: mēneša diena ar diviem cipariem
  • D: mēneša diena ar vienu vai diviem cipariem
  • Dariet: mēneša diena ar kārtas skaitli
  • HH: Stunda ar diviem cipariem
  • H: Stunda ar vienu vai diviem cipariem
  • mm: minūte ar diviem cipariem
  • m: minūte ar vienu vai diviem cipariem
  • ss: otrais ar diviem cipariem
  • s: otrais ar vienu vai diviem cipariem

Kad App komponents iepriekšējā koda blokā tiek renderēts, pašreizējais datums un laiks tiek parādīti ekrānā norādītajā formātā.

The brīdis () metode var izmantot virknes datuma vai laika argumentu. Kad brīdis () metodei ir virknes datuma vai laika arguments, tā izveido momenta objektu, kas attēlo šo datumu vai laiku. Virknei var būt dažādi formāti, piemēram, ISO 8601, RFC 2822 vai Unix laikspiedols.

Piemēram:

konst datums = brīdis ('1998-06-23'.format("MMMM DD GGGG");

Moment.js izmantošana, lai manipulētu ar datumu un laiku

Bibliotēka Moment.js nodrošina arī vairākas metodes, kā manipulēt ar datumiem un laikiem. Šīs metodes ļauj pievienot vai atņemt laika intervālus, iestatīt noteiktas datuma un laika komponentu vērtības un veikt citas piemērojamas darbības.

Piemēram:

imports Reaģēt no'reaģēt';
imports brīdis no'mirklis';
funkcijuApp() {


konst rīt = moments().add(1, 'diena'.format("Darīt MMMM, GGGG");
konst laiks = moments().atņemt(1, 'stunda'.format("HH: mm: ss");
konst pēdējais gads = moments().set('gads', 2022).set('mēnesis', 1.format("Darīt MMMM, GGGG");
konst stunda = moments().get('stunda');


atgriezties (


"Lietotne">
rītdatums ir { rīt }


Šis bija laiks: { laiks }, pirms stundas</p>


{ pagājušajā gadā }</p>


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


eksportētnoklusējuma App

Šajā piemērā jūs deklarēt šādus JavaScript mainīgos: rīt, laiks, pagājušais gads, un stunda. Šie četri mainīgie izmanto dažādas Moment.js bibliotēkas metodes, lai manipulētu ar datumu un laiku.

The rīt mainīgais izmanto pievienot () metode, lai pašreizējam datumam pievienotu vienu dienu. The pievienot () metode pievieno laiku dotajam Moment objektam. Funkcija izmanto divus argumentus: ilguma vērtību un virkni, kas apzīmē pievienojamo laika vienību. Vienība varētu būt gadiem, mēnešus, nedēļas, dienas, stundas, minūtes, un sekundes.

Varat arī atņemt laiku, izmantojot atņemt () metodi. Šajā gadījumā, laiks mainīgais izmanto atņemt () metode, lai no pašreizējā laika atņemtu vienu stundu.

Izmantojot set() metode, pagājušais gads mainīgais iestata gadu uz 2022. gadu un mēnesi uz februāri (jo janvāris tiek attēlots kā mēnesis 0). The set() metode Moment objektam piešķir noteiktu laika vienību.

Ar gūt() metodi, varat izgūt noteiktu laiku. The gūt() metode izmanto vienu argumentu, laika vienību.

Moment.js izmantošana datuma un laika parsēšanai

Vēl viena noderīga Moment.js funkcija ir tā iespēja parsēt datumus un laikus no virknēm. Tas var būt noderīgi, strādājot ar datiem no ārējiem avotiem.

Lai parsētu datumu vai laiku no virknes, jums ir jāizmanto brīdis () metodi. Šajā gadījumā, brīdis () metodei ir divi argumenti, datuma virkne un formāta virkne.

Šeit ir piemērs tam, kā varat izmantot brīdis () datumu un laiku parsēšanas metode:

imports Reaģēt no'reaģēt';
imports brīdis no'mirklis';
funkcijuApp() {


konst datums = brīdis ('2920130000', "Do-MMMM-GGGG").toDate();
konsole.log( datums );


atgriezties (


</div>
 )
}
eksportētnoklusējuma App

Iepriekš esošajā koda blokā brīdis () metode parsēs šo virkni “2920130000”, izmantojot formāta virkni “Do-MMMM-GGGG”. The līdz datumam () metode pārvērš momenta objektu par vietējais JavaScript datuma objekts.

The līdz datumam () metode neizmanto argumentus un atgriež JavaScript datuma objektu, kas attēlo to pašu datumu un laiku kā momenta objekts.

Tiek rādīts relatīvais laiks

Izmantojot Moment.js bibliotēku, varat formatēt un parādīt relatīvo laiku. Lai to izdarītu, izmantojiet no šī brīža() un tagad () metodes. Šīs metodes parāda laiku starp norādīto datumu un pašreizējo laiku.

Piemēram:

imports Reaģēt no'reaģēt';
imports brīdis no'mirklis';
funkcijuApp() {


konst vakar = moments().atņemt(7, 'diena');
konst laiks1 = vakar.no Tagad(); // Pirms 7 dienām
konst laiks2 = vakar.šobrīd(); // 7 dienu laikā


atgriezties (




{ laiks1 }</p>


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


eksportētnoklusējuma App

Šajā piemērā no šī brīža() metode atgriež relatīvo laiku, kas pagājis kopš norādītā datuma, savukārt tagad () metode atgriež relatīvo laiku līdz pašreizējam laikam.

Vairāk uz Moment.js

Moment.js ir jaudīga bibliotēka, kas nodrošina vienkāršu veidu, kā manipulēt un formatēt datumus un laikus JavaScript. Jūs esat iemācījies manipulēt, parādīt un parsēt datumus un laikus programmā React, izmantojot Moment.js.

Moment.js piedāvā vairākas citas metodes, piemēram, lokālo, startOf, endOf un tā tālāk. Tomēr, ņemot vērā sniegto informāciju, jūs esat vairāk nekā gatavs sākt lietot Moment.js savā React lietojumprogrammā.