Moment.js este o bibliotecă fantastică pentru gestionarea eficientă a datei și a orei în aplicațiile React.

Gestionarea datelor și a orei în React poate reprezenta o provocare pentru cei cărora le lipsește familiaritatea în zonă. Din fericire, există mai multe biblioteci care vă pot ajuta cu gestionarea datei și a orei în React. Una dintre aceste biblioteci este Moment.js.

Moment.js este o bibliotecă ușoară, cu o modalitate simplă de a manipula și formata datele și orele în JavaScript.

Instalarea bibliotecii Moment.js

Moment.js biblioteca este o pachet pentru gestionarea operațiunilor de dată și oră în JavaScript. Instalarea bibliotecii Moment.js este primul pas în utilizarea Moment.js în aplicația React. Puteți face acest lucru rulând următoarea comandă în terminalul dvs.:

momentul instalării npm

Odată ce instalarea este finalizată, puteți utiliza Moment.js în componenta React.

Folosind Moment.js pentru a afișa data și ora

Puteți folosi Moment.js pentru a afișa datele și orele într-un anumit format în aplicația React. Pentru a utiliza biblioteca, importați moment din pachetul instalat.

import Reacţiona din'reacţiona';
import moment din'moment';
funcţieApp() {


const data = moment().format(„LLMM ZZ AAAA”);
const timp = moment().format(„HH mm ss”);


întoarcere (




 Astăzidata lui este { data } 


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


exportMod implicit App

The moment() metoda creează un nou obiect de moment care reprezintă un anumit moment în timp. The format() metoda formatează un obiect moment într-o reprezentare șir.

The format() metoda preia un argument șir care specifică formatul dorit pentru obiectul moment. Argumentul șir poate include o combinație de litere și caractere speciale, fiecare cu o semnificație specifică.

Unele dintre aceste personaje speciale sunt:

  • YYYY: An cu patru cifre
  • YY: An cu două cifre
  • MM: Lună cu două cifre
  • M: Lună cu una sau două cifre
  • MMMM: Luna în cuvinte
  • DD: Ziua lunii cu două cifre
  • D: Ziua lunii cu una sau două cifre
  • Do: Ziua lunii cu ordinalul
  • HH: Ora cu două cifre
  • H: Ora cu una sau două cifre
  • mm: Minut cu două cifre
  • m: Minut cu una sau două cifre
  • ss: Al doilea cu două cifre
  • s: Al doilea cu una sau două cifre

Cand App componenta din blocul de cod anterior este redată, data și ora curente sunt afișate pe ecran în formatul specificat.

The moment() metoda poate lua un șir de date sau un argument de oră. Cand moment() metoda are un șir de argument data sau oră, creează un obiect moment reprezentând data sau ora respectivă. Șirul poate fi în diferite formate, cum ar fi ISO 8601, RFC 2822 sau timestamp Unix.

De exemplu:

const data = moment('1998-06-23').format(„LLMM ZZ AAAA”);

Folosind Moment.js pentru a manipula data și ora

Biblioteca Moment.js oferă, de asemenea, mai multe metode de manipulare a datelor și orelor. Aceste metode vă permit să adăugați sau să scădeți intervale de timp, să setați valori specifice pentru componentele de dată și oră și să efectuați alte operațiuni aplicabile.

De exemplu:

import Reacţiona din'reacţiona';
import moment din'moment';
funcţieApp() {


const maine = moment().add(1, 'zi').format(„Fă MMMM, AAAA”);
const timp = moment().scădere(1, 'ora').format(„HH: mm: ss”);
const lastYear = moment().set('an', 2022).a stabilit('lună', 1).format(„Fă MMMM, AAAA”);
const ora = moment().get('ora');


întoarcere (


„Aplicație”>
Mâinedata lui este { mâine }


Acesta a fost timpul: { time }, acum o oră</p>


{ Anul trecut }</p>


{ oră </p>
 </div>
 )
}


exportMod implicit App

În acest exemplu, tu declara următoarele variabile JavaScript: Mâine, timp, anul trecut, și ora. Aceste patru variabile folosesc diferite metode ale bibliotecii Moment.js pentru a manipula data și ora.

The Mâine variabila folosește adăuga() metoda de a adăuga o zi la data curentă. The adăuga() metoda adaugă timp unui obiect Moment dat. Funcția are două argumente: o valoare de durată și un șir care reprezintă unitatea de timp de adăugat. Unitatea ar putea fi ani, luni, săptămâni, zile, ore, minute, și secunde.

De asemenea, puteți scădea timpul folosind scădea() metodă. În acest caz, timp variabila folosește scădea() metoda de a scădea o oră din ora curentă.

Folosind a stabilit() metoda, cea anul trecut variabila setează anul 2022 și luna februarie (din moment ce ianuarie este reprezentată ca luna 0). The a stabilit() metoda atribuie o anumită unitate de timp unui obiect Moment.

Cu obține() metoda, puteți prelua o anumită oră. The obține() metoda ia un singur argument, o unitate de timp.

Folosind Moment.js pentru a analiza data și ora

O altă caracteristică utilă a Moment.js este capacitatea sa de a analiza datele și orele din șiruri. Acest lucru poate fi util atunci când lucrați cu date din surse externe.

Pentru a analiza o dată sau o oră dintr-un șir, trebuie să utilizați moment() metodă. În acest caz, moment() metoda primește două argumente, șirul de dată și un șir de format.

Iată un exemplu despre cum puteți utiliza moment() metoda de a analiza datele și orele:

import Reacţiona din'reacţiona';
import moment din'moment';
funcţieApp() {


const data = moment('2920130000', „Do-MMMM-AAAA”).până în prezent();
consolă.log( data );


întoarcere (


</div>
 )
}
exportMod implicit App

În blocul de cod de mai sus, moment() metoda va analiza acest șir „2920130000” folosind șirul de format „Do-MMMM-AAAA”. The până în prezent() metoda convertește obiectul moment în un obiect JavaScript nativ Date.

The până în prezent() metoda nu ia argumente și returnează un obiect JavaScript Date reprezentând aceeași dată și oră ca obiectul moment.

Afișarea timpului relativ

Cu biblioteca Moment.js, puteți formata și afișa ora relativă. Pentru a face acest lucru, utilizați de acum() și acum() metode. Aceste metode afișează timpul dintre o dată dată și ora curentă.

De exemplu:

import Reacţiona din'reacţiona';
import moment din'moment';
funcţieApp() {


const ieri = moment().scădere(7, 'zi');
const time1 = ieri.fromNow(); // Acum 7 zile
const ora2 = ieri.la Acum(); // în 7 zile


întoarcere (




{ time1 }</p>


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


exportMod implicit App

În acest exemplu, de acum() metoda returnează timpul relativ scurs de la data specificată, în timp ce acum() metoda returnează timpul relativ până la ora curentă.

Mai multe despre Moment.js

Moment.js este o bibliotecă puternică care oferă o modalitate simplă de a manipula și formata datele și orele în JavaScript. Ați învățat cum să manipulați, să afișați și să analizați datele și orele în React folosind Moment.js.

Moment.js oferă câteva alte metode, cum ar fi local, startOf, endOf și așa mai departe. Cu toate acestea, cu informațiile furnizate, sunteți mai mult decât pregătit să începeți să utilizați Moment.js în aplicația dvs. React.