JavaScript Academy · Les

Datums en tijden opmaken

Geef datums weer met Intl.DateTimeFormat.

Les 2 van 413 stappen

Datums en tijden opmaken is een gratis JavaScript Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject JavaScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus JavaScript Academy bevat in totaal 4 lessen.

Intl.DateTimeFormat

Intl.DateTimeFormat maakt Date-objecten op volgens een landinstelling en vervangt kwetsbare handmatige tekenreeksen.

const dtf = new Intl.DateTimeFormat("en-US");
console.log(dtf.format(new Date("2026-05-29"))); // "5/29/2026"

Verschillen tussen landinstellingen

De volgorde van een datum verschilt per regio: in de VS is die maand/dag/jaar, in een groot deel van Europa dag/maand/jaar.

const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US").format(d)); // 5/29/2026
console.log(new Intl.DateTimeFormat("en-GB").format(d)); // 29/05/2026

Voorinstellingen voor datumnotatie

dateStyle biedt de voorinstellingen "full", "long", "medium" en "short" voor snelle, leesbare uitvoer.

const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US", { dateStyle: "full" }).format(d));
// "Friday, May 29, 2026"

Tijdnotatie

timeStyle werkt op dezelfde manier voor het tijdgedeelte en kan worden gecombineerd met dateStyle.

const d = new Date("2026-05-29T14:30:00");
console.log(new Intl.DateTimeFormat("en-US", { dateStyle: "medium", timeStyle: "short" }).format(d));
// "May 29, 2026, 2:30 PM"

Aangepaste opties voor onderdelen

Geef voor nauwkeurige controle onderdelen zoals year, month, day en weekday afzonderlijk op.

const d = new Date("2026-05-29");
const f = new Intl.DateTimeFormat("en-US", { weekday: "long", year: "numeric", month: "long", day: "numeric" });
console.log(f.format(d)); // "Friday, May 29, 2026"

Maandnotaties

month accepteert "numeric", "2-digit", "short", "long" en "narrow".

const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US", { month: "long" }).format(d));  // "May"
console.log(new Intl.DateTimeFormat("en-US", { month: "short" }).format(d)); // "May"

12- of 24-uursnotatie

hour12: true/false overschrijft de standaardinstelling van de landinstelling voor de kloknotatie.

const d = new Date("2026-05-29T20:05:00");
console.log(new Intl.DateTimeFormat("en-US", { hour: "numeric", minute: "2-digit", hour12: false }).format(d));
// "20:05"

Tijdzones

Geef een IANA-naam voor timeZone door om een datum in elke tijdzone weer te geven, onafhankelijk van de lokale tijdzone van de runtime.

const d = new Date("2026-05-29T12:00:00Z");
console.log(new Intl.DateTimeFormat("en-US", { timeStyle: "long", timeZone: "Asia/Tokyo" }).format(d));

formatToParts

formatToParts retourneert een array met tokens van verschillende typen, zodat je afzonderlijke onderdelen kunt opmaken of herschikken.

const parts = new Intl.DateTimeFormat("en-US").formatToParts(new Date("2026-05-29"));
console.log(parts.map((p) => p.type + ":" + p.value).join(" "));

Bereiken opmaken

formatRange(start, end) geeft een datumbereik compact weer en voegt gedeelde onderdelen samen.

const f = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric" });
console.log(f.formatRange(new Date("2026-05-01"), new Date("2026-05-05")));
// "May 1 – 5"

Niet-Gregoriaanse kalenders

De optie calendar ondersteunt systemen zoals "islamic", "hebrew" en "japanese".

const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US", { calendar: "japanese", dateStyle: "long" }).format(d));

Korte controle

Test datumopmaak.

Beantwoord dit in de interactieve les

Samenvatting: datums en tijden

Je hebt datums en tijden opgemaakt met Intl.DateTimeFormat, de voorinstellingen dateStyle/timeStyle en gedetailleerde opties voor onderdelen gebruikt, tijdzones, klokken met 12 of 24 uur, formatToParts, bereiken en alternatieve kalenders verwerkt. Hierna: relatieve tijd en meervoudsvormen.

Gratis beginnen

Leer JavaScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 59
Lessen: 200

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Datums en tijden opmaken” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “Datums en tijden opmaken”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus JavaScript Academy bevat in totaal 4 lessen.

Wat leer ik in “Datums en tijden opmaken”?

Geef datums weer met Intl.DateTimeFormat. Je oefent met JavaScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met JavaScript Academy te beginnen?

Ervaring vooraf is niet nodig. JavaScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.

Hoe lang duurt de les “Datums en tijden opmaken”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over JavaScript Academy?

Ja. Elke les over JavaScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar JavaScript Academy