Moment.js je fantastická knihovna pro efektivní správu data a času v aplikacích React.

Správa dat a času v Reactu může představovat problém pro ty, kteří tuto oblast neznají. Naštěstí existuje několik knihoven, které vám mohou pomoci se správou data a času v Reactu. Jednou z těchto knihoven je Moment.js.

Moment.js je odlehčená knihovna s jednoduchým způsobem manipulace a formátování dat a času v JavaScriptu.

Instalace knihovny Moment.js

Moment.js knihovna je a balíček pro správu operací s datem a časem v JavaScriptu. Instalace knihovny Moment.js je prvním krokem k používání Moment.js ve vaší aplikaci React. Můžete to provést spuštěním následujícího příkazu v terminálu:

moment instalace npm

Po dokončení instalace můžete použít Moment.js v komponentě React.

Použití Moment.js k zobrazení data a času

Pomocí Moment.js můžete v aplikaci React zobrazit data a časy v konkrétním formátu. Chcete-li použít knihovnu, importujte moment z nainstalovaného balíčku.

import Reagovat z'reagovat';
import moment 





instagram viewer


z'moment';
funkceAplikace() {


konst datum = moment().formát("MMMM DD YYYY");
konst čas = moment().formát("HH mm ss");


vrátit se (




 Dnesdatum uživatele je { datum } 


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


vývoznívýchozí Aplikace

The moment() metoda vytvoří nový momentový objekt, který představuje konkrétní bod v čase. The formát() metoda formátuje objekt momentu do řetězcové reprezentace.

The formát() metoda přebírá argument řetězce určující požadovaný formát pro objekt moment. Argument řetězce může obsahovat kombinaci písmen a speciálních znaků, z nichž každý má specifický význam.

Některé z těchto speciálních znaků jsou:

  • YYYY: Rok se čtyřmi číslicemi
  • YY: Rok se dvěma číslicemi
  • MM: Měsíc se dvěma číslicemi
  • M: Měsíc s jednou nebo dvěma číslicemi
  • MMMM: Měsíc ve slovech
  • DD: Den v měsíci se dvěma číslicemi
  • D: Den v měsíci s jednou nebo dvěma číslicemi
  • Dělat: Den v měsíci s pořadovým číslem
  • HH: Hodina se dvěma číslicemi
  • H: Hodina s jednou nebo dvěma číslicemi
  • mm: Minuta se dvěma číslicemi
  • m: Minuta s jednou nebo dvěma číslicemi
  • ss: Druhý se dvěma číslicemi
  • s: Druhý s jednou nebo dvěma číslicemi

Když Aplikace je vykreslena komponenta v předchozím bloku kódu, aktuální datum a čas se zobrazí na obrazovce v určeném formátu.

The moment() metoda může mít řetězec datum nebo čas argument. Když moment() metoda má řetězec datum nebo čas, vytvoří objekt moment představující toto datum nebo čas. Řetězec může být v různých formátech, jako je ISO 8601, RFC 2822 nebo časové razítko Unix.

Například:

konst datum = okamžik('1998-06-23').formát("MMMM DD YYYY");

Použití Moment.js k manipulaci s datem a časem

Knihovna Moment.js také poskytuje několik metod pro manipulaci s daty a časy. Tyto metody umožňují přidávat nebo odečítat časové intervaly, nastavovat konkrétní hodnoty pro komponenty data a času a provádět další použitelné operace.

Například:

import Reagovat z'reagovat';
import moment z'moment';
funkceAplikace() {


konst zítra = moment().přidej(1, 'den').formát("Do MMMM, YYYY");
konst čas = moment().odečíst(1, 'hodina').formát("HH: mm: ss");
konst lastYear = moment().set('rok', 2022).soubor('Měsíc', 1).formát("Do MMMM, YYYY");
konst hodina = moment().get('hodina');


vrátit se (


"Aplikace">
Zítradatum uživatele je { zítra }


Toto byl čas: { time }, před hodinou</p>


{ minulý rok }</p>


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


vývoznívýchozí Aplikace

V tomto příkladu vy deklarovat následující proměnné JavaScriptu: zítra, čas, minulý rok, a hodina. Tyto čtyři proměnné používají různé metody knihovny Moment.js k manipulaci s datem a časem.

The zítra proměnná používá přidat() způsob přidání jednoho dne k aktuálnímu datu. The přidat() metoda přidává čas danému objektu Moment. Funkce má dva argumenty: hodnotu trvání a řetězec představující jednotku času, která se má přidat. Jednotka by mohla být let, měsíce, týdnů, dní, hodin, minut, a sekundy.

Čas můžete také odečíst pomocí odčítat() metoda. V tomto případě je čas proměnná používá odčítat() způsob odečtení jedné hodiny od aktuálního času.

Za použití soubor() metoda, minulý rok proměnná nastavuje rok 2022 a měsíc únor (protože leden je reprezentován jako měsíc 0). The soubor() metoda přiřadí konkrétní jednotku času objektu Moment.

s dostat() můžete získat konkrétní čas. The dostat() metoda vyžaduje jeden argument, jednotku času.

Použití Moment.js k analýze data a času

Další užitečnou funkcí Moment.js je jeho schopnost analyzovat data a časy z řetězců. To může být užitečné při práci s daty z externích zdrojů.

Chcete-li analyzovat datum nebo čas z řetězce, musíte použít moment() metoda. V tomto případě je moment() metoda přebírá dva argumenty, řetězec data a řetězec formátu.

Zde je příklad, jak můžete použít moment() metoda analýzy dat a časů:

import Reagovat z'reagovat';
import moment z'moment';
funkceAplikace() {


konst datum = okamžik('2920130000', 'Do-MMMM-YYYY').k datu();
řídicí panel.log( datum );


vrátit se (


</div>
 )
}
vývoznívýchozí Aplikace

V bloku kódu výše moment() metoda bude analyzovat tento řetězec „2920130000“ pomocí řetězce formátu „Do-MMMM-RRRR“. The k datu() metoda převede objekt momentu na nativní objekt Date v JavaScriptu.

The k datu() metoda nebere žádné argumenty a vrací objekt JavaScript Date představující stejné datum a čas jako objekt moment.

Zobrazení relativního času

Pomocí knihovny Moment.js můžete formátovat a zobrazovat relativní čas. Chcete-li to provést, použijte od teď() a dosud() metody. Tyto metody zobrazují čas mezi daným datem a aktuálním časem.

Například:

import Reagovat z'reagovat';
import moment z'moment';
funkceAplikace() {


konst včera = moment().odečíst(7, 'den');
konst cas1 = vcera.odnyni(); // Před 7 dny
konst time2 = včera.toNow(); // za 7 dní


vrátit se (




{ čas1 }</p>


{ čas2 }</p>
 </div>
 )
}


vývoznívýchozí Aplikace

V tomto příkladu je od teď() metoda vrací relativní čas uplynulý od zadaného data, zatímco metoda dosud() metoda vrací relativní čas do aktuálního času.

Více do Moment.js

Moment.js je výkonná knihovna, která poskytuje jednoduchý způsob, jak manipulovat a formátovat data a časy v JavaScriptu. Naučili jste se manipulovat, zobrazovat a analyzovat data a časy v React pomocí Moment.js.

Moment.js nabízí několik dalších metod, jako je místní, startOf, endOf a tak dále. S poskytnutými informacemi jste však více než připraveni začít používat Moment.js ve své aplikaci React.