Flash cards
Review the key moves
What is the main idea behind Temporal Display Formats?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___ date = Temporal.PlainDate.from("2026-05-17");Put the learning moves in the order that makes the concept easiest to apply.
Temporal dates can be serialized as strings in different ways:
| Method | Description |
|---|---|
| toString() | To a date string in the RFC 9557 / ISO 8601 format. |
| toLocaleString() | To language-sensitive string like "en-US". |
| Intl.DateTimeFormat() | When you need more control over the output. |
PlainDate toString()
The toString() method returns a standard ISO string.
Example
const date = Temporal.PlainDate.from("2026-05-17");
let text = date.toString();PlainTime toString()
A PlainTime value is formatted as a time string.
Example
const time = Temporal.PlainTime.from("14:30:15");
let text = time.toString();PlainDateTime toString()
A PlainDateTime value includes both date and time.
Example
const dateTime = Temporal.PlainDateTime.from("2026-05-17T14:30:15");
let text = dateTime.toString();ZonedDateTime toString()
A ZonedDateTime string includes the offset and time zone.
Example
const zoned = Temporal.ZonedDateTime.from("2026-05-17T14:30:15+01:00[Europe/Oslo]");
let text = zoned.toString();Remove Smaller Time Units
You can control how much detail to include.
For example, you can hide seconds or milliseconds.
Example
const time = Temporal.PlainTime.from("14:30:15.123");
let text = time.toString({ smallestUnit: "minute" });Result
14:30Control Fractional Digits
You can choose how many decimal digits to include.
Example
const time = Temporal.PlainTime.from("14:30:15.123456789");
let text = time.toString({ fractionalSecondDigits: 3 });Result
14:30:15.123PlainDate toLocaleString()
Use toLocaleString() to format a value using the user's locale.
Example
const date = Temporal.PlainDate.from("2026-05-17");
let text_us = date.toLocaleString("en-US");
let text_de = date.toLocaleString("de-DE");The output depends on the chosen locale.
ZonedDateTime toLocaleString()
Example
const zoned = Temporal.ZonedDateTime.from("2026-05-17T14:30:15+01:00[Europe/Oslo]");
let text = zoned.toLocaleString("en-US", {
dateStyle: "full", timeStyle: "short"
});Format with Intl.DateTimeFormat
Use Intl.DateTimeFormat when you need more control over the output.
Example
const date = Temporal.PlainDate.from("2026-05-17");
const formatter = new Intl.DateTimeFormat("en-US", {
year: "numeric", month: "long", day: "numeric"
});
let text = formatter.format(date);Format Date and Time Together
You can format a PlainDateTime with both date and time options.
Example
const dateTime = Temporal.PlainDateTime.from("2026-05-17T14:30:15");
const formatter = new Intl.DateTimeFormat("en-GB", {
year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit"
});
let text = formatter.format(dateTime);ZonedDateTime toLocaleString()
The Intl.DateTimeFormat() method does not accept a Temporal.ZonedDateTime object as input.
This design choice prevents conflicts between the time zone held by the ZonedDateTime and the time zone defined in the formatter.
The best solution is to use toLocaleString() instead.
Example
const zoned = Temporal.ZonedDateTime.from("2026-05-17T14:30:15+01:00[Europe/Oslo]");
let text = zoned.toLocaleString("en-US", {
dateStyle: "full", timeStyle: "short"
});When to Use Each Method
- Use toString() for standard ISO output.
- Use toLocaleString() for simple local formatting.
- Use Intl.DateTimeFormat for custom formatting.