toISOString
Stable UTC string for storage, logs and APIs.
Platform under construction
Date Formats
Date formatting turns a time value into text. Use ISO for machines and Intl for people.
const date = new Date("2026-01-01T09:30:00Z");
date.toISOString();
date.toLocaleDateString("en-GB");
Dates, Time & Intl
Do not confuse storage format with display format.
A stored date should be stable and unambiguous. ISO strings and timestamps are good storage or transport formats because they do not depend on visual language.
A displayed date should match the user, locale and context. Intl.DateTimeFormat and toLocaleDateString can show dates in a readable regional format.
Manual formatting is tempting, but it is easy to get separators, leading zeros, month names, time zones and languages wrong.
toLocaleDateString
Locale-aware date display.
Intl.DateTimeFormat
Reusable formatter with explicit locale and options.
Manual format
Only safe when the exact format is simple and controlled.
Examples
Make the date-time concept visible in the code.
Store ISO, display with Intl
const stored = "2026-01-01T09:30:00Z";
const date = new Date(stored);
const visible = new Intl.DateTimeFormat("en-GB", {
dateStyle: "long",
timeStyle: "short"
}).format(date);
Manual display with ambiguous meaning
const visible = "01/02/2026"; // Is this 1 February or January 2?
Code patterns
Reusable examples for quick reference.
Dates and time zones become much easier when every example names the concept it represents: instant, local display, UTC output, calendar date, formatted text or zoned time.
Machine format
Use ISO when another system must read the date.
const date = new Date("2026-01-01T09:30:00Z");
console.log(date.toISOString());
Locale date
Use locale formatting for human display.
const date = new Date("2026-01-01T09:30:00Z");
console.log(date.toLocaleDateString("en-GB"));
Named month display
Intl can show readable date parts.
const formatter = new Intl.DateTimeFormat("en-GB", {
dateStyle: "long"
});
console.log(formatter.format(new Date("2026-01-01T09:30:00Z")));
Date and time display
Include time when the time of day matters.
const formatter = new Intl.DateTimeFormat("en-GB", {
dateStyle: "medium",
timeStyle: "short",
timeZone: "UTC"
});
console.log(formatter.format(new Date("2026-01-01T09:30:00Z")));
Rules that matter
Separate storage, logic and display.
Date-time bugs usually start when storage format, calculation logic and user-facing display are treated as the same thing. Keep those responsibilities separate and the code becomes much easier to trust.
Use ISO for machines
APIs, logs and databases need unambiguous values.
Use Intl for users
People expect dates in a familiar language and order.
Include time zone when needed
A time without zone context can mislead users.
Avoid ambiguous numeric dates
01/02/2026 can mean different dates.
Reuse formatters
Creating an Intl formatter once is cleaner than repeating options.
Do not parse display text
Display strings are for people, not data recovery.
Production thinking
Time is a data-modeling problem before it is a formatting problem.
Why does this matter?
The same date can be correct for a machine and confusing for a person. Formatting is the boundary between those two worlds.
Accessibility
Readable date text should include enough context. Screen reader users should not have to guess date order.
Production note
Production applications should define storage format, transport format and display format separately.
SEO note
Use machine-readable dates for metadata and readable dates for visible content.
Live code lab
Change the HTML, CSS or JavaScript and run the result.
The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.
Mini assignment
Try this now.
- Change en-GB to nl-NL and compare the output.
- Remove timeStyle and check the difference.
- Change timeZone from UTC to Europe/Amsterdam.
Practice assignment
Do this before moving to the next topic.
- Format a date with toISOString.
- Format a date with toLocaleDateString.
- Create one Intl.DateTimeFormat formatter.
Try it yourself
Format one date three ways
Self-check
Before you continue, prove that you understand Date Formats.
Dates are full of traps. Explain the concept first, then run the code and check whether the output matches your mental model.
- Can you explain why ISO is good for machines?
- Can you explain why Intl is good for people?
- Can you explain why display text should not be parsed back?
- Can you explain why ambiguous numeric dates are risky?
- Can you explain when timeStyle matters?