Päivämäärän ja ajanhallinnan käsitteleminen Reactissa Day.js: n avulla

Päivämäärän ja kellonajan hallinta on ratkaisevan tärkeää kaikissa sovelluksissa, eikä React ole poikkeus. Vaikka JavaScript tarjoaa sisäänrakennettuja päivämäärän ja ajan manipulointitoimintoja, ne voivat olla hankalia. Onneksi monet kolmannen osapuolen kirjastot voivat yksinkertaistaa päivämäärän ja kellonajan hallintaa Reactissa. Yksi tällainen kirjasto on Day.js.

Day.js on kevyt kirjasto päivämäärien ja aikojen jäsentämiseen, vahvistamiseen, käsittelyyn ja muotoiluun JavaScriptissä.

Asennetaan Day.js

The Day.js kirjasto on moderni vaihtoehto Moment.js, joka on toinen kirjasto, jota käytetään päivämäärien ja kellonaikojen käsittelyyn. Day.js tarjoaa samanlaisen API: n pienemmällä jalanjäljillä ja nopeammalla suorituskyvyllä.

Jotta voit käyttää Day.js: ää React-sovelluksessasi, sinun on ensin asennettava se. Voit tehdä tämän suorittamalla seuraavan komennon terminaalissasi:

npm asenna dayjs

Päivämäärien ja aikojen jäsentäminen ja muotoilu

Day.js tarjoaa yksinkertainen API päivämäärien jäsentämiseen ja muotoiluun. Voit saada päivämäärän ja kellonajan käyttämällä dayjs() -menetelmää, mutta ensin sinun on tuotava se Day.js-kirjastosta.

Esimerkiksi:

tuonti Reagoi alkaen'reagoi';
tuonti dayjs alkaen"dayjs";
toimintoSovellus() {
konst päivämäärä = dayjs();
konsoli.log (päivämäärä); 
palata (



Päivämäärä ja ajanhallinta</p>
 </div>
 )
}
viedäoletuksena Sovellus

The dayjs() menetelmä luo uuden Day.js-objektin, joka edustaa tiettyä päivämäärää ja aikaa. Yllä olevassa esimerkissä dayjs() menetelmä luo Day.js-objektin, joka edustaa nykyistä päivämäärää ja aikaa.

Konsolissasi Day.js-objekti näyttäisi tältä:

The dayjs() menetelmä hyväksyy valinnaisen päivämääräargumentin, joka voi olla merkkijono, numero (Unix-aikaleima), JavaScript-päivämääräobjektitai muu Day.js-objekti. Menetelmä luo Day.js-objektin, joka edustaa määritettyä päivämääräargumenttia.

Esimerkiksi:

tuonti Reagoi alkaen'reagoi';
tuonti dayjs alkaen"dayjs";
toimintoSovellus() {
konst päivämäärä = dayjs('2023-05-01');
konsoli.log (päivämäärä); // Day.js-objekti, joka edustaa määritettyä päivämäärää
konst unixDate = dayjs(1651382400000);
konsoli.log (unixDate); // Day.js-objekti, joka edustaa määritettyä päivämäärää
palata (



Päivämäärä ja ajanhallinta</p>
 </div>
 )
}
viedäoletuksena Sovellus

Tämän koodilohkon Day.js-objektin tulos on samanlainen kuin edellinen koodilohko, mutta sillä on erilaiset ominaisuusarvot.

Jos haluat näyttää Day.js-objekteina luodut päivämäärät, sinun on käytettävä muoto() menetelmä. The muoto() Day.js-kirjaston menetelmän avulla voit muotoilla Day.js-objektin merkkijonona tietyn muotomerkkijonon mukaan.

Menetelmä ottaa argumenttina muotomerkkijonon. Merkkijonoargumentti voi sisältää yhdistelmän kirjaimia ja erikoismerkkejä, joilla kullakin on tietty merkitys,

Esimerkiksi:

tuonti Reagoi alkaen'reagoi';
tuonti dayjs alkaen"dayjs";
toimintoSovellus() {
konst päivämäärä = dayjs('2023-05-01').muoto("ppdd, MMMM D, VVVV"); // Maanantai, 1. toukokuuta 2023
konst aika = dayjs().format("HH: mm: ss"); //09:50:23
konst unixDate = dayjs(1651382400000).muoto("KK/PP/VV"); // 05/01/22
palata (



{päivämäärä}</p>

{unixDate}</p>

{aika}</p>
 </div>
 )
}
viedäoletuksena Sovellus

The Päivämäärä muuttuja näyttää päivämäärän tässä muodossa "Keskiviikko, 26. huhtikuuta 2023". Muotomerkkijono on "ppdd, MMMM D, VVVV" missä dddd on viikonpäivä, MMMM on kuukausi sanoissa, D on kuukauden päivä yhdellä tai kahdella numerolla, ja YYYY on vuosi nelinumeroinen.

The unixDate muuttuja muotoillaan merkkijonona muotomerkkijonolla "KK/PP/VVVV", joka edustaa kuukautta kahdella numerolla, kuukauden päivää kahdella numerolla ja vuotta neljällä numerolla.

The aika muuttuja näyttää nykyisen ajan määritetyssä muodossa. Muotomerkkijono on "HH: mm: ss" missä HH edustaa tunteja, mm edustaa pöytäkirjaa ja ss edustaa sekunteja.

Päivämäärien ja aikojen manipulointi

Day.js tarjoaa useita menetelmiä, joiden avulla päivämäärät ja kellonajat on helppo käsitellä. Voit viitata Day.js viralliset asiakirjat saadaksesi täydellisen luettelon käytettävissä olevista menetelmistä päivämäärien ja aikojen manipulointiin.

Esimerkiksi:

tuonti Reagoi alkaen'reagoi';
tuonti dayjs alkaen"dayjs";
toimintoSovellus() {
konst päivämäärä = dayjs().add(7,'päiviä').muoto("ppdd, MMMM D, VVVV"); // Keskiviikkona 16. kesäkuuta 2023 
konst aika = dayjs().subtract(2, 'tunnit').muoto("HH: mm: ss"); // 07:53:00
palata (



{päivämäärä}</p>

{aika}</p>
 </div>
 )
}
viedäoletuksena Sovellus

Yllä oleva koodilohko käyttää lisätä() tapa lisätä 7 päivää nykyiseen päivämäärään. The lisätä() menetelmän avulla voit lisätä tietyn ajan Day.js-objektiin. Menetelmässä tarvitaan kaksi argumenttia, aika, joka on lisättävä numeroihin, ja aikayksikkö lisättäväksi.

Kanssa vähentää() menetelmällä, voit vähentää tietyn ajan Day.js esine. The aika muuttuja vähentää 2 tuntia nykyisestä ajasta käyttämällä vähentää() menetelmä.

Suhteellisen ajan näyttö

Day.js tarjoaa useita menetelmiä, mukaan lukien tästä lähtien(), nyt(), to (), ja alkaen () näyttääksesi suhteellisen ajan, kuten "2 tuntia sitten" tai "3 päivän sisällä". Voit käyttää näitä menetelmiä tuomalla suhteellinen aika laajennus osoitteesta dayjs/plugin/relativeTime React-sovelluksessasi.

Esimerkiksi:

tuonti Reagoi alkaen'reagoi';
tuonti dayjs alkaen"dayjs";
tuonti suhteellinen aika alkaen'dayjs/plugin/relativeTime';
toimintoSovellus() {
 dayjs.extend (relativeTime);

konst päivämäärä = dayjs().add(7, 'päiviä')
konst suhteellinenPäiväys = date.fromNow(); // 7 päivässä
konst päivämäärä2 = dayjs().subtract(2, 'tunnit');
konst suhteellinenPäiväys2 = date2.toNow(); // 2 tunnissa
konst lastYear = dayjs().subtract(1, 'vuosi');
konst diff = päivämäärä.alkaen (viimeinen vuosi); // Vuodessa
konst ero2 = päivämäärä.to (viimeinen vuosi) // vuosi sitten
palata (



{ suhteellinen päivämäärä }</p>

{ suhteellinenPäiväys2 }</p>

{ ero }</p>

{ ero2 }</p>
 </div>
 )
}
viedäoletuksena Sovellus

The tästä lähtien() funktio näyttää suhteellisen aikajonon, joka edustaa eroa nykyisen ajan ja määritetyn päivämäärän välillä. Tässä esimerkissä tästä lähtien() näyttää eron Päivämäärä ja nykyinen aika.

The nyt() toiminto on samanlainen kuin tästä lähtien() funktio siten, että se näyttää merkkijonon, joka edustaa eroa määritetyn päivämäärän ja nykyisen ajan välillä. Kun soitat nyt() funktio, se palauttaa suhteellisen aikajonon nykyiseen aikaan.

Lopuksi käyttämällä alkaen () ja to () funktioita, voit näyttää suhteellisen aikajonon, joka edustaa kahden määritetyn päivämäärän välistä eroa. Tässä esimerkissä saat eron viime vuonna ja Päivämäärä käyttämällä alkaen () ja to () toimintoja.

Huomaa, että voit myös välittää valinnaisen loogisen argumentin tästä lähtien(), nyt(), alkaen (), ja to () menetelmät, joilla voit määrittää, sisällytetäänkö vai jätetäänkö loppuliite pois (esim. "ago" tai "in").

Esimerkiksi:

konst päivämäärä = dayjs().add(7, 'päiviä')
konst suhteellisenPäiväys = date.fromNow(totta); // 7 päivää
konst päivämäärä2 = dayjs().subtract(2, 'tunnit');
konst suhteellisenPäiväys2 = date2.toNow(totta); // 2 tuntia
konst lastYear = dayjs().subtract(1, 'vuosi');
konst diff = date.from (viime vuosi, totta) // vuosi
konst ero2 = date.to (viime vuosi, totta) // vuosi

Ohitus väärä argumenttiin näyttää päivämäärät päätteellä.

Hallitse päivämäärää ja kellonaikaa tehokkaasti

Päivämäärän ja kellonajan hallinta on olennainen osa kaikkia sovelluksia, ja Day.js tarjoaa helppokäyttöisen ja joustavan kirjaston näiden toimintojen käsittelemiseen React-sovelluksessa. Kun sisällytät Day.js: n projektiisi, voit helposti muotoilla päivämäärät ja kellonajat, jäsentää merkkijonoja ja muokata kestoja.

Lisäksi Day.js tarjoaa joukon laajennuksia, jotka laajentavat sen toimintoja ja tekevät siitä entistä tehokkaamman. Olitpa rakentamassa yksinkertaista kalenteria tai monimutkaista aikataulujärjestelmää, Day.js on erinomainen valinta päivämäärän ja ajan hallintaan React-sovelluksessasi.