JavaScript datum formatteren: builder en voorbeelden

JavaScript datumnotatie

JavaScript datum formatteren: Intl.DateTimeFormat-builder en voorbeelden | We.Inc

Datums formatteren in JavaScript zonder library: een live Intl.DateTimeFormat-builder, code voor YYYY-MM-DD en MM/DD/YYYY, tijdzones, relatieve tijd, periodes en de parse-valkuilen achter bugs waarbij de datum een dag verschuift.

Om een datum in JavaScript te formatteren gebruikt u Intl.DateTimeFormat of toLocaleDateString met een locale en opties, bijvoorbeeld date.toLocaleDateString("en-US", { dateStyle: "long" }) voor March 5, 2026. Gebruik toISOString() voor API's, de timeZone-optie om een andere zone te tonen en Intl.RelativeTimeFormat voor zinnen als 3 dagen geleden.

Snelle antwoorden

Behoefte
Gebruik

Een datum opslaan of versturen
toISOString()

Een datum aan mensen tonen
Intl.DateTimeFormat / toLocaleDateString

Een andere tijdzone
de timeZone-optie

"3 dagen geleden"
Intl.RelativeTimeFormat

Kies een locale en opties in de builder en kopieer de code die hij schrijft; de preview wordt door uw eigen browser geformatteerd. Daaronder een tabel met alledaagse notaties en uitvoerbare voorbeelden voor zones, relatieve tijd en periodes.

Kies een locale, of typ een willekeurige BCP 47-tag zoals fr-CA.
Kies een vooraf ingestelde stijl, of stel elk onderdeel apart in.
Stel desgewenst een tijdzone en 12- of 24-uursnotatie in.
Kopieer de gegenereerde code naar uw project.

Maak één Intl.DateTimeFormat aan en hergebruik die in lussen; een formatter bouwen is het trage deel.
Sla UTC op en verstuur UTC (ISO-strings of timestamps), en zet pas naar lokale tijd om bij het tonen.
Geef de locale van de bezoeker mee (navigator.language) in plaats van en-US hard te coderen als het publiek internationaal is.
Vermijd het parsen van dubbelzinnige strings zoals 03/05/2026; bouw datums op uit getallen of ISO-strings.

Veelgestelde vragen

Hoe formatteer ik een datum als YYYY-MM-DD in JavaScript?

Gebruik het lokale jaar, de maand plus één en de dag, aangevuld met padStart(2, "0"), en verbind ze met koppeltekens. toISOString().slice(0, 10) geeft ook die vorm, maar in UTC, dus rond middernacht kan het de verkeerde dag tonen.

Waarom zit mijn datum er een dag naast?

new Date("2026-03-05") wordt gelezen als middernacht UTC. Ten westen van Greenwich is het op dat moment lokaal nog de 4e. Parse met een tijd ("2026-03-05T00:00") of met new Date(2026, 2, 5) om lokale middernacht te krijgen.

Heb ik Moment.js nog nodig?

Niet voor formatteren. Intl dekt locales, tijdzones en relatieve tijd af in elke moderne browser. De eigen maintainers van Moment noemen het een legacy-project; voor rekenen met datums werkt een kleine library zoals date-fns of de nieuwere Temporal API (waar beschikbaar) goed.

Hoe toon ik een tijd in een bepaalde tijdzone?

Geef timeZone mee met een IANA-naam, bijvoorbeeld { timeZone: "America/New_York", timeStyle: "short" }. Het Date-object blijft hetzelfde moment; alleen de manier waarop het wordt geschreven verandert.

Datums op een bedrijfswebsite

Openingstijden, evenementdatums en blogdatums moeten overeenkomen met hoe uw bezoekers ze schrijven. Een Brits publiek leest 05/03 als 5 maart, een Amerikaans publiek als 3 mei, dus schrijf de maand voluit (5 maart 2026) als het publiek gemengd is.
Gebruik voor machineleesbare datums, zoals in een HTML time-element of structured data, de ISO-vorm in het datetime-attribuut en de leesbare vorm als zichtbare tekst.

Gangbare notaties

Gangbare notaties en de code voor elk

U wilt
Code
Geeft (en-US, 5 maart 2026, 14:07)

ISO 8601 voor API's
d.toISOString()
Hetzelfde moment in UTC, eindigend op Z

YYYY-MM-DD in lokale tijd
d.toLocaleDateString("en-CA")

MM/DD/YYYY
d.toLocaleDateString("en-US", { month: "2-digit", day: "2-digit", year: "numeric" })

DD/MM/YYYY
d.toLocaleDateString("en-GB")

Lange datum
d.toLocaleDateString("en-US", { dateStyle: "long" })
March 5, 2026

Weekdag en datum
{ weekday: "long", month: "long", day: "numeric" }
Thursday, March 5

Tijd, 12-uurs
d.toLocaleTimeString("en-US", { timeStyle: "short" })
2:07 PM

Tijd, 24-uurs
{ hour: "2-digit", minute: "2-digit", hourCycle: "h23" }

Relatief
new Intl.RelativeTimeFormat("en", { numeric: "auto" }).format(-1, "day")

Uitvoerbare voorbeelden

Datums veilig parsen

Een ISO-string met alleen een datum wordt gelezen als middernacht UTC, maar een datum-tijdstring zonder offset wordt gelezen als lokale tijd. Dat verschil veroorzaakt de meeste bugs waarbij de datum een dag verschuift.

YYYY-MM-DD zonder library

Bouw het op uit de lokale onderdelen met padStart. De truc met de en-CA-locale geeft hetzelfde resultaat, maar vertrouwt erop dat de notatie van die locale gelijk blijft.

Hetzelfde moment in meerdere tijdzones

timeZone neemt een IANA-naam. De Date zelf heeft geen zone; alleen de opmaak verandert. Let op: timeZoneName kan niet gecombineerd worden met dateStyle of timeStyle.

Relatieve tijd (3 dagen geleden, over 2 uur)

Intl.RelativeTimeFormat schrijft de woorden; u kiest de eenheid. Deze helper kiest de grootste eenheid die past.

Datumperiodes

formatRange haalt herhaalde delen weg, zodat een boeking van de 5e tot de 9e van dezelfde maand natuurlijk leest.

Eigen opmaak met formatToParts

Als geen enkele voorinstelling past, neemt u de gelokaliseerde onderdelen en zet u ze zelf in volgorde, bijvoorbeeld om de dag groter te stylen dan de maand.

Werkt u met epoch-seconden? Gebruik de

Unix timestamp converter

Intl.DateTimeFormat-opties die in de builder worden gebruikt

Optie
Waarden

(geen)

(uw zone)

Fout: {msg}

Intl.DateTimeFormat-builder

Datum en tijd

Locale

Tijdzone

Modus

Vooraf ingestelde stijlen

Elk onderdeel kiezen

Code kopiëren

Gratis beginnen · Geen creditcard nodig

Gerelateerd: Gidsen

Product

Voor wie

Functies

Bronnen

Bedrijf

Sitemap