Hogyan kezeljük a dátum- és időkezelést a React programban a Day.js használatával

A dátum- és időkezelés döntő fontosságú minden alkalmazásnál, és ez alól a React sem kivétel. Bár a JavaScript beépített dátum- és időkezelési funkciókat biztosít, ezek nehézkesek lehetnek. Szerencsére sok harmadik féltől származó könyvtár leegyszerűsítheti a dátum- és időkezelést a Reactban. Az egyik ilyen könyvtár a Day.js.

A Day.js egy könnyű könyvtár a dátumok és időpontok JavaScriptben történő elemzéséhez, ellenőrzéséhez, manipulálásához és formázásához.

A Day.js telepítése

A Day.js A könyvtár modern alternatívája Moment.js, amely egy másik könyvtár a dátumok és időpontok kezelésére. A Day.js hasonló API-t kínál kisebb helyigénnyel és gyorsabb teljesítménnyel.

A Day.js használatához a React alkalmazásban először telepítenie kell azt. Ezt megteheti a következő parancs futtatásával a terminálon:

npm install dayjs

Dátumok és időpontok elemzése és formázása

A Day.js biztosítja egy egyszerű API

a dátumok elemzéséhez és formázásához. A dátumot és az időt a dayjs() módszert, de először importálnia kell a Day.js könyvtárból.

Például:

import Reagál tól től'reagál';
import dayjs tól től"dayjs";
funkcióApp() {
const dátum = dayjs();
konzol.log (dátum); 
Visszatérés (



Dátum és Időgazdálkodás</p>
 </div>
 )
}
exportalapértelmezett App

A dayjs() metódus létrehoz egy új Day.js objektumot, amely egy adott dátumot és időt képvisel. A fenti példában a dayjs() metódus létrehoz egy Day.js objektumot, amely az aktuális dátumot és időt reprezentálja.

A konzolon a Day.js objektum így néz ki:

A dayjs() metódus elfogad egy opcionális dátum argumentumot, amely lehet egy karakterlánc, egy szám (Unix időbélyeg), egy JavaScript dátum objektum, vagy egy másik Day.js objektum. A metódus létrehoz egy Day.js objektumot, amely a megadott dátum argumentumot képviseli.

Például:

import Reagál tól től'reagál';
import dayjs tól től"dayjs";
funkcióApp() {
const dátum = dayjs('2023-05-01');
konzol.log (dátum); // A megadott dátumot képviselő Day.js objektum
const unixDate = dayjs(1651382400000);
konzol.log (unixDate); // A megadott dátumot képviselő Day.js objektum
Visszatérés (



Dátum és Időgazdálkodás</p>
 </div>
 )
}
exportalapértelmezett App

A Day.js objektum ennek a kódblokknak a kimenete hasonló lesz az előző kódblokkhoz, de eltérő tulajdonságértékekkel rendelkezik.

A Day.js objektumként generált dátumok megjelenítéséhez használja a formátum() módszer. A formátum() A Day.js könyvtár metódusa lehetővé teszi, hogy egy Day.js objektumot karakterláncként formázzon egy adott formátumú karakterlánc szerint.

A metódus egy formátum karakterláncot vesz argumentumként. A karakterlánc argumentum tartalmazhat betűk és speciális karakterek kombinációját, amelyek mindegyike sajátos jelentéssel bír,

Például:

import Reagál tól től'reagál';
import dayjs tól től"dayjs";
funkcióApp() {
const dátum = dayjs('2023-05-01').formátum("nnn, d. MMMM, ÉÉÉÉ"); // 2023. május 1., hétfő
const time = dayjs().format("ÓÓ: mm: ss"); //09:50:23
const unixDate = dayjs(1651382400000).formátum("HH/NN/ÉÉ"); // 05/01/22
Visszatérés (



{dátum}</p>

{unixDate}</p>

{time}</p>
 </div>
 )
}
exportalapértelmezett App

A dátum változó ebben a formátumban jeleníti meg a dátumot: „2023. április 26. szerda”. A formátum karakterlánc az „nnn, d. MMMM, ÉÉÉÉ” ahol dddd a hét napja, MMMM szavakban a hónap, D a hónap napja egy vagy két számjeggyel, és ÉÉÉÉ az évszám négy számjeggyel.

A unixDate változó karakterláncként van formázva a formázási karakterlánc használatával "HH/NN/ÉÉÉÉ", amely a hónapot két számjeggyel, a hónap napját két számjeggyel és az évet négy számjeggyel jelöli.

A idő változó megjeleníti a pontos időt a megadott formátumban. A formátum karakterlánc az "ÓÓ: mm: ss" hol a HH az órákat jelenti, a mm jelenti a jegyzőkönyvet, és a ss másodperceket jelöli.

A dátumok és időpontok manipulálása

A Day.js számos módszert kínál, amelyek megkönnyítik a dátumok és időpontok kezelését. Hivatkozhat a Day.js hivatalos dokumentációt, hogy megkapja a dátumok és időpontok manipulálására rendelkezésre álló módszerek teljes listáját.

Például:

import Reagál tól től'reagál';
import dayjs tól től"dayjs";
funkcióApp() {
const dátum = dayjs().add(7,'napok').formátum("nnn, d. MMMM, ÉÉÉÉ"); // 2023. június 16., szerda 
const time = dayjs().subtract(2, 'órák').formátum("ÓÓ: mm: ss"); // 07:53:00
Visszatérés (



{dátum}</p>

{time}</p>
 </div>
 )
}
exportalapértelmezett App

A fenti kódblokk a add() módszer 7 nap hozzáadására az aktuális dátumhoz. A add() metódus lehetővé teszi, hogy meghatározott mennyiségű időt adjon egy Day.js objektumhoz. A metódus két argumentumot igényel: a számok hozzáadásának időtartamát és az összeadás időegységét.

A... val kivon() módszerrel levonhat egy meghatározott időt a Day.js tárgy. A idő változó levon 2 órát az aktuális időből a kivon() módszer.

Relatív idő megjelenítése

A Day.js számos módszert kínál, beleértve mostantól(), mostanáig(), nak nek(), és tól től() a relatív idő megjelenítéséhez, például "2 órája" vagy "3 nap múlva". E módszerek használatához importálja a relatív idő plugin innen dayjs/plugin/relativeTime a React alkalmazásban.

Például:

import Reagál tól től'reagál';
import dayjs tól től"dayjs";
import relatív idő tól től'dayjs/plugin/relativeTime';
funkcióApp() {
 dayjs.extend (relativeTime);

const dátum = dayjs().add(7, 'napok')
const relatívDátum = date.fromNow(); // 7 napon belül
const dátum2 = dayjs().kivonás(2, 'órák');
const relatívDátum2 = date2.toNow(); // 2 óra múlva
const lastYear = dayjs().subtract(1, 'év');
const diff = date.from (lastYear); // egy évben
const diff2 = dátum.to (utolsó év) // egy évvel ezelőtt
Visszatérés (



{ relatívDátum }</p>

{ relatívDátum2 }</p>

{ diff }</p>

{ diff2 }</p>
 </div>
 )
}
exportalapértelmezett App

A mostantól() A függvény egy relatív idősort jelenít meg, amely az aktuális idő és a megadott dátum közötti különbséget jelenti. Ebben a példában a mostantól() közötti különbséget jeleníti meg dátum és az aktuális időt.

A mostanáig() funkciója hasonló a mostantól() függvényt úgy, hogy egy karakterláncot jelenít meg, amely a megadott dátum és az aktuális idő közötti különbséget jelzi. Amikor felhívja a mostanáig() függvény, akkor egy relatív idősort ad vissza az aktuális időhöz.

Végül a tól től() és nak nek() függvények segítségével megjeleníthet egy relatív idősort, amely két megadott dátum közötti különbséget jelzi. Ebben a példában megkapja a különbséget tavaly és dátum használni a tól től() és nak nek() funkciókat.

Megjegyzés: opcionális logikai argumentumot is átadhat a mostantól(), mostanáig(), tól től(), és nak nek() módszerek annak meghatározására, hogy az utótag szerepeljen-e vagy kizárható (pl. "ago" vagy "in").

Például:

const dátum = dayjs().add(7, 'napok')
const relatívDátum = date.fromNow(igaz); // 7 nap
const dátum2 = dayjs().kivonás(2, 'órák');
const relatívDátum2 = date2.toNow(igaz); // 2 óra
const lastYear = dayjs().subtract(1, 'év');
const diff = date.from (lastYear, igaz) // Egy év
const diff2 = date.to (lastYear, igaz) // Egy év

Elhaladó hamis Az argumentumhoz a dátumokat az utótaggal együtt jeleníti meg.

A dátum és az idő hatékony kezelése

A dátum és az idő kezelése minden alkalmazás kulcsfontosságú eleme, és a Day.js könnyen használható és rugalmas könyvtárat biztosít ezeknek a műveleteknek a React alkalmazásban történő kezelésére. A Day.js projektbe való beépítésével könnyedén formázhatja a dátumokat és az időpontokat, elemezheti a karakterláncokat, és módosíthatja az időtartamokat.

Ezenkívül a Day.js egy sor beépülő modult kínál a funkcionalitás bővítéséhez és még hatékonyabbá tételéhez. Akár egyszerű naptárt, akár összetett ütemezési rendszert készít, a Day.js kiváló választás a dátum és idő kezeléséhez a React alkalmazásban.