Ylitä JavaScriptin sisäänrakennetut päivämäärä- ja aikaominaisuudet jollakin näistä korvaavista kirjastoista.

JavaScriptin sisäänrakennettu tuki päivämäärän käsittelyyn on hyödyllinen, mutta se voi olla hankala käyttää. Monimutkaiset toiminnot, kuten aikavyöhykkeen muuntaminen ja päivämäärän muotoilu, ovat usein haastavia.

Onneksi saatavilla on useita paketteja, jotka tekevät JavaScriptin päivämäärien ja aikojen kanssa työskentelystä vähemmän stressaavaa. Täällä opit joistakin näistä paketeista ja kuinka voit aloittaa työskentelyn näiden pakettien parissa.

Mitä tulee päivämäärien ja kellonaikojen käsittelyyn, natiivi JavaScript Date -objekti on rajoitettu toiminnallisuus.

Moment.js, JavaScript-kirjasto, esitteli monia ominaisuuksia, jotka eivät ole käytettävissä alkuperäisessä Date-objektissa. Tämän seurauksena siitä on tullut kirjasto päivämäärien ja kellonaikojen käsittelyyn.

Asenna Moment.js npm: llä suorittamalla seuraava komento projektihakemistosta:

npm Asentaa hetki

Asennuksen jälkeen voit tuoda Moment.js: n projektiisi ja suorittaa toimintoja kirjaston kanssa:

instagram viewer 
konst hetki = vaatia('hetki');
konst nyt = hetki();
konst nowString = now.format("VVVV-KK-PP HH: mm: ss");
konsoli.Hirsi(`Nykyinen päivämäärä ja aika on ${nowString}`);

Tämä koodinpätkä tuo Moment.js-kirjaston ja luo hetkiobjektin käyttämällä nykyistä päivämäärää ja aikaa hetki () toiminto. Sitten se näyttää, kuinka luotu päivämääräobjekti muotoillaan merkkijonoksi muoto() menetelmä, joka käyttää argumenttina päivämäärä/aika-muotoa.

Tämän kirjaston avulla voit myös lisätä ja vähentää aikavälejä:

konst addTenMinutes = hetki().add(10, 'pöytäkirja');
konsoli.Hirsi(`${addTenMinutes.format('h: mm a')}`);
konst subtractTwoDays = hetki().subtract(2, 'päiviä');
konsoli.Hirsi(`${subtractTwoDays.format("ppdd, MMMM Do VVVV")}`);

Ohjelma kirjaa konsoliin kaksi muuttujaa eri muodoissa. Ensimmäinen, lisää Kymmenen minuuttia, säilyttää tuloksen, kun nykyiseen päivämäärään ja kellonaikaan lisätään 10 minuuttia. Toinen, vähennä kaksi päivää, sisältää nykyisen päivämäärän ja kellonajan arvon, josta on vähennetty kaksi päivää.

Moment.js voi suorittaa muita toimintoja, kuten tarkistaa karkausvuodet ja muuntaa päivämäärämuodosta toiseen.

On tärkeää huomata, että Moment.js: ää ei enää ylläpidä sen ydinkehittäjätiimi. Kehittäjät neuvovat käyttämään vaihtoehtoa, kuten Luxon.js.

Luxon.js on vankka ja nykyaikaisempi JavaScript-kirjasto päivämäärien käsittelyyn. Vaihtoehto Moment.js: lle, se käsittelee vanhemman kirjaston rajoituksia, kuten muuttuvuutta.

Voit asentaa Luxonin npm: llä ja tuoda sen sitten Treffiaika luokkaa Node.js-projektissasi käyttämällä vaatia() toiminto:

konst { DateTime } = vaatia("luxon");

Luxonissa DateTime-objektit viittaavat aikainstanssiin, jotka ulottuvat millisekunteihin asti.

Voit luoda uusia Treffiaika objektit ja käyttää niiden komponentteja, kuten vuosi, kuukausi, minuutti ja sekunti:

konst nyt = DateTime.now();
konst vuosi = nyt.vuosi;
konst minuutti = nyt.minuutti;
konst toinen = nyt.toinen;

Tämä koodi luo uuden Treffiaika objekti, joka edustaa nykyistä päivämäärää ja aikaa käyttämällä nyt() menetelmä. Sitten se käyttää kyseisen päivämäärän komponentteja käyttämällä vuosi, minuutti, ja toinen ominaisuuksia.

Suuri ero Luxon.js: n ja Moment.js: n välillä on sen muuttumaton luonne. Kaikki DateTime-objektit ovat muuttumattomia Luxonissa, mikä tarkoittaa, että et voi muokata DateTime-ominaisuuksia. Sen sijaan voit luoda uusia DateTime-esiintymiä olemassa olevista.

Esimerkiksi:

konst nyt = DateTime.now();
konst huomenna = nyt.plus({ päivää: 1 });

Tämä koodi luo uuden Treffiaika objekti nimeltä huomenna perustuu nyt objektia käyttämällä plus menetelmällä, välittämällä sille arvon 1 päivä argumenttina. Plus-menetelmä luo uuden DateTime-objektin, johon on lisätty määritetty määrä päiviä alkuperäiseen objektiin.

Toinen Luxon.js: n etu on sen luotettava aikavyöhyketuki, joka on välttämätöntä päivämäärien ja aikojen käsittelyssä nykyaikaisissa verkkosovelluksissa. Kirjasto käyttää Internationalization API nykyaikaisissa selaimissa tarjotakseen tarkan aikavyöhykkeen tuen.

Yksi Luxon.js: n huonoista puolista on kuitenkin sen rajalliset yhteisön resurssit.

Date-fns on erittäin kevyt JavaScript-kirjasto, joka on suunniteltu käsittelemään päivämääriä ja kellonaikoja. Se perustuu alkuperäiseen JavaScript-objektiin.

Date-fns käyttää toiminnallisia ohjelmointitekniikoita ja sisältää muuttumattoman ominaisuuden, joka tekee päivämäärien käsittelystä yksinkertaisempaa ja vähentää virheiden todennäköisyyttä koodissasi.

Kun olet asentanut date-fns: n komennolla npm, tuo paketti ohjelmaan vaativalla funktiolla:

konst { muoto, lisäpäivät } = vaatia('date-fns');

Date-fns on modulaarinen. Se sisältää paljon toimintoja, joihin pääset käsiksi purkamalla paketin, kuten yllä olevassa koodilohkossa näkyy. Koodi tuo vain muodon ja addDays-funktiot date-fns-kirjastosta.

Tässä on esimerkki näiden molempien toimintojen käytöstä:

konst tänään = UusiPäivämäärä();
konst formattedDate = muoto (tänään, 'vvvv-KK-pp');
konsoli.log (formattedDate); 
konst huomenna = muoto (addDays (tänään, 1), 'vvvv-KK-pp');
konsoli.log (huomenna);

Tämä ohjelma esittelee JavaScriptin date-fns-kirjaston käyttöä päivämäärien muotoiluun ja käsittelyyn.

Se luo uuden Päivämäärä nykyistä päivämäärää edustava objekti. Se muotoilee nykyisen päivämäärän käyttämällä muoto funktio date-fn-kirjastosta.

Sitten se käyttää AddDays -funktiolla luodaan uusi päivämääräobjekti, joka edustaa huomista päivämäärää, muotoilee sen käyttämällä muoto toiminto ja kirjaa sekä nykyisen että huomisen päivämäärän konsoliin "vvvv-KK-pp" muodossa.

Date-fns: n käytön haittapuoli on, että se ei tarjoa aikavyöhyketukea. Sen sijaan se käyttää erillistä kirjastoa työskennelläkseen aikavyöhykkeiden kanssa aputoimintojen avulla.

Day.js, toinen erittäin kevyt kirjasto, on hyvä valinta, jos etsit muuttumatonta, pienempää ja nopeampaa vaihtoehtoa Moment.js: lle.

Voit asentaa Day.js: n pakettina JavaScript-projektiisi suorittamalla seuraavan npm-komennon:

npm Asentaa dayjs

Voit tuoda Day.js: n projektiisi asennuksen jälkeen käyttämällä seuraavaa koodia:

konst dayjs = vaatia("dayjs")

Tässä on joitain Day.js: n perustoimintoja ja -menetelmiä

konst nyt = dayjs();
konst päivämäärä = dayjs('2023-03-23', "VVVV-KK-PP");


konst kuukausi = päivämäärä.kuukausi();


konst formattedDate = date.format("MMMM D, VVVV");
konst nextWeek = date.add(1, 'viikko');

Yllä oleva koodi luo uuden Day.js-objektin, joka edustaa nykyistä päivämäärää ja aikaa, jäsentää päivämäärän merkkijonon mukautetussa muodossa ja hakee kuukauden Päivämäärä muuttuja. Se näyttää myös kuinka muotoilla ja lisätä päivämäärän esiintymä.

Kuten Date-fns, Day.js ei voi tarjota aikavyöhyketukea yksinään. Day.js käyttää laajennusjärjestelmää, mikä tekee sen käytöstä hämmentävää.

Katetuista paketeista Day.js muistuttaa eniten Moment.js: ää. Tämä helpottaa vaihtamista näiden kahden välillä tarvittaessa.

Oikean kirjaston valitseminen sovelluksellesi

Oikean päivämäärä- ja aikakirjaston valitseminen JavaScript-sovelluksellesi on tärkeä päätös, jolla voi olla suuri vaikutus koodisi laatuun ja ylläpidettävyyteen.

Jokaisella täällä käsitellyllä kirjastolla on vahvuutensa ja heikkoutensa, joten on tärkeää arvioida vaatimukset huolellisesti ennen päätöksen tekemistä.