date-fns Speelveld

Wat is date-fns?

date-fns is een moderne JavaScript‑datumhulpmiddelbibliotheek die uitgebreide, consistente en betrouwbare tools biedt voor het werken met datums in JavaScript. In tegenstelling tot het native JavaScript Date‑object, dat veel eigenaardigheden en inconsistenties heeft, biedt date-fns een modulaire, functionele benadering van datummanipulatie. Het is tree‑shakeable, wat betekent dat je alleen de functies opneemt die je daadwerkelijk gebruikt, waardoor de bundelgrootte minimaal blijft. De bibliotheek ondersteunt meer dan 200 functies die alles dekken, van formatteren en parseren tot vergelijken, manipuleren en lokaliseren van datums.

Waarom een date-fns playground gebruiken?

Werken met datums in JavaScript kan lastig zijn—tijdzones, opmaakpatronen en datumrekenkunde leiden vaak tot onverwachte resultaten. Een playground‑omgeving stelt je in staat om date-fns‑functies in realtime te experimenteren, directe output te zien en de API te leren zonder een volledig project op te zetten. Het is perfect voor het testen van opmaak‑strings, het debuggen van datumcalculaties, of het snel prototypen van datumlogica voordat je deze in je applicatie integreert.

Toolbeschrijving

De date-fns Playground is een interactieve codeeromgeving waarmee je JavaScript‑code kunt schrijven en uitvoeren met de volledige date-fns‑bibliotheek vooraf geladen. De volledige date-fns‑bibliotheek is beschikbaar via het dateFns‑object, waardoor je toegang hebt tot alle 200+ functies. Code wordt automatisch uitgevoerd terwijl je typt (met debouncing), en alle console.log, console.warn en console.error‑uitvoer verschijnt in de ingebouwde terminal onder de editor. Dit maakt het ideaal voor het leren van date-fns, het testen van datumoperaties en het experimenteren met verschillende opmaakopties.

Voorbeelden

Formatteer de huidige datum:

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

Bereken dagen tussen twee datums:

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

Voeg tijd toe aan een datum:

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"));

Controleer of een datum in het verleden of de toekomst ligt:

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

Parse een datumstring:

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

Functies

• Volledige date-fns Bibliotheek: Toegang tot alle 200+ date-fns functies via het dateFns object
• Live Code-uitvoering: Code wordt automatisch uitgevoerd terwijl je typt met slimme debouncing
• Ingebouwde terminal: Bekijk console‑output direct zonder browser‑dev‑tools
• Syntax highlighting: JavaScript‑syntax‑highlighting voor betere code‑leesbaarheid
• Foutafhandeling: Runtime‑fouten worden duidelijk weergegeven in de terminaloutput

Gebruikssituaties

• date-fns leren: Experimenteer met verschillende functies en zie resultaten direct zonder projectopzet
• Datumopmaak testen: Probeer verschillende format‑strings om het exacte output‑patroon te vinden dat je nodig hebt
• Datumcalculatie prototypen: Test complexe datumrekenkunde zoals het toevoegen van werkdagen, het vinden van intervallen, of het vergelijken van datums
• Datumlogica debuggen: Isoleer en test datumgerelateerde code‑fragmenten uit je projecten
• Snelle datumconversies: Converteer tussen datumformaten of bereken tijdsverschillen on‑the‑fly

Veelvoorkomende date-fns functies

Referentie van format‑tokens