Moment.js on loistava kirjasto päivämäärän ja ajanhallinnan tehokkaaseen käsittelyyn React-sovelluksissa.

Päivämäärän ja kellonajan hallinta Reactissa voi olla haaste niille, jotka eivät tunne alaa. Onneksi on olemassa useita kirjastoja, jotka voivat auttaa sinua päivämäärän ja kellonajan hallinnassa Reactissa. Yksi näistä kirjastoista on Moment.js.

Moment.js on kevyt kirjasto, jossa on yksinkertainen tapa käsitellä ja muotoilla päivämääriä ja aikoja JavaScriptissä.

Moment.js-kirjaston asentaminen

Moment.js kirjasto on a paketti päivämäärän ja kellonajan toimintojen hallintaan JavaScriptissä. Moment.js-kirjaston asentaminen on ensimmäinen vaihe Moment.js: n käytössä React-sovelluksessa. Voit tehdä tämän suorittamalla seuraavan komennon terminaalissasi:

npm asennushetki

Kun asennus on valmis, voit käyttää Moment.js: ää React-komponentissasi.

Moment.js: n käyttäminen päivämäärän ja ajan näyttämiseen

Moment.js: n avulla voit näyttää päivämäärät ja kellonajat tietyssä muodossa React-sovelluksessasi. Käytä kirjastoa tuomalla hetki asennetusta paketista.

instagram viewer 
tuonti Reagoi alkaen'reagoi';
tuonti hetki alkaen'hetki';
toimintoSovellus() {


konst päivämäärä = hetki().format("MMMM PP VVVV");
konst aika = hetki().format("HH mm ss");


palata (




 Tänäänpäivämäärä on { päivämäärä } 


 Kellonaika on { aika } </p>
 </div>
 )
}


viedäoletuksena Sovellus

The hetki () menetelmä luo uuden hetken objektin, joka edustaa tiettyä ajankohtaa. The muoto() menetelmä muotoilee hetken objektin merkkijonoesitykseen.

The muoto() menetelmä ottaa merkkijonoargumentin, joka määrittää halutun muodon hetken objektille. Merkkijonoargumentti voi sisältää yhdistelmän kirjaimia ja erikoismerkkejä, joilla kullakin on tietty merkitys.

Jotkut näistä erikoismerkeistä ovat:

  • YYYY: Vuosi neljällä numerolla
  • YY: Vuosi kahdella numerolla
  • MM: Kuukausi kahdella numerolla
  • M: Kuukausi yhdellä tai kahdella numerolla
  • MMMM: Kuukausi sanoin
  • DD: Kuukauden päivä kahdella numerolla
  • D: Kuukauden päivä yhdellä tai kahdella numerolla
  • Tehdä: Kuukauden päivä järjestysluvulla
  • HH: Tunti kahdella numerolla
  • H: Yksi tai kaksi numeroa sisältävä tunti
  • mm: Minuutti kahdella numerolla
  • m: Minuutti, jossa on yksi tai kaksi numeroa
  • ss: Toinen kahdella numerolla
  • s: Toinen yhdellä tai kahdella numerolla

Kun Sovellus edellisen koodilohkon komponentti renderöidään, nykyinen päivämäärä ja kellonaika näytetään määritetyssä muodossa näytöllä.

The hetki () menetelmä voi ottaa merkkijonon päivämäärä- tai aikaargumentin. Kun hetki () -menetelmällä on merkkijono päivämäärä tai aika-argumentti, se luo hetken objektin, joka edustaa tätä päivämäärää tai aikaa. Merkkijono voi olla eri muodoissa, kuten ISO 8601, RFC 2822 tai Unix-aikaleima.

Esimerkiksi:

konst päivämäärä = hetki ('1998-06-23').muoto("MMMM PP VVVV");

Moment.js: n käyttäminen päivämäärän ja ajan manipuloimiseen

Moment.js-kirjasto tarjoaa myös useita tapoja muokata päivämääriä ja aikoja. Näiden menetelmien avulla voit lisätä tai vähentää aikavälejä, asettaa tiettyjä arvoja päivämäärä- ja aikakomponenteille ja suorittaa muita soveltuvia toimintoja.

Esimerkiksi:

tuonti Reagoi alkaen'reagoi';
tuonti hetki alkaen'hetki';
toimintoSovellus() {


konst huomenna = hetki().add(1, 'päivä').muoto("Tee MMMM, VVVV");
konst aika = hetki().vähennys(1, 'tunnin').muoto("HH: mm: ss");
konst viime vuosi = hetki().set('vuosi', 2022).aseta('kuukausi', 1).muoto("Tee MMMM, VVVV");
konst tunti = hetki().get('tunnin');


palata (


"Sovellus">
Huomennapäivämäärä on { huomenna }


Tämä oli aika: { aika }, tunti sitten</p>


{ viime vuosi }</p>


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


viedäoletuksena Sovellus

Tässä esimerkissä sinä ilmoittaa seuraavat JavaScript-muuttujat: huomenna, aika, viime vuonna, ja tunnin. Nämä neljä muuttujaa käyttävät erilaisia ​​Moment.js-kirjaston menetelmiä päivämäärän ja ajan muokkaamiseen.

The huomenna muuttuja käyttää lisätä() tapa lisätä yksi päivä nykyiseen päivämäärään. The lisätä() menetelmä lisää aikaa tiettyyn Moment-objektiin. Funktiolla on kaksi argumenttia: kestoarvo ja lisättävä aikayksikköä edustava merkkijono. Yksikkö voisi olla vuotta, kuukaudet, viikkoa, päivää, tuntia, pöytäkirja, ja sekuntia.

Voit myös vähentää ajan käyttämällä vähentää() menetelmä. Tässä tapauksessa aika muuttuja käyttää vähentää() tapa vähentää yksi tunti nykyisestä ajasta.

Käyttämällä aseta() menetelmä, viime vuonna muuttuja asettaa vuodeksi 2022 ja kuukauden helmikuuhun (koska tammikuu esitetään kuukaudella 0). The aseta() menetelmä määrittää tietyn aikayksikön Moment-objektille.

Kanssa saada() menetelmällä, voit hakea tietyn ajan. The saada() menetelmä ottaa yhden argumentin, aikayksikön.

Moment.js: n käyttäminen päivämäärän ja ajan jäsentämiseen

Toinen Moment.js: n hyödyllinen ominaisuus on sen kyky jäsentää päivämäärät ja kellonajat merkkijonoista. Tästä voi olla hyötyä, kun työskentelet ulkoisista lähteistä peräisin olevien tietojen kanssa.

Jos haluat jäsentää päivämäärän tai kellonajan merkkijonosta, sinun on käytettävä hetki () menetelmä. Tässä tapauksessa hetki () menetelmä ottaa kaksi argumenttia, päivämäärämerkkijonon ja muotomerkkijonon.

Tässä on esimerkki siitä, kuinka voit käyttää hetki () tapa jäsentää päivämäärät ja kellonajat:

tuonti Reagoi alkaen'reagoi';
tuonti hetki alkaen'hetki';
toimintoSovellus() {


konst päivämäärä = hetki ('2920130000', "Do-MMMM-YYYY").tähän mennessä();
konsoli.log( päivämäärä );


palata (


</div>
 )
}
viedäoletuksena Sovellus

Yllä olevassa koodilohkossa hetki () menetelmä jäsentää tämän merkkijonon '2920130000' käyttämällä "Do-MMMM-YYYY" -muotoista merkkijonoa. The tähän mennessä() menetelmä muuntaa hetkellisen objektin muotoon natiivi JavaScript-päivämääräobjekti.

The tähän mennessä() menetelmä ei ota argumentteja ja palauttaa JavaScript Date -objektin, joka edustaa samaa päivämäärää ja aikaa kuin hetken objekti.

Suhteellisen ajan näyttö

Moment.js-kirjaston avulla voit muotoilla ja näyttää suhteellisen ajan. Voit tehdä tämän käyttämällä tästä lähtien() ja nyt() menetelmiä. Nämä menetelmät näyttävät ajan tietyn päivämäärän ja nykyisen kellonajan välillä.

Esimerkiksi:

tuonti Reagoi alkaen'reagoi';
tuonti hetki alkaen'hetki';
toimintoSovellus() {


konst eilen = hetki().vähentä(7, 'päivä');
konst aika1 = eilen.fromNow(); // 7 päivää sitten
konst aika2 = eilen.toNyt(); // 7 päivässä


palata (




{ aika1 }</p>


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


viedäoletuksena Sovellus

Tässä esimerkissä tästä lähtien() menetelmä palauttaa määritetystä päivämäärästä kuluneen suhteellisen ajan, kun taas nyt() menetelmä palauttaa suhteellisen ajan nykyiseen aikaan.

Lisää Moment.js: lle

Moment.js on tehokas kirjasto, joka tarjoaa yksinkertaisen tavan muokata ja muotoilla päivämääriä ja aikoja JavaScriptissä. Olet oppinut käsittelemään, näyttämään ja jäsentämään päivämääriä ja aikoja Reactissa Moment.js: n avulla.

Moment.js tarjoaa useita muita menetelmiä, kuten local, startOf, endOf ja niin edelleen. Annettujen tietojen ansiosta olet kuitenkin enemmän kuin valmis aloittamaan Moment.js: n käytön React-sovelluksessasi.