Kā rīkoties ar datuma un laika pārvaldību programmā React, izmantojot Day.js

Datuma un laika pārvaldība ir ļoti svarīga jebkurai lietojumprogrammai, un React nav izņēmums. Lai gan JavaScript nodrošina iebūvētas datuma un laika manipulācijas funkcijas, tās var būt apgrūtinošas. Par laimi, daudzas trešo pušu bibliotēkas var vienkāršot datuma un laika pārvaldību programmā React. Viena no šādām bibliotēkām ir Day.js.

Day.js ir viegla bibliotēka datumu un laiku parsēšanai, apstiprināšanai, manipulēšanai un formatēšanai JavaScript.

Instalējot Day.js

The Diena.js bibliotēka ir mūsdienīga alternatīva Moment.js, kas ir vēl viena bibliotēka, ko izmanto datumu un laiku apstrādei. Day.js piedāvā līdzīgu API ar mazāku nospiedumu un ātrāku veiktspēju.

Lai savā React lietojumprogrammā izmantotu Day.js, vispirms tā ir jāinstalē. To var izdarīt, terminālī izpildot šādu komandu:

npm instalējiet dayjs

Datumu un laiku parsēšana un formatēšana

Day.js nodrošina vienkārša API datu parsēšanai un formatēšanai. Datumu un laiku varat iegūt, izmantojot

dayjs() metodi, taču vispirms tā ir jāimportē no Day.js bibliotēkas.

Piemēram:

imports Reaģēt no'reaģēt';
imports dayjs no'dayjs';
funkcijuApp() {
konst datums = dayjs();
konsole.log (datums); 
atgriezties (



Datums un laika vadība</p>
 </div>
 )
}
eksportētnoklusējuma App

The dayjs() metode izveido jaunu Day.js objektu, kas attēlo konkrētu datumu un laiku. Iepriekš minētajā piemērā dayjs() metode izveido Day.js objektu, kas attēlo pašreizējo datumu un laiku.

Jūsu konsolē Day.js objekts izskatītos šādi:

The dayjs() metode pieņem neobligātu datuma argumentu, kas var būt virkne, skaitlis (Unix laikspiedols), JavaScript datuma objekts, vai citu Day.js objektu. Metode ģenerēs Day.js objektu, kas attēlo norādīto datuma argumentu.

Piemēram:

imports Reaģēt no'reaģēt';
imports dayjs no'dayjs';
funkcijuApp() {
konst datums = dayjs('2023-05-01');
konsole.log (datums); // Day.js objekts, kas attēlo norādīto datumu
konst unixDate = dayjs(1651382400000);
konsole.log (unixDate); // Day.js objekts, kas attēlo norādīto datumu
atgriezties (



Datums un laika vadība</p>
 </div>
 )
}
eksportētnoklusējuma App

Šī koda bloka Day.js objekta izvade būs līdzīga iepriekšējam koda blokam, taču tai būs atšķirīgas rekvizītu vērtības.

Lai parādītu datumus, kas ģenerēti kā Day.js objekti, ir jāizmanto formāts () metodi. The formāts () Day.js bibliotēkas metode ļauj formatēt Day.js objektu kā virkni atbilstoši noteiktai formāta virknei.

Metode izmanto formāta virkni kā argumentu. Virknes arguments var ietvert burtu un speciālo rakstzīmju kombināciju, katrai no tām ir noteikta nozīme,

Piemēram:

imports Reaģēt no'reaģēt';
imports dayjs no'dayjs';
funkcijuApp() {
konst datums = dayjs('2023-05-01'.format("ddd, MMMM D, GGGG"); // Pirmdiena, 2023. gada 1. maijs
konst laiks = dayjs().format("HH: mm: ss"); //09:50:23
konst unixDate = dayjs(1651382400000.format(“MM/DD/GG”); // 05/01/22
atgriezties (



{datums}</p>

{unixDate}</p>

{laiks}</p>
 </div>
 )
}
eksportētnoklusējuma App

The datums mainīgais rādīs datumu šādā formātā “Trešdiena, 2023. gada 26. aprīlis”. Formāta virkne ir “ddd, MMMM D, GGGG” kur dddd ir nedēļas diena, MMMM ir mēnesis vārdos, D ir mēneša diena ar vienu vai diviem cipariem un GGGG ir gads ar četriem cipariem.

The unixDate mainīgais tiek formatēts kā virkne, izmantojot formāta virkni 'MM/DD/GGGG,' kas apzīmē mēnesi ar diviem cipariem, mēneša dienu ar diviem cipariem un gadu ar četriem cipariem.

The laiks mainīgais parāda pašreizējo laiku norādītajā formātā. Formāta virkne ir “HH: mm: ss” kur HH apzīmē stundas, mm apzīmē protokolu un ss apzīmē sekundes.

Manipulēšana ar datumiem un laikiem

Day.js nodrošina vairākas metodes, kas ļauj viegli manipulēt ar datumiem un laikiem. Jūs varat atsaukties uz Diena.js oficiālā dokumentācija, lai iegūtu pilnu pieejamo metožu sarakstu datumu un laiku manipulēšanai.

Piemēram:

imports Reaģēt no'reaģēt';
imports dayjs no'dayjs';
funkcijuApp() {
konst datums = dayjs().add(7,'dienas'.format("ddd, MMMM D, GGGG"); // Trešdiena, 2023. gada 16. jūnijs 
konst laiks = dayjs().atņemt(2, 'stundas'.format("HH: mm: ss"); // 07:53:00
atgriezties (



{datums}</p>

{laiks}</p>
 </div>
 )
}
eksportētnoklusējuma App

Iepriekš minētais koda bloks izmanto pievienot () metode, lai pašreizējam datumam pievienotu 7 dienas. The pievienot () metode ļauj Day.js objektam pievienot noteiktu laiku. Metode izmanto divus argumentus: laika daudzumu, kas jāpievieno skaitļiem, un laika vienību, kas jāsaskaita.

Ar atņemt () metodi, jūs varat atņemt noteiktu laiku no Diena.js objektu. The laiks mainīgais atņem 2 stundas no pašreizējā laika, izmantojot atņemt () metodi.

Tiek rādīts relatīvais laiks

Day.js nodrošina vairākas metodes, tostarp no šī brīža(), tagad (), uz (), un no () lai parādītu relatīvo laiku, piemēram, "pirms 2 stundām" vai "pēc 3 dienām". Lai izmantotu šīs metodes, importējiet relatīvais laiks spraudnis no dayjs/plugin/relativeTime savā React pieteikumā.

Piemēram:

imports Reaģēt no'reaģēt';
imports dayjs no'dayjs';
imports relatīvais laiks no'dayjs/plugin/relativeTime';
funkcijuApp() {
 dayjs.extend (relativeTime);

konst datums = dayjs().add(7, 'dienas')
konst relatīvaisDatums = date.from Now(); // 7 dienu laikā
konst date2 = dayjs().atņemt(2, 'stundas');
konst relatīvaisDatums2 = date2.toTagad(); // 2 stundu laikā
konst lastYear = dayjs().atņemt(1, 'gads');
konst diff = datums.no (pēdējais gads); // gadā
konst diff2 = datums.līdz (pēdējais gads) // pirms gada
atgriezties (



{ relatīvais datums }</p>

{ relatīvaisDatums2 }</p>

{ atšķir. }</p>

{ diff2 }</p>
 </div>
 )
}
eksportētnoklusējuma App

The no šī brīža() funkcija parāda relatīvu laika virkni, kas atspoguļo atšķirību starp pašreizējo laiku un norādīto datumu. Šajā piemērā no šī brīža() parāda atšķirību starp datums un pašreizējais laiks.

The tagad () funkcija ir līdzīga no šī brīža() funkcija, jo tā parāda virkni, kas atspoguļo atšķirību starp norādīto datumu un pašreizējo laiku. Kad jūs zvanāt uz tagad () funkcija, tā atgriež relatīvu laika virkni pašreizējam laikam.

Visbeidzot, izmantojot no () un uz () funkcijas, varat parādīt relatīvu laika virkni, kas atspoguļo atšķirību starp diviem norādītajiem datumiem. Šajā piemērā jūs saprotat atšķirību starp pagājušais gads un datums izmantojot no () un uz () funkcijas.

Ņemiet vērā, ka varat arī nodot neobligātu Būla argumentu no šī brīža(), tagad (), no (), un uz () metodes, lai norādītu, vai iekļaut vai izslēgt sufiksu (piemēram, "ago" vai "in").

Piemēram:

konst datums = dayjs().add(7, 'dienas')
konst relatīvsDatums = date.fromNow(taisnība); // 7 dienas
konst date2 = dayjs().atņemt(2, 'stundas');
konst relatīvaisDatums2 = date2.toNow(taisnība); // 2 stundas
konst lastYear = dayjs().atņemt(1, 'gads');
konst diff = date.from (pēdējais gads, taisnība) // gads
konst diff2 = date.to (pēdējais gads, taisnība) // gads

Ejot garām viltus argumentam tiks parādīti datumi ar sufiksu.

Efektīva datuma un laika pārvaldība

Datuma un laika pārvaldība ir būtisks jebkuras lietojumprogrammas aspekts, un Day.js nodrošina viegli lietojamu un elastīgu bibliotēku šo darbību veikšanai React lietojumprogrammā. Iekļaujot Day.js savā projektā, varat viegli formatēt datumus un laikus, parsēt virknes un manipulēt ar ilgumiem.

Turklāt Day.js piedāvā virkni spraudņu, lai paplašinātu tā funkcionalitāti un padarītu to vēl jaudīgāku. Neatkarīgi no tā, vai veidojat vienkāršu kalendāru vai sarežģītu plānošanas sistēmu, Day.js ir lieliska izvēle datuma un laika pārvaldībai savā React lietojumprogrammā.