Moment.js-harjoitusympäristö

Mikä on Moment.js?

Moment.js on laajalti käytetty JavaScript‑kirjasto päivämäärien jäsentämiseen, validointiin, muokkaamiseen ja muotoiluun. Ennen nykyaikaisempien vaihtoehtojen ilmaantumista Moment.js oli de‑facto -standardi päivämäärien käsittelyyn JavaScript‑sovelluksissa. Se tarjoaa siistin, ketjutettavan API:n, jonka avulla päivämäärien kanssa työskenteleminen on intuitiivista ja suoraviivaista. Vaikka uusia kirjastoja kuten date-fns ja Luxon on olemassa, Moment.js on edelleen laajasti käytössä vanhoissa koodikannoissa ja sitä ylläpidetään aktiivisesti bugikorjauksia varten. Moment.js:n ymmärtäminen on olennaista kehittäjille, jotka työskentelevät olemassa olevien projekteiden parissa, jotka riippuvat siitä.

Miksi käyttää päivämäärän käsittelykirjastoa?

JavaScriptin natiivi Date‑objekti on tunnetusti hankala käyttää. Sillä on epäyhtenäinen käyttäytyminen eri selaimissa, hämmentävä kuukausien indeksointi (0‑11 sen sijaan, että olisi 1‑12), rajoitetut muotoiluvaihtoehdot, eikä siinä ole sisäänrakennettua aikavyöhyketukea. Moment.js:n kaltaiset kirjasto­ratkaisut korjaavat nämä ongelmat tarjoamalla yhdenmukaisen, hyvin dokumentoidun API:n. Ne käsittelevät reunatapauksia, kuten kesäaikamuutoksia, karkausvuosia ja lokaaleja muotoiluja automaattisesti, mikä säästää kehittäjiltä virhealtista päivämäärälogiikkaa alusta alkaen.

Työkalun kuvaus

Moment.js Playground on interaktiivinen selainpohjainen ympäristö Moment.js‑kirjaston kokeilemiseen. Kirjoita ja suorita JavaScript‑koodia suoraan editorissa, jossa on täysi pääsy Moment.js:ään ja Moment Timezoneen. Playground suorittaa koodisi automaattisesti kirjoittaessasi (debouncing‑tekniikalla) ja näyttää kaikki konsolin tulosteet terminaalin kaltaisessa paneelissa alapuolella. Se on täydellinen Moment.js:n oppimiseen, päivämäärämuotoilujen testaamiseen, päivämäärälaskennan virheenkorjaukseen ja aikavyöhykkeiden logiikan prototypointiin ilman kehitysympäristön asennusta.

Esimerkit

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

const now = moment();
console.log(now.format("MMMM Do, YYYY"));
// Output: December 30th, 2025

console.log(now.format("dddd, h:mm A"));
// Output: Monday, 3:45 PM

Jäsennä erilaisia päivämääräformaatteja:

const date1 = moment("2025-12-25", "YYYY-MM-DD");
const date2 = moment("25/12/2025", "DD/MM/YYYY");
const date3 = moment("Dec 25, 2025", "MMM D, YYYY");

console.log(date1.format("dddd")); // Thursday
console.log(date2.isValid()); // true
console.log(date3.month()); // 11 (0-indexed)

Laske suhteellinen aika:

const past = moment().subtract(3, "days");
const future = moment().add(2, "weeks");

console.log(past.fromNow()); // 3 days ago
console.log(future.fromNow()); // in 14 days
console.log(past.from(future)); // 17 days ago

Päivämääräaritmetiikka:

const date = moment("2025-01-15");

const nextMonth = date.clone().add(1, "month");
const lastWeek = date.clone().subtract(1, "week");
const endOfMonth = date.clone().endOf("month");

console.log(nextMonth.format("YYYY-MM-DD")); // 2025-02-15
console.log(lastWeek.format("YYYY-MM-DD")); // 2025-01-08
console.log(endOfMonth.format("YYYY-MM-DD")); // 2025-01-31

Työskentele kestojen kanssa:

const start = moment("2025-01-01");
const end = moment("2025-12-31");

const duration = moment.duration(end.diff(start));

console.log(duration.asDays() + " days"); // 364 days
console.log(duration.asWeeks() + " weeks"); // 52 weeks
console.log(duration.humanize()); // a year

Vertaa päivämääriä:

const date1 = moment("2025-06-15");
const date2 = moment("2025-12-25");

console.log(date1.isBefore(date2)); // true
console.log(date1.isAfter(date2)); // false
console.log(date1.isSame(date2, "year")); // true
console.log(date1.isBetween("2025-01-01", "2025-08-01")); // true

Työskentele aikavyöhykkeiden kanssa:

const now = moment();

console.log(now.tz("America/New_York").format("h:mm A z"));
console.log(now.tz("Europe/London").format("h:mm A z"));
console.log(now.tz("Asia/Tokyo").format("h:mm A z"));

Ominaisuudet

• Täysi Moment.js‑kirjasto: Pääsy kaikkiin Moment.js‑funktioihin, mukaan lukien jäsentäminen, muotoilu, muokkaus ja vertailu
• Aikavyöhykkeiden tuki: Moment Timezone on esiladattu työskentelemään aikavyöhykkeiden kanssa maailmanlaajuisesti
• Live‑koodin suoritus: Koodi suoritetaan automaattisesti kirjoittaessasi älykkäällä debouncingilla
• Sisäänrakennettu terminaali: Katso konsolin tulosteita välittömästi avaamatta selaimen dev‑työkaluja
• Syntaksin korostus: JavaScript‑syntaksin korostus parempaa koodin luettavuutta varten
• Virheenkäsittely: Suoritusaikaiset virheet näytetään selkeästi terminaalin tulosteessa

Käyttötapaukset

• Moment.js:n oppiminen: Kokeile API:a ja näe tulokset heti ilman projektin asetuksia
• Muotoilumerkkijonon testaus: Kokeile erilaisia muotoilutunnisteita saadaksesi tarkan haluamasi päivämäärän tulosteen
• Päivämäärälaskennan virheenkorjaus: Testaa monimutkaista päivämääräaritmetiikkaa ennen sen toteuttamista sovelluksessasi
• Aikavyöhykkeiden muunnokset: Muunna ajat nopeasti eri aikavyöhykkeiden välillä
• Vanhan koodin ylläpito: Testaa Moment.js‑koodinpätkiä ylläpidettäessä olemassa olevia sovelluksia

Yleiset muotoilutunnisteet

Yleinen metodiviite

Aikayksiköt

Moment.js tukee seuraavia aikayksiköitä add, subtract, startOf, endOf ja diff -operaatioissa:

• years / y – vuodet / y
• quarters / Q – neljännekset / Q
• months / M – kuukaudet / M
• weeks / w – viikot / w
• days / d – päivät / d
• hours / h – tunnit / h
• minutes / m – minuutit / m
• seconds / s – sekunnit / s
• milliseconds / ms – millisekunnit / ms