Knjižnica Day.js olajša upravljanje datumskih in časovnih operacij v aplikacijah React.

Upravljanje datuma in časa je ključnega pomena za vsako aplikacijo in React ni izjema. Čeprav JavaScript ponuja vgrajene funkcije za manipulacijo datuma in časa, so lahko okorne. Na srečo lahko številne knjižnice tretjih oseb poenostavijo upravljanje datuma in časa v Reactu. Ena takih knjižnic je Day.js.

Day.js je lahka knjižnica za razčlenjevanje, preverjanje, manipuliranje in oblikovanje datumov in ur v JavaScriptu.

Namestitev Day.js

The Day.js knjižnica je sodobna alternativa Moment.js, ki je druga knjižnica, ki se uporablja za obdelavo datumov in ur. Day.js ponuja podoben API z manjšim odtisom in hitrejšim delovanjem.

Če želite uporabljati Day.js v svoji aplikaciji React, ga morate najprej namestiti. To lahko storite tako, da v terminalu zaženete naslednji ukaz:

npm namestite dayjs

Razčlenjevanje in oblikovanje datumov in ur

Day.js zagotavlja preprost API za razčlenjevanje in oblikovanje datumov. Datum in uro lahko dobite z uporabo dayjs() vendar jo morate najprej uvoziti iz knjižnice Day.js.

instagram viewer

Na primer:

uvoz Reagiraj od'reagirati';
uvoz dayjs od'dayjs';
funkcijoaplikacija() {


konst datum = dayjs();
konzola.log (datum); 


vrnitev (




Datum in upravljanje s časom</p>
 </div>
 )
}


izvozprivzeto aplikacija

The dayjs() metoda ustvari nov objekt Day.js, ki predstavlja določen datum in uro. V zgornjem primeru je dayjs() metoda ustvari objekt Day.js, ki predstavlja trenutni datum in uro.

V vaši konzoli bi objekt Day.js izgledal takole:

The dayjs() metoda sprejme izbirni argument datuma, ki je lahko niz, število (časovni žig Unix), predmet JavaScript Datumali drug objekt Day.js. Metoda bo ustvarila objekt Day.js, ki predstavlja podani argument datuma.

Na primer:

uvoz Reagiraj od'reagirati';
uvoz dayjs od'dayjs';
funkcijoaplikacija() {


konst datum = dayjs('2023-05-01');
konzola.log (datum); // Objekt Day.js, ki predstavlja podani datum


konst unixDate = dayjs(1651382400000);
konzola.log (unixDate); // Objekt Day.js, ki predstavlja podani datum


vrnitev (




Datum in upravljanje s časom</p>
 </div>
 )
}


izvozprivzeto aplikacija

Izhod objekta Day.js tega bloka kode bo podoben prejšnjemu bloku kode, vendar bo imel drugačne vrednosti lastnosti.

Če želite prikazati datume, ustvarjene kot objekte Day.js, morate uporabiti format() metoda. The format() metoda knjižnice Day.js vam omogoča, da objekt Day.js oblikujete kot niz v skladu z določenim nizom formata.

Metoda kot argument vzame formatni niz. Argument niza lahko vključuje kombinacijo črk in posebnih znakov, od katerih ima vsak poseben pomen,

Na primer:

uvoz Reagiraj od'reagirati';
uvoz dayjs od'dayjs';
funkcijoaplikacija() {


konst datum = dayjs('2023-05-01').format('dddd, MMMM D, LLLL'); // ponedeljek, 1. maj 2023
konst čas = dayjs().format('HH: mm: ss'); //09:50:23
konst unixDate = dayjs(1651382400000).format('MM/DD/LL'); // 05/01/22


vrnitev (




{datum}</p>


{unixDate}</p>


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


izvozprivzeto aplikacija

The datum spremenljivka bo prikazala datum v tej obliki 'sreda, 26. april 2023'. Oblikovni niz je 'dddd, MMMM D, LLLL' kje dddd je dan v tednu, MMMM je mesec v besedah, D je dan v mesecu z eno ali dvema številkama in LLLL je štirimestno leto.

The unixDate spremenljivka je oblikovana kot niz z uporabo formatnega niza 'MM/DD/LLLL,' ki predstavlja mesec v dveh številkah, dan v mesecu v dveh številkah in leto v štirih številkah.

The čas spremenljivka prikazuje trenutni čas v podani obliki. Oblikovni niz je 'HH: mm: ss' kje za HH predstavlja ure, mm predstavlja minute in ss predstavlja sekunde.

Manipulacija datumov in ur

Day.js ponuja več metod, ki olajšajo manipulacijo datumov in ur. Lahko se sklicujete na Day.js uradno dokumentacijo, da dobite celoten seznam razpoložljivih metod za spreminjanje datumov in ur.

Na primer:

uvoz Reagiraj od'reagirati';
uvoz dayjs od'dayjs';
funkcijoaplikacija() {


konst datum = dayjs().add(7,'dnevi').format('dddd, MMMM D, LLLL'); // Sreda, 16. junij 2023 
konst čas = dayjs().odštej(2, 'ure').format('HH: mm: ss'); // 07:53:00


vrnitev (




{datum}</p>


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


izvozprivzeto aplikacija

Zgornji blok kode uporablja dodaj() način za dodajanje 7 dni trenutnemu datumu. The dodaj() vam omogoča, da predmetu Day.js dodate določeno količino časa. Metoda uporablja dva argumenta, količino časa za seštevanje v številkah in enoto časa za seštevanje.

z odštej() lahko od metode odštejete določeno količino časa Day.js predmet. The čas spremenljivka odšteje 2 uri od trenutnega časa z uporabo odštej() metoda.

Prikaz relativnega časa

Day.js ponuja več metod, vključno z od sedaj(), toNow(), do (), in od() za prikaz relativnega časa, na primer "pred 2 urama" ali "čez 3 dni". Če želite uporabiti te metode, uvozite relativeTime vtičnik iz dayjs/plugin/relativeTime v vaši aplikaciji React.

Na primer:

uvoz Reagiraj od'reagirati';
uvoz dayjs od'dayjs';
uvoz relativeTime od'dayjs/plugin/relativeTime';
funkcijoaplikacija() {


 dayjs.extend (relativni čas);

konst datum = dayjs().add(7, 'dnevi')
konst relativniDatum = datum.fromNow(); // v 7 dneh


konst datum2 = dayjs().odštej(2, 'ure');
konst relativniDatum2 = datum2.toNow(); // v 2 urah


konst lastYear = dayjs().subtract(1, 'leto');
konst diff = date.from (lastYear); // čez eno leto
konst diff2 = datum.do (lastYear) // pred letom dni


vrnitev (




{relativniDatum }</p>


{relativniDatum2 }</p>


{ diff }</p>


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


izvozprivzeto aplikacija

The od sedaj() funkcija prikaže relativni časovni niz, ki predstavlja razliko med trenutnim časom in določenim datumom. V tem primeru je od sedaj() prikazuje razliko med datum in trenutni čas.

The toNow() funkcija je podobna od sedaj() funkcijo v tem, da prikaže niz, ki predstavlja razliko med določenim datumom in trenutnim časom. Ko pokličete toNow() vrne relativni časovni niz na trenutni čas.

Nazadnje z uporabo od() in do () funkcije, lahko prikažete relativni časovni niz, ki predstavlja razliko med dvema podanima datumoma. V tem primeru vidite razliko med lansko leto in datum uporabljati od() in do () funkcije.

Upoštevajte, da lahko posredujete tudi izbirni logični argument od sedaj(), toNow(), od(), in do () metode za določanje, ali želite vključiti ali izključiti pripono (npr. "nazaj" ali "in").

Na primer:

konst datum = dayjs().add(7, 'dnevi')
konst relativeDate = date.fromNow(prav); // 7 dni
konst datum2 = dayjs().odštej(2, 'ure');
konst relativeDate2 = date2.toNow(prav); // 2 uri
konst lastYear = dayjs().subtract(1, 'leto');
konst diff = date.from (lastYear, prav) // leto
konst diff2 = datum.do (lastYear, prav) // leto

Prehajanje lažno na argument bo prikazal datume s pripono.

Učinkovito upravljanje datuma in ure

Upravljanje datuma in časa je ključni vidik vsake aplikacije, Day.js pa ponuja enostavno in prilagodljivo knjižnico za upravljanje teh operacij v aplikaciji React. Z vključitvijo Day.js v svoj projekt lahko enostavno oblikujete datume in ure, razčlenite nize in manipulirate s trajanji.

Poleg tega Day.js ponuja vrsto vtičnikov, ki razširijo njegovo funkcionalnost in postanejo še zmogljivejši. Ne glede na to, ali gradite preprost koledar ali kompleksen sistem za razporejanje, je Day.js odlična izbira za upravljanje datuma in časa v vaši aplikaciji React.