Kuidas käsitleda kuupäeva ja kellaaja haldamist rakenduses React, kasutades Day.js-i

Kuupäeva ja kellaaja haldamine on iga rakenduse jaoks ülioluline ning React pole erand. Kuigi JavaScript pakub sisseehitatud kuupäeva ja kellaaja manipuleerimise funktsioone, võivad need olla tülikad. Õnneks saavad paljud kolmandate osapoolte teegid Reactis kuupäeva ja kellaaja haldamist lihtsustada. Üks selline raamatukogu on Day.js.

Day.js on kerge teek kuupäevade ja kellaaegade sõelumiseks, kinnitamiseks, manipuleerimiseks ja vormindamiseks JavaScriptis.

Day.js installimine

The Day.js raamatukogu on kaasaegne alternatiiv Moment.js, mis on teine ​​​​teek, mida kasutatakse kuupäevade ja kellaaegade haldamiseks. Day.js pakub sarnast API-t väiksema jalajälje ja kiirema jõudlusega.

Day.js-i kasutamiseks oma Reacti rakenduses peate selle esmalt installima. Seda saate teha, käivitades terminalis järgmise käsu:

npm install dayjs

Kuupäevade ja kellaaegade sõelumine ja vormindamine

Day.js pakub lihtne API kuupäevade sõelumiseks ja vormindamiseks. Kuupäeva ja kellaaja saate vaadata kasutades

dayjs() meetodit, kuid kõigepealt peate selle Day.js-i teegist importima.

Näiteks:

importida Reageerige alates'reageeri';
importida dayjs alates"dayjs";
funktsiooniRakendus() {
konst kuupäev = dayjs();
konsool.log (kuupäev); 
tagasi (



Kuupäev ja ajajuhtimine</p>
 </div>
 )
}
eksportidavaikimisi Rakendus

The dayjs() meetod loob uue Day.js objekti, mis esindab kindlat kuupäeva ja kellaaega. Ülaltoodud näites on dayjs() meetod loob Day.js objekti, mis esindab praegust kuupäeva ja kellaaega.

Teie konsoolis näeks objekt Day.js välja järgmine:

The dayjs() meetod aktsepteerib valikulist kuupäevaargumenti, mis võib olla string, arv (Unixi ajatempel), JavaScripti kuupäeva objektvõi mõni muu Day.js objekt. Meetod loob objekti Day.js, mis esindab määratud kuupäeva argumenti.

Näiteks:

importida Reageerige alates'reageeri';
importida dayjs alates"dayjs";
funktsiooniRakendus() {
konst kuupäev = dayjs('2023-05-01');
konsool.log (kuupäev); // Objekt Day.js, mis esindab määratud kuupäeva
konst unixDate = dayjs(1651382400000);
konsool.log (unixDate); // Objekt Day.js, mis esindab määratud kuupäeva
tagasi (



Kuupäev ja ajajuhtimine</p>
 </div>
 )
}
eksportidavaikimisi Rakendus

Selle koodiploki Day.js objekti väljund sarnaneb eelmisele koodiplokile, kuid sellel on erinevad atribuutide väärtused.

Day.js-objektidena genereeritud kuupäevade kuvamiseks peate kasutama formaat () meetod. The formaat () Day.js teegi meetod võimaldab vormindada Day.js objekti stringina vastavalt kindlale vormingustringile.

Meetod võtab argumendiks vormingustringi. Stringi argument võib sisaldada tähtede ja erimärkide kombinatsiooni, millest igaühel on konkreetne tähendus,

Näiteks:

importida Reageerige alates'reageeri';
importida dayjs alates"dayjs";
funktsiooniRakendus() {
konst kuupäev = dayjs('2023-05-01'.format(„ppdd, MMMM D, YYYY”); // Esmaspäev, 1. mai 2023
konst aeg = dayjs().format("HH: mm: ss"); //09:50:23
konst unixDate = dayjs(1651382400000.format(„KK/PP/AA”); // 05/01/22
tagasi (



{kuupäev}</p>

{unixDate}</p>

{aeg}</p>
 </div>
 )
}
eksportidavaikimisi Rakendus

The kuupäev muutuja kuvab kuupäeva selles vormingus „kolmapäev, 26. aprill 2023”. Vormingutring on "ppdd, MMMM D, YYYY" kus dddd on nädalapäev, MMMM on kuu sõnades, D on ühe- või kahekohaline kuu päev ja AAAA on aasta neljakohaline.

The unixDate muutuja vormindatakse stringina, kasutades vormingustringi "KK/PP/AAAA", mis tähistab kuud kahekohaliselt, kuu päeva kahekohaliselt ja aastat neljakohaliselt.

The aega muutuja kuvab praegust kellaaega määratud vormingus. Vormingutring on "HH: mm: ss" kus on HH tähistab tunde, mm tähistab protokolli ja ss tähistab sekundeid.

Kuupäevade ja kellaaegadega manipuleerimine

Day.js pakub mitmeid meetodeid, mis muudavad kuupäevade ja kellaaegadega manipuleerimise lihtsaks. Võite viidata Day.js ametlikku dokumentatsiooni, et saada kuupäevade ja kellaaegadega manipuleerimiseks saadaolevate meetodite täielik loetelu.

Näiteks:

importida Reageerige alates'reageeri';
importida dayjs alates"dayjs";
funktsiooniRakendus() {
konst kuupäev = dayjs().add(7,'päevad'.format(„ppdd, MMMM D, YYYY”); // Kolmapäev, 16. juuni 2023 
konst aeg = dayjs().subtract(2, 'tunnid'.format("HH: mm: ss"); // 07:53:00
tagasi (



{kuupäev}</p>

{aeg}</p>
 </div>
 )
}
eksportidavaikimisi Rakendus

Ülaltoodud koodiplokk kasutab lisama() meetod praegusele kuupäevale 7 päeva lisamiseks. The lisama() meetod võimaldab lisada Day.js objektile teatud aja. Meetod kasutab kahte argumenti: arvude lisamiseks kuluvat aega ja lisamise ajaühikut.

Koos lahuta () meetodil saate lahutada määratud aja Day.js objektiks. The aega muutuja lahutab praegusest ajast 2 tundi, kasutades lahuta () meetod.

Suhtelise aja kuvamine

Day.js pakub mitmeid meetodeid, sealhulgas nüüdsest(), nüüd (), kuni ()ja alates () suhtelise aja kuvamiseks, näiteks "2 tundi tagasi" või "3 päeva pärast". Nende meetodite kasutamiseks importige suhteline aeg plugin alates dayjs/plugin/relativeTime oma Reacti rakenduses.

Näiteks:

importida Reageerige alates'reageeri';
importida dayjs alates"dayjs";
importida suhteline aeg alates'dayjs/plugin/relativeTime';
funktsiooniRakendus() {
 dayjs.extend (relativeTime);

konst kuupäev = dayjs().add(7, 'päevad')
konst suhtelineKuupäev = date.fromNow(); // 7 päevaga
konst kuupäev2 = dayjs().subtract(2, 'tunnid');
konst suhtelineKuupäev2 = date2.toNow(); // 2 tunni pärast
konst lastYear = dayjs().subtract(1, 'aasta');
konst diff = kuupäev.alates (viimane aasta); // aasta pärast
konst diff2 = kuupäev.kuni (viimane aasta) // aasta tagasi
tagasi (



{ suhteline kuupäev }</p>

{ suhtelineKuupäev2 }</p>

{ diff }</p>

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

The nüüdsest() funktsioon kuvab suhtelise ajastringi, mis näitab erinevust praeguse kellaaja ja määratud kuupäeva vahel. Selles näites on nüüdsest() näitab erinevust kuupäev ja praegune kellaaeg.

The nüüd () funktsioon on sarnane nüüdsest() funktsiooni, kuna see kuvab stringi, mis tähistab erinevust määratud kuupäeva ja praeguse kellaaja vahel. Kui helistate nüüd () funktsioon, tagastab see praegusele kellaajale suhtelise ajastringi.

Lõpuks, kasutades alates () ja kuni () funktsioonide puhul saate kuvada suhtelise ajastringi, mis tähistab kahe määratud kuupäeva erinevust. Selles näites saate erinevuse eelmisel aastal ja kuupäev kasutades alates () ja kuni () funktsioonid.

Pange tähele, et saate sisestada ka valikulise tõeväärtusargumendi nüüdsest(), nüüd (), alates ()ja kuni () meetodid, et määrata, kas lisada või välistada järelliide (nt "ago" või "in").

Näiteks:

konst kuupäev = dayjs().add(7, 'päevad')
konst ratioDate = date.fromNow(tõsi); // 7 päeva
konst kuupäev2 = dayjs().subtract(2, 'tunnid');
konst suhtelineKuupäev2 = date2.toNow(tõsi); // 2 tundi
konst lastYear = dayjs().subtract(1, 'aasta');
konst diff = date.from (viimane aasta, tõsi) // aasta
konst diff2 = date.to (viimane aasta, tõsi) // aasta

Mööduv vale argumendile kuvab kuupäevad koos järelliidetega.

Kuupäeva ja kellaaja tõhus haldamine

Kuupäeva ja kellaaja haldamine on iga rakenduse oluline aspekt ning Day.js pakub lihtsalt kasutatavat ja paindlikku teeki nende toimingute haldamiseks Reacti rakenduses. Lisades Day.js-i oma projekti, saate hõlpsalt kuupäevi ja kellaaegu vormindada, stringe sõeluda ja kestusi muuta.

Lisaks pakub Day.js laia valikut pistikprogramme oma funktsionaalsuse laiendamiseks ja veelgi võimsamaks muutmiseks. Olenemata sellest, kas koostate lihtsat kalendrit või keerukat ajastamissüsteemi, on Day.js suurepärane valik kuupäeva ja kellaaja haldamiseks rakenduses React.