date-fns-harjoitusympäristö

Mikä on date-fns?

date-fns on moderni JavaScript‑päivämääräkirjasto, joka tarjoaa kattavat, yhdenmukaiset ja luotettavat työkalut päivämäärien käsittelyyn JavaScriptissä. Toisin kuin natiivinen JavaScript‑Date‑objekti, jolla on monia omituisuuksia ja epäyhtenäisyyksiä, date-fns tarjoaa modulaarisen, funktionaalisen lähestymistavan päivämäärämuokkaukseen. Se on tree‑shakeable, eli sisällytät vain ne funktiot, joita todella käytät, pitäen pakettikoon mahdollisimman pienenä. Kirjasto tukee yli 200 funktiota, jotka kattavat kaiken muotoilusta ja jäsentämisestä vertailuun, manipulointiin ja paikalliseen käännökseen.

Miksi käyttää date-fns‑leikkikenttää?

Päivämäärien käsittely JavaScriptissä voi olla hankalaa – aikavyöhykkeet, muotoilumallit ja päivämääräaritmetiikka johtavat usein odottamattomiin tuloksiin. Leikkikenttäympäristö antaa mahdollisuuden kokeilla date-fns‑funktioita reaaliajassa, nähdä välittömät tulokset ja oppia API:a ilman koko projektin pystyttämistä. Se on täydellinen muotoilustringien testaamiseen, päivämäärälaskelmien debuggaamiseen tai nopeaan prototypointiin ennen kuin logiikka integroidaan sovellukseesi.

Työkalun kuvaus

date-fns Playground on interaktiivinen koodausympäristö, jonka avulla voit kirjoittaa ja suorittaa JavaScript‑koodia täyden date-fns‑kirjaston kanssa esiladattuna. Koko date-fns‑kirjasto on käytettävissä dateFns‑objektin kautta, jolloin pääset käsiksi kaikkiin 200+ funktioon. Koodi suoritetaan automaattisesti kirjoittaessasi (debounce‑tekniikalla), ja kaikki console.log, console.warn ja console.error -tulosteet näkyvät sisäänrakennetussa terminaalissa editorin alapuolella. Tämä tekee siitä ihanteellisen date-fns:n oppimiseen, päivämääräoperaatioiden testaamiseen ja erilaisten muotoiluvaihtoehtojen kokeilemiseen.

Esimerkit

Muotoile nykyinen päivämäärä:

const now = new Date();
console.log(dateFns.format(now, "MMMM do, yyyy"));
// Output: December 30th, 2025

Laske päivien määrä kahden päivämäärän välillä:

const start = new Date(2025, 0, 1);
const end = new Date(2025, 11, 31);
console.log(dateFns.differenceInDays(end, start) + " days");
// Output: 364 days

Lisää aikaa päivämäärään:

const today = new Date();
const nextWeek = dateFns.addWeeks(today, 1);
const nextMonth = dateFns.addMonths(today, 1);
console.log("Next week:", dateFns.format(nextWeek, "yyyy-MM-dd"));
console.log("Next month:", dateFns.format(nextMonth, "yyyy-MM-dd"));

Tarkista onko päivämäärä menneisyydessä vai tulevaisuudessa:

const date = new Date(2024, 5, 15);
console.log("Is past?", dateFns.isPast(date));
console.log("Is future?", dateFns.isFuture(date));

Jäsennä päivämäärämerkkijono:

const parsed = dateFns.parse("25/12/2025", "dd/MM/yyyy", new Date());
console.log(dateFns.format(parsed, "EEEE, MMMM do, yyyy"));
// Output: Thursday, December 25th, 2025

Ominaisuudet

• Täysi date-fns‑kirjasto: Pääset käsiksi kaikkiin 200+ date-fns‑funktioihin dateFns‑objektin kautta
• Live‑koodin suoritus: Koodi suoritetaan automaattisesti kirjoittaessasi älykkäällä debouncing‑tekniikalla
• Sisäänrakennettu terminaali: Näet konsolin tulosteen välittömästi ilman selaimen dev‑työkaluja
• Syntaksin korostus: JavaScript‑syntaksin korostus paremman luettavuuden vuoksi
• Virheenkäsittely: Suoritusaikaiset virheet näytetään selvästi terminaalin tulosteessa

Käyttötapaukset

• date-fns:n oppiminen: Kokeile eri funktioita ja näe tulokset heti ilman projektin asetusta
• Päivämäärämuodon testaus: Kokeile eri formatointimerkkijonoja löytääksesi tarkan haluamasi tulosmallin
• Päivämäärälaskennan prototypointi: Testaa monimutkaista päivämääräaritmetiikkaa kuten työpäivien lisääminen, aikavälien löytäminen tai päivämäärien vertailu
• Päivämäärälogiikan debuggaus: Eristä ja testaa päivämäärään liittyviä koodinpätkiä projekteistasi
• Nopeat päivämäärämuunnokset: Muunna päivämääräformaatteja tai laske aikavälejä lennossa

Yleiset date-fns‑funktiot

Formaattimerkkien viite