A Moment.js egy fantasztikus könyvtár a React alkalmazásokon belüli dátum- és időkezelés hatékony kezelésére.

A dátumok és idők kezelése a Reactban kihívást jelenthet azok számára, akik nem ismerik a területet. Szerencsére több könyvtár is segíthet a dátum- és időkezelésben a Reactben. Az egyik ilyen könyvtár a Moment.js.

A Moment.js egy könnyű könyvtár, amely egyszerű módszerrel manipulálhatja és formázhatja a dátumokat és időpontokat JavaScriptben.

A Moment.js Library telepítése

Moment.js könyvtár a csomag a dátum és idő műveletek kezeléséhez JavaScriptben. A Moment.js könyvtár telepítése az első lépés a Moment.js React alkalmazásban való használatához. Ezt megteheti a következő parancs futtatásával a terminálon:

npm telepítési pillanat

A telepítés befejezése után használhatja a Moment.js-t a React összetevőben.

A Moment.js használata a dátum és az idő megjelenítéséhez

A Moment.js segítségével megjelenítheti a dátumokat és időpontokat meghatározott formátumban a React alkalmazáson belül. A könyvtár használatához importálja pillanat a telepített csomagból.

import Reagál tól től'reagál';
import pillanat tól től'pillanat';
funkcióApp() {


const dátum = pillanat().format("ÉÉÉÉ NN PP");
const idő = pillanat().format("HH mm ss");


Visszatérés (




 Madátuma: { dátum } 


 Az idő {idő} </p>
 </div>
 )
}


exportalapértelmezett App

A pillanat() módszer egy új pillanatobjektumot hoz létre, amely egy adott időpontot képvisel. A formátum() metódus egy pillanatobjektumot formáz karakterlánc-reprezentációvá.

A formátum() metódus egy string argumentumot vesz fel, amely megadja a pillanatnyi objektum kívánt formátumát. A karakterlánc argumentum tartalmazhat betűk és speciális karakterek kombinációját, amelyek mindegyike sajátos jelentéssel bír.

Néhány ilyen speciális karakter:

  • ÉÉÉÉ: Év négy számjeggyel
  • YY: Év két számjeggyel
  • MM: Hónap két számjeggyel
  • M: Hónap egy vagy két számjeggyel
  • MMMM: Hónap szavakban
  • DD: A hónap napja két számjeggyel
  • D: A hónap napja egy vagy két számjeggyel
  • Tedd: A hónap napja a sorszámmal
  • HH: Két számjegyű óra
  • H: Óra egy vagy két számjeggyel
  • mm: Két számjegyű perc
  • m: Egy vagy két számjegyű perc
  • ss: Második két számjeggyel
  • s: Második egy vagy két számjeggyel

Amikor az App Az előző kódblokkban lévő komponens leképezésre kerül, az aktuális dátum és idő a megadott formátumban jelenik meg a képernyőn.

A pillanat() metódus egy karakterlánc dátum vagy idő argumentumot vehet fel. Amikor az pillanat() A metódusnak van egy string date vagy time argumentuma, akkor létrehoz egy pillanatobjektumot, amely az adott dátumot vagy időt reprezentálja. A karakterlánc különböző formátumú lehet, például ISO 8601, RFC 2822 vagy Unix időbélyeg.

Például:

const dátum = pillanat ('1998-06-23').formátum("ÉÉÉÉ NN PP");

A Moment.js használata a dátum és az idő manipulálására

A Moment.js könyvtár számos módszert is kínál a dátumok és időpontok manipulálására. Ezek a módszerek lehetővé teszik az időintervallumok hozzáadását vagy kivonását, a dátum- és időösszetevők meghatározott értékeinek beállítását, valamint egyéb alkalmazható műveletek végrehajtását.

Például:

import Reagál tól től'reagál';
import pillanat tól től'pillanat';
funkcióApp() {


const holnap = pillanat().add(1, 'nap').formátum("Do MMMM, YYYY");
const idő = pillanat().kivonás(1, 'óra').formátum("ÓÓ: mm: ss");
const lastYear = pillanat().set('év', 2022).készlet('hónap', 1).formátum("Do MMMM, YYYY");
const óra = pillanat().get('óra');


Visszatérés (


"Alkalmazás">
Holnapdátuma { holnap }


Ez volt az idő: { idő }, egy órája</p>


{ tavaly }</p>


{ óra }</p>
 </div>
 )
}


exportalapértelmezett App

Ebben a példában Ön deklarálja a következő JavaScript-változókat: holnap, idő, tavaly, és óra. Ez a négy változó a Moment.js könyvtár különböző módszereit használja a dátum és az idő manipulálására.

A holnap változó a add() módszer egy nap hozzáadásához az aktuális dátumhoz. A add() metódus időt ad egy adott Moment objektumhoz. A függvény két argumentumot vesz fel: egy időtartam értéket és egy karakterláncot, amely a hozzáadandó időegységet jelenti. Az egység lehet évek, hónapok, hétig, napok, órák, percek, és másodpercig.

Az időt a gombbal is kivonhatja kivon() módszer. Ebben az esetben a idő változó a kivon() módszer egy óra levonásra az aktuális időből.

Használni a készlet() módszer, a tavaly változó az évet 2022-re, a hónapot pedig februárra állítja (mivel a januárt a 0. hónap jelenti). A készlet() metódus egy adott időegységet rendel egy Moment objektumhoz.

A... val kap() módszerrel lekérhet egy adott időpontot. A kap() A metódus egyetlen argumentumot, egy időegységet vesz igénybe.

A Moment.js használata a dátum és az idő elemzéséhez

A Moment.js másik hasznos funkciója a dátumok és időpontok karakterláncokból történő elemzése. Ez akkor lehet hasznos, ha külső forrásból származó adatokkal dolgozik.

Dátum vagy idő karakterláncból történő elemzéséhez használja a pillanat() módszer. Ebben az esetben a pillanat() A metódus két argumentumot vesz fel, a dátum karakterláncot és egy formátum karakterláncot.

Íme egy példa arra, hogyan használhatja a pillanat() módszer a dátumok és időpontok elemzésére:

import Reagál tól től'reagál';
import pillanat tól től'pillanat';
funkcióApp() {


const dátum = pillanat ('2920130000', „Do-MMMM-YYYY”).randizni();
konzol.log( date );


Visszatérés (


</div>
 )
}
exportalapértelmezett App

A fenti kódblokkban pillanat() metódus elemzi ezt a „2920130000” karakterláncot a „Do-MMMM-YYYY” formátumú karakterlánc használatával. A randizni() metódus átalakítja a pillanatnyi objektumot egy natív JavaScript dátum objektum.

A randizni() A metódus nem vesz fel argumentumokat, és egy JavaScript Date objektumot ad vissza, amely ugyanazt a dátumot és időt képviseli, mint a pillanatobjektum.

Relatív idő megjelenítése

A Moment.js könyvtárral formázhatja és megjelenítheti a relatív időt. Ehhez használja a mostantól() és mostanáig() mód. Ezek a módszerek egy adott dátum és az aktuális idő közötti időt jelenítik meg.

Például:

import Reagál tól től'reagál';
import pillanat tól től'pillanat';
funkcióApp() {


const tegnap = pillanat().kivon(7, 'nap');
const time1 = tegnap.mosttól(); // 7 napja
const time2 = tegnap.ToMost(); // 7 napon belül


Visszatérés (




{ time1 }</p>


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


exportalapértelmezett App

Ebben a példában a mostantól() metódus a megadott dátum óta eltelt relatív időt adja vissza, míg a mostanáig() metódus a relatív időt adja vissza az aktuális időpontig.

Tovább a Moment.js-hez

A Moment.js egy hatékony könyvtár, amely egyszerű módot biztosít a dátumok és időpontok manipulálására és formázására JavaScriptben. Megtanulta, hogyan kell módosítani, megjeleníteni és elemezni a dátumokat és időpontokat a React alkalmazásban a Moment.js használatával.

A Moment.js számos más módszert is kínál, például helyi, startOf, endOf és így tovább. A megadott információk birtokában azonban több mint készen áll a Moment.js használatának megkezdésére a React alkalmazásban.