Biblioteka Day.js olakšava rukovanje operacijama datuma i vremena u React aplikacijama.

Upravljanje datumom i vremenom ključno je za svaku aplikaciju, a React nije iznimka. Dok JavaScript nudi ugrađene funkcije za manipulaciju datumom i vremenom, one mogu biti glomazne. Srećom, mnoge biblioteke trećih strana mogu pojednostaviti upravljanje datumom i vremenom u Reactu. Jedna takva biblioteka je Day.js.

Day.js je lagana biblioteka za raščlanjivanje, provjeru valjanosti, manipuliranje i oblikovanje datuma i vremena u JavaScriptu.

Instalacija Day.js

The Dan.js knjižnica je moderna alternativa Moment.js, što je još jedna biblioteka koja se koristi za rukovanje datumima i vremenima. Day.js nudi sličan API s manjim otiskom i bržom izvedbom.

Da biste koristili Day.js u svojoj React aplikaciji, prvo ga trebate instalirati. To možete učiniti pokretanjem sljedeće naredbe na vašem terminalu:

npm instalirajte dayjs

Raščlanjivanje i oblikovanje datuma i vremena

Day.js pruža jednostavan API za raščlanjivanje i oblikovanje datuma. Možete dobiti datum i vrijeme pomoću

instagram viewer
dayjs() metodu, ali prvo ga trebate uvesti iz biblioteke Day.js.

Na primjer:

uvoz Reagirati iz'reagirati';
uvoz dayjs iz'dayjs';
funkcijaaplikacija() {


konst datum = dayjs();
konzola.log (datum); 


povratak (




Datum i upravljanje vremenom</p>
 </div>
 )
}


izvozzadano aplikacija

The dayjs() metoda stvara novi objekt Day.js koji predstavlja određeni datum i vrijeme. U gornjem primjeru, dayjs() metoda stvara Day.js objekt koji predstavlja trenutni datum i vrijeme.

Na vašoj konzoli objekt Day.js izgledao bi ovako:

The dayjs() metoda prihvaća izborni argument datuma koji može biti niz, broj (Unix vremenska oznaka), objekt JavaScript Datum, ili neki drugi objekt Day.js. Metoda će generirati objekt Day.js koji predstavlja navedeni argument datuma.

Na primjer:

uvoz Reagirati iz'reagirati';
uvoz dayjs iz'dayjs';
funkcijaaplikacija() {


konst datum = dayjs('2023-05-01');
konzola.log (datum); // Day.js objekt koji predstavlja navedeni datum


konst unixDate = dayjs(1651382400000);
konzola.log (unixDate); // Day.js objekt koji predstavlja navedeni datum


povratak (




Datum i upravljanje vremenom</p>
 </div>
 )
}


izvozzadano aplikacija

Izlaz Day.js objekta ovog bloka koda bit će sličan prethodnom bloku koda, ali će imati različite vrijednosti svojstava.

Za prikaz datuma generiranih kao Day.js objekata, morate koristiti format() metoda. The format() metoda biblioteke Day.js omogućuje formatiranje objekta Day.js kao niza prema određenom nizu formata.

Metoda uzima niz formata kao argument. Argument niza može uključivati ​​kombinaciju slova i posebnih znakova, svaki s određenim značenjem,

Na primjer:

uvoz Reagirati iz'reagirati';
uvoz dayjs iz'dayjs';
funkcijaaplikacija() {


konst datum = dayjs('2023-05-01').format('dddd, MMMM D, GGGG'); // ponedjeljak, 1. svibnja 2023
konst vrijeme = dayjs().format('HH: mm: ss'); //09:50:23
konst unixDate = dayjs(1651382400000).format('MM/DD/GG'); // 05/01/22


povratak (




{datum}</p>


{unixDatum}</p>


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


izvozzadano aplikacija

The datum varijabla će prikazati datum u ovom formatu 'Srijeda, 26. travnja 2023.'. Niz formata je 'dddd, MMMM D, GGGG' gdje dddd je dan u tjednu, MMMM je mjesec u riječima, D je dan u mjesecu s jednom ili dvije znamenke, i GGGG je godina u četiri znamenke.

The unixDate varijabla je oblikovana kao niz pomoću format stringa 'MM/DD/GGGG,' koji predstavlja mjesec s dvije znamenke, dan u mjesecu s dvije znamenke i godinu s četiri znamenke.

The vrijeme varijabla prikazuje trenutno vrijeme u navedenom formatu. Niz formata je 'HH: mm: ss' gdje je HH predstavlja sate, mm predstavlja minute, a ss predstavlja sekunde.

Manipuliranje datumima i vremenima

Day.js pruža više metoda koje olakšavaju manipuliranje datumima i vremenima. Možete se obratiti na Dan.js službenu dokumentaciju kako biste dobili potpuni popis dostupnih metoda za manipuliranje datumima i vremenima.

Na primjer:

uvoz Reagirati iz'reagirati';
uvoz dayjs iz'dayjs';
funkcijaaplikacija() {


konst datum = dayjs().add(7,'dani').format('dddd, MMMM D, GGGG'); // Srijeda, 16. lipnja 2023 
konst vrijeme = dayjs().subtract(2, 'sati').format('HH: mm: ss'); // 07:53:00


povratak (




{datum}</p>


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


izvozzadano aplikacija

Gornji blok koda koristi dodati() metoda za dodavanje 7 dana trenutnom datumu. The dodati() omogućuje vam dodavanje određene količine vremena objektu Day.js. Metoda uzima dva argumenta, količinu vremena za zbrajanje u brojevima i jedinicu vremena za zbrajanje.

s oduzeti() možete oduzeti određenu količinu vremena od Dan.js objekt. The vrijeme varijabla oduzima 2 sata od trenutnog vremena pomoću oduzeti() metoda.

Prikaz relativnog vremena

Day.js pruža nekoliko metoda uključujući od sada(), sada(), do(), i iz() za prikaz relativnog vremena, kao što je "prije 2 sata" ili "za 3 dana". Da biste koristili ove metode, uvezite relativnovrijeme dodatak iz dayjs/plugin/relativeTime u vašoj React aplikaciji.

Na primjer:

uvoz Reagirati iz'reagirati';
uvoz dayjs iz'dayjs';
uvoz relativnovrijeme iz'dayjs/plugin/relativeTime';
funkcijaaplikacija() {


 dayjs.extend (relativeTime);

konst datum = dayjs().add(7, 'dani')
konst relativniDatum = datum.fromNow(); // za 7 dana


konst datum2 = danjs().oduzmi(2, 'sati');
konst relativniDatum2 = datum2.doSada(); // za 2 sata


konst lastYear = dayjs().subtract(1, 'godina');
konst diff = date.from (lastYear); // u godini
konst diff2 = datum.do (lastYear) // prije godinu dana


povratak (




{relativniDatum }</p>


{relativniDatum2 }</p>


{ diff }</p>


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


izvozzadano aplikacija

The od sada() funkcija prikazuje niz relativnog vremena koji predstavlja razliku između trenutnog vremena i određenog datuma. U ovom primjeru, od sada() prikazuje razliku između datum i trenutno vrijeme.

The sada() funkcija je slična od sada() funkcija utoliko što prikazuje niz koji predstavlja razliku između određenog datuma i trenutnog vremena. Kada nazovete sada() funkcija vraća relativni niz vremena na trenutno vrijeme.

Na kraju, korištenjem iz() i do() funkcije, možete prikazati niz relativnog vremena koji predstavlja razliku između dva navedena datuma. U ovom primjeru dobivate razliku između prošle godine i datum koristiti iz() i do() funkcije.

Napomena, također možete proslijediti izborni boolean argument u od sada(), sada(), iz(), i do() metode za određivanje treba li uključiti ili isključiti sufiks (npr. "prije" ili "u").

Na primjer:

konst datum = dayjs().add(7, 'dani')
konst relativeDate = date.fromNow(pravi); // 7 dana
konst datum2 = danjs().oduzmi(2, 'sati');
konst relativniDatum2 = datum2.doSada(pravi); // 2 sata
konst lastYear = dayjs().subtract(1, 'godina');
konst diff = date.from (lastYear, pravi) // godina
konst diff2 = date.to (lastYear, pravi) // godina

Pretjecanje lažno argumentu će prikazati datume sa sufiksom.

Učinkovito upravljanje datumom i vremenom

Upravljanje datumom i vremenom ključni je aspekt svake aplikacije, a Day.js pruža jednostavnu i fleksibilnu biblioteku za rukovanje tim operacijama u React aplikaciji. Uključivanjem Day.js u svoj projekt, možete jednostavno oblikovati datume i vremena, analizirati nizove i manipulirati trajanjima.

Dodatno, Day.js nudi niz dodataka za proširenje njegove funkcionalnosti i čine ga još moćnijim. Bilo da gradite jednostavan kalendar ili složeni sustav za planiranje, Day.js je odličan izbor za upravljanje datumom i vremenom u vašoj React aplikaciji.