Ako zvládnuť správu dátumu a času v React pomocou Moment.js

Správa dátumov a času v Reacte môže predstavovať výzvu pre tých, ktorí túto oblasť nepoznajú. Našťastie existuje niekoľko knižníc, ktoré vám môžu pomôcť so správou dátumu a času v Reacte. Jednou z týchto knižníc je Moment.js.

Moment.js je ľahká knižnica s jednoduchým spôsobom manipulácie a formátovania dátumov a časov v JavaScripte.

Inštalácia knižnice Moment.js

Moment.js knižnica je a balík na správu operácií s dátumom a časom v JavaScripte. Inštalácia knižnice Moment.js je prvým krokom pri používaní Moment.js vo vašej aplikácii React. Môžete to urobiť spustením nasledujúceho príkazu v termináli:

moment inštalácie npm

Po dokončení inštalácie môžete použiť Moment.js v komponente React.

Použitie Moment.js na zobrazenie dátumu a času

Moment.js môžete použiť na zobrazenie dátumov a časov v špecifickom formáte v rámci vašej aplikácie React. Ak chcete použiť knižnicu, importujte moment z nainštalovaného balíka.

importovať Reagovať od'reagovať';
importovať moment od'moment';
funkciuApp() {
konšt dátum = moment().formát("MMMM DD YYYY");
konšt čas = moment().formát("HH mm ss");
vrátiť (



 Dnesdátum používateľa je { dátum } 

 Čas je { čas } </p>
 </div>
 )
}
exportpredvolená App

The moment() metóda vytvára nový momentový objekt, ktorý predstavuje konkrétny bod v čase. The formát() metóda formátuje objekt momentu do reťazcovej reprezentácie.

The formát() metóda berie reťazcový argument špecifikujúci požadovaný formát pre objekt moment. Argument reťazca môže obsahovať kombináciu písmen a špeciálnych znakov, pričom každý má špecifický význam.

Niektoré z týchto špeciálnych znakov sú:

• YYYY: Rok so štyrmi číslicami
• YY: Rok s dvoma číslicami
• MM: Mesiac s dvoma číslicami
• M: Mesiac s jednou alebo dvoma číslicami
• MMMM: Mesiac slovami
• DD: Deň v mesiaci s dvoma číslicami
• D: Deň v mesiaci s jednou alebo dvoma číslicami
• Do: Deň v mesiaci s poradovým číslom
• HH: Hodina s dvoma číslicami
• H: Hodina s jednou alebo dvoma číslicami
• mm: Minúta s dvoma číslicami
• m: Minúta s jednou alebo dvoma číslicami
• ss: Druhý s dvoma číslicami
• s: Druhá s jednou alebo dvoma číslicami

Keď App je vykreslený komponent v predchádzajúcom bloku kódu, aktuálny dátum a čas sa zobrazia v určenom formáte na obrazovke.

The moment() metóda môže mať reťazec dátum alebo čas argument. Keď moment() metóda má reťazcový argument dátumu alebo času, vytvára momentový objekt reprezentujúci daný dátum alebo čas. Reťazec môže byť v rôznych formátoch, ako napríklad ISO 8601, RFC 2822 alebo časová pečiatka Unix.

Napríklad:

konšt dátum = moment('1998-06-23').formát("MMMM DD YYYY");

Použitie Moment.js na manipuláciu s dátumom a časom

Knižnica Moment.js tiež poskytuje niekoľko metód na manipuláciu s dátumami a časmi. Tieto metódy umožňujú pridávať alebo uberať časové intervaly, nastavovať špecifické hodnoty pre komponenty dátumu a času a vykonávať ďalšie použiteľné operácie.

Napríklad:

importovať Reagovať od'reagovať';
importovať moment od'moment';
funkciuApp() {
konšt zajtra = moment().add(1, 'deň').formát("Do MMMM, YYYY");
konšt čas = moment().odčítať(1, 'hodina').formát("HH: mm: ss");
konšt minulyrok = moment().set('rok', 2022).set('mesiac', 1).formát("Do MMMM, YYYY");
konšt hodina = moment().get('hodina');
vrátiť (

"aplikácia">
zajtradátum používateľa je { zajtra }

Toto bol čas: { čas }, pred hodinou</p>

{ minulý rok }</p>

{ hodina }</p>
 </div>
 )
}
exportpredvolená App

V tomto príklade vy deklarovať nasledujúce premenné JavaScriptu: zajtra, čas, minulý rok, a hodina. Tieto štyri premenné používajú rôzne metódy knižnice Moment.js na manipuláciu s dátumom a časom.

The zajtra premenná používa pridať () spôsob pridania jedného dňa k aktuálnemu dátumu. The pridať () metóda pridáva čas k danému objektu Moment. Funkcia má dva argumenty: hodnotu trvania a reťazec predstavujúci jednotku času na pridanie. Jednotka môže byť rokov, mesiacov, týždňov, dni, hodiny, minút, a sekúnd.

Čas môžete odčítať aj pomocou odpočítať () metóda. V tomto prípade, čas premenná používa odpočítať () metóda na odčítanie jednej hodiny od aktuálneho času.

Pomocou set() metóda, minulý rok premenná nastavuje rok 2022 a mesiac február (keďže január je reprezentovaný ako mesiac 0). The set() metóda priraďuje konkrétnu jednotku času objektu Moment.

S dostať () metódou, môžete získať konkrétny čas. The dostať () metóda vyžaduje jeden argument, jednotku času.

Použitie Moment.js na analýzu dátumu a času

Ďalšou užitočnou funkciou Moment.js je jeho schopnosť analyzovať dátumy a časy z reťazcov. To môže byť užitočné pri práci s údajmi z externých zdrojov.

Ak chcete analyzovať dátum alebo čas z reťazca, musíte použiť moment() metóda. V tomto prípade, moment() metóda má dva argumenty, reťazec dátumu a reťazec formátu.

Tu je príklad, ako môžete použiť moment() metóda analýzy dátumov a časov:

importovať Reagovať od'reagovať';
importovať moment od'moment';
funkciuApp() {
konšt dátum = moment('2920130000', „Do-MMMM-RRRR“).randiť();
konzoly.log( dátum );
vrátiť (

</div>
 )
}
exportpredvolená App

Vo vyššie uvedenom bloku kódu moment() metóda analyzuje tento reťazec „2920130000“ pomocou formátovacieho reťazca „Do-MMMM-RRRR“. The randiť() metóda konvertuje objekt momentu na natívny objekt dátumu JavaScript.

The randiť() metóda neberie žiadne argumenty a vracia objekt JavaScript Date predstavujúci rovnaký dátum a čas ako objekt momentu.

Zobrazenie relatívneho času

Pomocou knižnice Moment.js môžete formátovať a zobrazovať relatívny čas. Ak to chcete urobiť, použite odteraz() a teraz () metódy. Tieto metódy zobrazujú čas medzi daným dátumom a aktuálnym časom.

Napríklad:

importovať Reagovať od'reagovať';
importovať moment od'moment';
funkciuApp() {
konšt včera = moment().odčítať(7, 'deň');
konšt cas1 = vcera.odteraz(); // Pred 7 dňami
konšt cas2 = vcera.toNow(); // za 7 dní
vrátiť (



{ čas1 }</p>

{ čas2 }</p>
 </div>
 )
}
exportpredvolená App

V tomto príklade odteraz() metóda vráti relatívny čas, ktorý uplynul od zadaného dátumu, zatiaľ čo metóda teraz () metóda vráti relatívny čas do aktuálneho času.

Viac do Moment.js

Moment.js je výkonná knižnica, ktorá poskytuje jednoduchý spôsob manipulácie a formátovania dátumov a časov v JavaScripte. Naučili ste sa manipulovať, zobrazovať a analyzovať dátumy a časy v React pomocou Moment.js.

Moment.js ponúka niekoľko ďalších metód, ako napríklad local, startOf, endOf atď. S poskytnutými informáciami ste však viac než pripravení začať používať Moment.js vo svojej aplikácii React.