Knihovna Day.js usnadňuje zpracování operací s datem a časem v aplikacích React.

Správa data a času je zásadní pro každou aplikaci a React není výjimkou. Přestože JavaScript poskytuje vestavěné funkce pro manipulaci s datem a časem, mohou být těžkopádné. Naštěstí mnoho knihoven třetích stran může zjednodušit správu data a času v Reactu. Jednou z takových knihoven je Day.js.

Day.js je odlehčená knihovna pro analýzu, ověřování, manipulaci a formátování dat a časů v JavaScriptu.

Instalace Day.js

The Day.js knihovna je moderní alternativou k Moment.js, což je další knihovna používaná pro zpracování dat a časů. Day.js nabízí podobné API s menším rozměrem a rychlejším výkonem.

Chcete-li používat Day.js ve vaší aplikaci React, musíte si ji nejprve nainstalovat. Můžete to provést spuštěním následujícího příkazu v terminálu:

npm instalace dayjs

Analýza a formátování dat a časů

Day.js poskytuje jednoduché API pro analýzu a formátování dat. Datum a čas můžete získat pomocí dayjs() metodu, ale nejprve jej musíte importovat z knihovny Day.js.

instagram viewer

Například:

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


konst datum = dayjs();
řídicí panel.log (datum); 


vrátit se (




datum a Time Management</p>
 </div>
 )
}


vývoznívýchozí Aplikace

The dayjs() vytvoří nový objekt Day.js představující konkrétní datum a čas. Ve výše uvedeném příkladu je dayjs() vytvoří objekt Day.js představující aktuální datum a čas.

Ve vaší konzoli by objekt Day.js vypadal takto:

The dayjs() metoda přijímá volitelný argument data, kterým může být řetězec, číslo (časové razítko Unix), objekt Date v JavaScriptunebo jiný objekt Day.js. Metoda vygeneruje objekt Day.js představující zadaný argument data.

Například:

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


konst datum = dayjs('2023-05-01');
řídicí panel.log (datum); // Objekt Day.js představující zadané datum


konst unixDate = dayjs(1651382400000);
řídicí panel.log (unixDate); // Objekt Day.js představující zadané datum


vrátit se (




datum a Time Management</p>
 </div>
 )
}


vývoznívýchozí Aplikace

Výstup objektu Day.js tohoto bloku kódu bude podobný předchozímu bloku kódu, ale bude mít jiné hodnoty vlastností.

Chcete-li zobrazit data vygenerovaná jako objekty Day.js, musíte použít formát() metoda. The formát() metoda knihovny Day.js umožňuje formátovat objekt Day.js jako řetězec podle konkrétního formátovacího řetězce.

Metoda bere jako argument formátovací řetězec. Argument řetězce může obsahovat kombinaci písmen a speciálních znaků, z nichž každý má specifický význam,

Například:

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


konst datum = dayjs('2023-05-01').formát('dddd, MMMM D, YYYY'); // Pondělí 1. května 2023
konst čas = dayjs().format('HH: mm: ss'); //09:50:23
konst unixDate = dayjs(1651382400000).formát('MM/DD/RR'); // 05/01/22


vrátit se (




{datum}</p>


{unixDate}</p>


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


vývoznívýchozí Aplikace

The datum proměnná zobrazí datum v tomto formátu „středa, 26. dubna 2023“. Formátovací řetězec je „dddd, MMMM D, YYYY“ kde dddd je den v týdnu, MMMM je měsíc slovy, D je den v měsíci v jedné nebo dvou číslicích a YYYY je rok ve čtyřech číslicích.

The unixDate proměnná je formátována jako řetězec pomocí formátovacího řetězce 'MM/DD/RRRR,' což představuje měsíc dvěma číslicemi, den měsíce dvěma číslicemi a rok čtyřmi číslicemi.

The čas proměnná zobrazuje aktuální čas v zadaném formátu. Formátovací řetězec je „HH: mm: ss“ Kde HH představuje hodiny, mm představuje zápis a ss představuje sekundy.

Manipulace s daty a časy

Day.js poskytuje několik metod, které usnadňují manipulaci s daty a časy. Můžete odkazovat na Day.js oficiální dokumentaci, abyste získali úplný seznam dostupných metod pro manipulaci s daty a časy.

Například:

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


konst datum = dayjs().add(7,'dny').formát('dddd, MMMM D, YYYY'); // Středa 16. června 2023 
konst čas = dayjs().subtract(2, 'hodiny').formát('HH: mm: ss'); // 07:53:00


vrátit se (




{datum}</p>


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


vývoznívýchozí Aplikace

Výše uvedený blok kódu používá přidat() způsob přidání 7 dnů k aktuálnímu datu. The přidat() umožňuje přidat do objektu Day.js zadané množství času. Metoda vyžaduje dva argumenty, množství času pro sčítání čísel a jednotku času pro sčítání.

s odčítat() můžete odečíst zadané množství času od Day.js objekt. The čas proměnná odečte 2 hodiny od aktuálního času pomocí odčítat() metoda.

Zobrazení relativního času

Day.js poskytuje několik metod včetně od teď(), dosud(), na(), a z() pro zobrazení relativního času, například „před 2 hodinami“ nebo „za 3 dny“. Chcete-li použít tyto metody, importujte soubor relativní čas plugin od dayjs/plugin/relativeTime ve vaší aplikaci React.

Například:

import Reagovat z'reagovat';
import dayjs z'dayjs';
import relativní čas z'dayjs/plugin/relativeTime';
funkceAplikace() {


 dayjs.extend (relativeTime);

konst datum = dayjs().add(7, 'dny')
konst relativníDatum = datum.odNyní(); // za 7 dní


konst datum2 = dayjs().subtract(2, 'hodiny');
konst relativníDatum2 = datum2.toNow(); // za 2 hodiny


konst lastYear = dayjs().subtract(1, 'rok');
konst diff = datum.od (minulýRok); // v roce
konst diff2 = datum.do (minulýRok) // před rokem


vrátit se (




{ relativníDatum }</p>


{ relativníDatum2 }</p>


{ rozdíl }</p>


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


vývoznívýchozí Aplikace

The od teď() zobrazí relativní časový řetězec představující rozdíl mezi aktuálním časem a zadaným datem. V tomto příkladu je od teď() zobrazuje rozdíl mezi datum a aktuální čas.

The dosud() funkce je podobná jako od teď() funkce v tom, že zobrazuje řetězec představující rozdíl mezi zadaným datem a aktuálním časem. Když zavoláte na dosud() funkce, vrací relativní časový řetězec k aktuálnímu času.

Nakonec pomocí z() a na() funkce, můžete zobrazit relativní časový řetězec představující rozdíl mezi dvěma zadanými daty. V tomto příkladu získáte rozdíl mezi minulý rok a datum za použití z() a na() funkcí.

Všimněte si, že můžete také předat volitelný booleovský argument do od teď(), dosud(), z(), a na() metody k určení, zda se má přípona zahrnout nebo vyloučit (např. „před“ nebo „v“).

Například:

konst datum = dayjs().add(7, 'dny')
konst relativníDatum = datum.odteď(skutečný); // 7 dní
konst datum2 = dayjs().subtract(2, 'hodiny');
konst relativníDatum2 = datum2.toNow(skutečný); // 2 hodiny
konst lastYear = dayjs().subtract(1, 'rok');
konst diff = datum.od (minulýrok, skutečný) // rok
konst diff2 = datum.do (minulýRok, skutečný) // rok

Míjení Nepravdivé k argumentu zobrazí data s příponou.

Efektivní správa data a času

Správa data a času je zásadním aspektem každé aplikace a Day.js poskytuje snadno použitelnou a flexibilní knihovnu pro zpracování těchto operací v aplikaci React. Začleněním Day.js do svého projektu můžete snadno formátovat data a časy, analyzovat řetězce a manipulovat s trváním.

Day.js navíc nabízí řadu pluginů, které rozšiřují jeho funkčnost a činí jej ještě výkonnějším. Ať už vytváříte jednoduchý kalendář nebo složitý plánovací systém, Day.js je vynikající volbou pro správu data a času ve vaší aplikaci React.