date-fns Lekplats

Vad är date-fns?

date-fns är ett modernt JavaScript‑datumbibliotek som erbjuder omfattande, konsekventa och pålitliga verktyg för att arbeta med datum i JavaScript. Till skillnad från det inbyggda JavaScript‑Date‑objektet, som har många egenheter och inkonsekvenser, erbjuder date-fns ett modulärt, funktionellt tillvägagångssätt för datummanipulation. Biblioteket är tree‑shakeable, vilket betyder att du bara inkluderar de funktioner du faktiskt använder, vilket håller paketstorleken minimal. Biblioteket stödjer över 200 funktioner som täcker allt från formatering och parsning till jämförelse, manipulation och lokalisering av datum.

Varför använda en date-fns‑playground?

Att arbeta med datum i JavaScript kan vara knepigt – tidszoner, formateringsmönster och datumaritmetik leder ofta till oväntade resultat. En playground‑miljö låter dig experimentera med date-fns‑funktioner i realtid, se omedelbar output och lära dig API‑et utan att sätta upp ett komplett projekt. Den är perfekt för att testa formatsträngar, felsöka datumberäkningar eller snabbt prototypa datumlogik innan du integrerar den i din applikation.

Verktygsbeskrivning

date-fns Playground är en interaktiv kodmiljö som låter dig skriva och köra JavaScript‑kod med hela date-fns‑biblioteket förladdat. Hela date-fns‑biblioteket är tillgängligt via objektet dateFns, vilket ger dig åtkomst till alla 200+ funktioner. Koden körs automatiskt när du skriver (med debouncing), och alla console.log, console.warn och console.error‑utdata visas i den inbyggda terminalen under editorn. Detta gör den idealisk för att lära sig date-fns, testa datumoperationer och experimentera med olika formateringsalternativ.

Exempel

Formatera aktuellt datum:

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

Beräkna dagar mellan två datum:

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

Lägg till tid på ett datum:

const today = new Date();
const nextWeek = dateFns.addWeeks(today, 1);
const nextMonth = dateFns.addMonths(today, 1);
console.log("Nästa vecka:", dateFns.format(nextWeek, "yyyy-MM-dd"));
console.log("Nästa månad:", dateFns.format(nextMonth, "yyyy-MM-dd"));

Kontrollera om ett datum ligger i det förflutna eller framtiden:

const date = new Date(2024, 5, 15);
console.log("Är förflutet?", dateFns.isPast(date));
console.log("Är framtida?", dateFns.isFuture(date));

Parsning av en datumsträng:

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

Funktioner

• Fullt date-fns‑bibliotek: Åtkomst till alla 200+ date-fns‑funktioner via dateFns‑objektet
• Live‑kodexekvering: Koden körs automatiskt när du skriver med smart debouncing
• Inbyggd terminal: Visa konsolutdata omedelbart utan att öppna webbläsarens utvecklingsverktyg
• Syntax‑highlighting: JavaScript‑syntaxhighlighting för bättre kodläsbarhet
• Felfångst: Runtime‑fel visas tydligt i terminalens output

Användningsområden

• Lära sig date-fns: Experimentera med olika funktioner och se resultat direkt utan projektuppsättning
• Testa datumformat: Prova olika formatsträngar för att hitta exakt den output‑mall du behöver
• Prototypa datumberäkningar: Testa komplex datumaritmetik som att lägga till arbetsdagar, hitta intervaller eller jämföra datum
• Felsöka datumlogik: Isolera och testa datumrelaterade kodsnuttar från dina projekt
• Snabba datumkonverteringar: Konvertera mellan datumformat eller beräkna tidsdiff på språng

Vanliga date-fns‑funktioner

Referens för format‑token