Knižnica Day.js uľahčuje spracovanie operácií s dátumom a časom v aplikáciách React.

Správa dátumu a času je kľúčová pre každú aplikáciu a React nie je výnimkou. Hoci JavaScript poskytuje vstavané funkcie na manipuláciu s dátumom a časom, môžu byť ťažkopádne. Našťastie mnohé knižnice tretích strán môžu zjednodušiť správu dátumu a času v Reacte. Jednou z takýchto knižníc je Day.js.

Day.js je jednoduchá knižnica na analýzu, overovanie, manipuláciu a formátovanie dátumov a časov v JavaScripte.

Inštalácia Day.js

The Day.js knižnica je modernou alternatívou k Moment.js, čo je ďalšia knižnica používaná na spracovanie dátumov a časov. Day.js ponúka podobné API s menšou stopou a rýchlejším výkonom.

Ak chcete používať Day.js vo svojej aplikácii React, musíte si ho najprv nainštalovať. Môžete to urobiť spustením nasledujúceho príkazu v termináli:

npm install dayjs

Analýza a formátovanie dátumov a časov

Day.js poskytuje jednoduché API na analýzu a formátovanie dátumov. Dátum a čas môžete získať pomocou dayjs() metódu, ale najprv ju musíte importovať z knižnice Day.js.

instagram viewer

Napríklad:

importovať Reagovať od'reagovať';
importovať dayjs od'dayjs';
funkciuApp() {


konšt dátum = dayjs();
konzoly.log (dátum); 


vrátiť (




Dátum a Time Management</p>
 </div>
 )
}


exportpredvolená App

The dayjs() vytvorí nový objekt Day.js predstavujúci konkrétny dátum a čas. Vo vyššie uvedenom príklade dayjs() metóda vytvorí objekt Day.js predstavujúci aktuálny dátum a čas.

Vo vašej konzole by objekt Day.js vyzeral takto:

The dayjs() metóda akceptuje voliteľný argument dátumu, ktorým môže byť reťazec, číslo (časová pečiatka Unix), objekt dátumu JavaScriptalebo iný objekt Day.js. Metóda vygeneruje objekt Day.js predstavujúci zadaný argument dátumu.

Napríklad:

importovať Reagovať od'reagovať';
importovať dayjs od'dayjs';
funkciuApp() {


konšt dátum = dayjs('2023-05-01');
konzoly.log (dátum); // Objekt Day.js predstavujúci zadaný dátum


konšt unixDate = dayjs(1651382400000);
konzoly.log (unixDate); // Objekt Day.js predstavujúci zadaný dátum


vrátiť (




Dátum a Time Management</p>
 </div>
 )
}


exportpredvolená App

Výstup objektu Day.js tohto bloku kódu bude podobný predchádzajúcemu bloku kódu, ale bude mať odlišné hodnoty vlastností.

Ak chcete zobraziť dátumy vygenerované ako objekty Day.js, musíte použiť formát() metóda. The formát() metóda knižnice Day.js umožňuje formátovať objekt Day.js ako reťazec podľa špecifického formátovacieho reťazca.

Metóda berie ako argument formátovací reťazec. Argument reťazca môže obsahovať kombináciu písmen a špeciálnych znakov, z ktorých každý má špecifický význam,

Napríklad:

importovať Reagovať od'reagovať';
importovať dayjs od'dayjs';
funkciuApp() {


konšt dátum = dayjs('2023-05-01').formát('dddd, MMMM D, YYYY'); // Pondelok 1. mája 2023
konšt čas = dayjs().format('HH: mm: ss'); //09:50:23
konšt unixDate = dayjs(1651382400000).formát(„MM/DD/RR“); // 05/01/22


vrátiť (




{dátum}</p>


{unixDate}</p>


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


exportpredvolená App

The dátum premenná zobrazí dátum v tomto formáte „streda 26. apríla 2023“. Formátovací reťazec je „dddd, MMMM D, YYYY“ kde dddd je deň v týždni, MMMM je mesiac slovami, D je deň v mesiaci jedným alebo dvoma číslicami a YYYY je rok v štyroch čísliciach.

The unixDate premenná je naformátovaná ako reťazec pomocou formátovacieho reťazca 'MM/DD/RRRR,' ktorý predstavuje mesiac dvoma číslicami, deň v mesiaci dvoma číslicami a rok štyrmi číslicami.

The čas premenná zobrazuje aktuálny čas v zadanom formáte. Formátovací reťazec je „HH: mm: ss“ kde HH predstavuje hodiny, mm predstavuje zápisnicu a ss predstavuje sekundy.

Manipulácia s dátumami a časmi

Day.js poskytuje viacero metód, ktoré uľahčujú manipuláciu s dátumami a časmi. Môžete sa odvolať na Day.js oficiálnu dokumentáciu, aby ste získali úplný zoznam dostupných metód na manipuláciu s dátumami a časmi.

Napríklad:

importovať Reagovať od'reagovať';
importovať dayjs od'dayjs';
funkciuApp() {


konšt dátum = dayjs().add(7,'dni').formát('dddd, MMMM D, YYYY'); // Streda 16. júna 2023 
konšt čas = dayjs().subtract(2, 'hodiny').formát('HH: mm: ss'); // 07:53:00


vrátiť (




{dátum}</p>


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


exportpredvolená App

Vyššie uvedený blok kódu používa pridať () spôsob pridania 7 dní k aktuálnemu dátumu. The pridať () metóda vám umožňuje pridať určený čas do objektu Day.js. Metóda vyžaduje dva argumenty, množstvo času na sčítanie čísel a jednotku času na sčítanie.

S odpočítať () môžete odpočítať určité množstvo času od Day.js objekt. The čas premenná odpočítava 2 hodiny od aktuálneho času pomocou odpočítať () metóda.

Zobrazenie relatívneho času

Day.js poskytuje niekoľko metód vrátane odteraz(), teraz (), do (), a od () na zobrazenie relatívneho času, napríklad „pred 2 hodinami“ alebo „o 3 dni“. Ak chcete použiť tieto metódy, importujte súbor relatívny čas plugin od dayjs/plugin/relativeTime vo vašej aplikácii React.

Napríklad:

importovať Reagovať od'reagovať';
importovať dayjs od'dayjs';
importovať relatívny čas od'dayjs/plugin/relativeTime';
funkciuApp() {


 dayjs.extend (relativeTime);

konšt dátum = dayjs().add(7, 'dni')
konšt relativníDátum = dátum.odteraz(); // za 7 dní


konšt date2 = dayjs().subtract(2, 'hodiny');
konšt relatívnyDátum2 = dátum2.toNow(); // za 2 hodiny


konšt lastYear = dayjs().subtract(1, 'rok');
konšt diff = dátum.od (minulýRok); // v roku
konšt diff2 = dátum.do (minulýRok) // pred rokom


vrátiť (




{ relatívny dátum }</p>


{ relativníDátum2 }</p>


{ rozdiel }</p>


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


exportpredvolená App

The odteraz() zobrazí relatívny časový reťazec predstavujúci rozdiel medzi aktuálnym časom a zadaným dátumom. V tomto príklade odteraz() zobrazuje rozdiel medzi dátum a aktuálny čas.

The teraz () funkcia je podobná ako odteraz() v tom, že zobrazuje reťazec predstavujúci rozdiel medzi zadaným dátumom a aktuálnym časom. Keď zavoláte na teraz () funkcia vráti relatívny časový reťazec k aktuálnemu času.

Nakoniec pomocou od () a do () funkcií, môžete zobraziť relatívny časový reťazec predstavujúci rozdiel medzi dvoma určenými dátumami. V tomto príklade získate rozdiel medzi minulý rok a dátum pomocou od () a do () funkcie.

Všimnite si, že môžete zadať aj voliteľný booleovský argument do odteraz(), teraz (), od (), a do () metódy na určenie, či sa má prípona zahrnúť alebo vylúčiť (napr. „pred“ alebo „v“).

Napríklad:

konšt dátum = dayjs().add(7, 'dni')
konšt relativníDátum = dátum.odteraz(pravda); // 7 dní
konšt date2 = dayjs().subtract(2, 'hodiny');
konšt relatívnyDátum2 = dátum2.toNow(pravda); // 2 hodiny
konšt lastYear = dayjs().subtract(1, 'rok');
konšt diff = dátum.od (minulý rok, pravda) // rok
konšt diff2 = date.to (minulý rok, pravda) // rok

Pasovanie falošný k argumentu sa zobrazia dátumy s príponou.

Efektívna správa dátumu a času

Správa dátumu a času je kľúčovým aspektom každej aplikácie a Day.js poskytuje ľahko použiteľnú a flexibilnú knižnicu na spracovanie týchto operácií v aplikácii React. Začlenením Day.js do svojho projektu môžete jednoducho formátovať dátumy a časy, analyzovať reťazce a manipulovať s trvaním.

Day.js navyše ponúka celý rad doplnkov, ktoré rozšíria jeho funkčnosť a urobia ho ešte výkonnejším. Či už vytvárate jednoduchý kalendár alebo zložitý systém plánovania, Day.js je vynikajúcou voľbou na správu dátumu a času vo vašej aplikácii React.