Cum să gestionați gestionarea datei și a orei în React folosind Day.js

Gestionarea datei și orei este crucială pentru orice aplicație, iar React nu face excepție. În timp ce JavaScript oferă funcții de manipulare a datei și orei încorporate, acestea pot fi greoaie. Din fericire, multe biblioteci terțe pot simplifica gestionarea datei și a orei în React. O astfel de bibliotecă este Day.js.

Day.js este o bibliotecă ușoară pentru analizarea, validarea, manipularea și formatarea datelor și orelor în JavaScript.

Instalarea Day.js

The Day.js biblioteca este o alternativă modernă la Moment.js, care este o altă bibliotecă folosită pentru gestionarea datelor și orelor. Day.js oferă un API similar, cu o amprentă mai mică și performanță mai rapidă.

Pentru a utiliza Day.js în aplicația React, mai întâi trebuie să o instalați. Puteți face acest lucru rulând următoarea comandă în terminalul dvs.:

npm instalează dayjs

Analizarea și formatarea datelor și orelor

Day.js oferă un simplu API

pentru analizarea și formatarea datelor. Puteți obține data și ora folosind dayjs() metoda, dar mai întâi trebuie să o importați din biblioteca Day.js.

De exemplu:

import Reacţiona din'reacţiona';
import zilejs din'dayjs';
funcţieApp() {
const data = dayjs();
consolă.log (data); 
întoarcere (



Data și Managementul timpului</p>
 </div>
 )
}
exportMod implicit App

The dayjs() metoda creează un nou obiect Day.js reprezentând o anumită dată și oră. În exemplul de mai sus, dayjs() metoda creează un obiect Day.js reprezentând data și ora curente.

În consola dvs., obiectul Day.js ar arăta astfel:

The dayjs() metoda acceptă un argument de dată opțional care poate fi un șir, un număr (marca temporală Unix), un obiect JavaScript Date, sau un alt obiect Day.js. Metoda va genera un obiect Day.js reprezentând argumentul dată specificat.

De exemplu:

import Reacţiona din'reacţiona';
import zilejs din'dayjs';
funcţieApp() {
const data = dayjs('2023-05-01');
consolă.log (data); // obiect Day.js reprezentând data specificată
const unixDate = dayjs(1651382400000);
consolă.log (unixDate); // obiect Day.js reprezentând data specificată
întoarcere (



Data și Managementul timpului</p>
 </div>
 )
}
exportMod implicit App

Ieșirea obiectului Day.js a acestui bloc de cod va fi similară cu blocul de cod anterior, dar va avea valori de proprietate diferite.

Pentru a afișa datele generate ca obiecte Day.js, trebuie să utilizați format() metodă. The format() metoda bibliotecii Day.js vă permite să formatați un obiect Day.js ca șir conform unui șir de format specific.

Metoda ia un șir de format ca argument. Argumentul șir poate include o combinație de litere și caractere speciale, fiecare cu o semnificație specifică,

De exemplu:

import Reacţiona din'reacţiona';
import zilejs din'dayjs';
funcţieApp() {
const data = dayjs('2023-05-01').format(„zzzz, MMMM Z, AAAA”); // Luni, 1 mai 2023
const time = dayjs().format(„HH: mm: ss”); //09:50:23
const unixDate = dayjs(1651382400000).format(„LL/ZZ/AA”); // 05/01/22
întoarcere (



{data}</p>

{unixDate}</p>

{time}</p>
 </div>
 )
}
exportMod implicit App

The Data variabila va afișa data în acest format „miercuri, 26 aprilie 2023”. Șirul de format este „zzzz, MMMM Z, AAAA” Unde dddd este ziua saptamanii, MMMM este luna în cuvinte, D este ziua lunii cu una sau două cifre și YYYY este anul din patru cifre.

The unixDate variabila este formatată ca șir folosind șirul de format „LL/ZZ/AAAA”, care reprezintă luna în două cifre, ziua lunii în două cifre și anul în patru cifre.

The timp variabila afișează ora curentă în formatul specificat. Șirul de format este „HH: mm: ss” unde HH reprezintă orele, cea mm reprezintă procesul-verbal, iar ss reprezintă secundele.

Manipularea datelor și orelor

Day.js oferă mai multe metode care facilitează manipularea datelor și orelor. Vă puteți referi la Day.js documentație oficială pentru a obține lista completă a metodelor disponibile pentru manipularea datelor și orelor.

De exemplu:

import Reacţiona din'reacţiona';
import zilejs din'dayjs';
funcţieApp() {
const data = dayjs().add(7,„zile”).format(„zzzz, MMMM Z, AAAA”); // Miercuri, 16 iunie 2023 
const timp = dayjs().subtract(2, 'ore').format(„HH: mm: ss”); // 07:53:00
întoarcere (



{data}</p>

{time}</p>
 </div>
 )
}
exportMod implicit App

Blocul de cod de mai sus folosește adăuga() metoda de a adăuga 7 zile la data curentă. The adăuga() metoda vă permite să adăugați o anumită perioadă de timp la un obiect Day.js. Metoda are două argumente, cantitatea de timp pentru a adăuga numere și unitatea de timp pentru a adăuga.

Cu scădea() metoda, puteți scădea o anumită perioadă de timp din Day.js obiect. The timp variabila scade 2 ore din ora curenta folosind scădea() metodă.

Afișarea timpului relativ

Day.js oferă mai multe metode, inclusiv de acum(), acum(), la(), și din() pentru a afișa timpul relativ, cum ar fi „acum 2 ore” sau „în 3 zile”. Pentru a utiliza aceste metode, importați fișierul relativeTime plugin de la dayjs/plugin/relativeTime în aplicația dvs. React.

De exemplu:

import Reacţiona din'reacţiona';
import zilejs din'dayjs';
import relativeTime din„dayjs/plugin/relativeTime”;
funcţieApp() {
 dayjs.extend (relativeTime);

const data = dayjs().add(7, „zile”)
const relativeDate = data.fromNow(); // în 7 zile
const data2 = dayjs().subtract(2, 'ore');
const relativeDate2 = data2.toNow(); // in 2 ore
const lastYear = dayjs().subtract(1, 'an');
const diff = data.de la (lastYear); // intr-un an
const diff2 = data.to (lastYear) // acum un an
întoarcere (



{ relativeDate }</p>

{ relativeDate2 }</p>

{ dif }</p>

{ diff2 }</p>
 </div>
 )
}
exportMod implicit App

The de acum() funcția afișează un șir de timp relativ reprezentând diferența dintre ora curentă și o dată specificată. În acest exemplu, de acum() afișează diferența dintre Data și ora curentă.

The acum() funcția este similară cu cea a de acum() funcție prin aceea că afișează un șir care reprezintă diferența dintre o dată specificată și ora curentă. Când suni la acum() funcția, returnează un șir de timp relativ la ora curentă.

În cele din urmă, folosind din() și la() funcții, puteți afișa un șir de timp relativ reprezentând diferența dintre două date specificate. În acest exemplu, obțineți diferența dintre anul trecut și Data folosind din() și la() funcții.

Rețineți că puteți, de asemenea, să transmiteți un argument boolean opțional de acum(), acum(), din(), și la() metode pentru a specifica dacă să includă sau să excludă sufixul (de exemplu, „acum” sau „în”).

De exemplu:

const data = dayjs().add(7, „zile”)
const relativeDate = data.fromNow(Adevărat); // 7 zile
const data2 = dayjs().subtract(2, 'ore');
const relativeDate2 = data2.toNow(Adevărat); // 2 ore
const lastYear = dayjs().subtract(1, 'an');
const diff = data.from (lastYear, Adevărat) // un an
const diff2 = data.to (lastYear, Adevărat) // un an

Trecere fals la argument va afișa datele cu sufixul.

Gestionarea eficientă a datei și orei

Gestionarea datei și orei este un aspect crucial al oricărei aplicații, iar Day.js oferă o bibliotecă ușor de utilizat și flexibilă pentru gestionarea acestor operațiuni într-o aplicație React. Încorporând Day.js în proiectul dvs., puteți formata cu ușurință datele și orele, puteți analiza șiruri și puteți manipula duratele.

În plus, Day.js oferă o gamă de plugin-uri pentru a-și extinde funcționalitatea și a-l face și mai puternic. Indiferent dacă construiți un calendar simplu sau un sistem complex de programare, Day.js este o alegere excelentă pentru gestionarea datei și orei în aplicația dvs. React.