Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

JavaScript Dates

JavaScript Date Formatting

Written by Published

toLocaleDateString formats a date the way a reader in a given place expects.

Never build a date string by joining the parts yourself.

The rules differ by country and the built-in formatters know them.

Example

Example

javascript

const date = new Date(Date.UTC(2026, 0, 15));

console.log(date.toLocaleDateString("en-GB", { timeZone: "UTC" }));

The output is 15/01/2026, the British order.

The Formatting Methods

toLocaleDateString formats the date part.

toLocaleTimeString formats the time part.

toISOString gives the machine-readable form.

Syntax

Syntax

javascript

date.toLocaleDateString(locale, options);

Pass a timeZone option for a predictable result.

Different Locales

The same moment reads differently around the world.

Example

Example

javascript

const date = new Date(Date.UTC(2026, 0, 15));
const options = { timeZone: "UTC" };

console.log(date.toLocaleDateString("en-GB", options));
console.log(date.toLocaleDateString("en-US", options));

Britain puts the day first; the United States puts the month first.

Long Formats

Options control how much of each part is shown.

Example

Example

javascript

const date = new Date(Date.UTC(2026, 0, 15));

console.log(date.toLocaleDateString("en-GB", {
  timeZone: "UTC",
  day: "numeric",
  month: "long",
  year: "numeric"
}));

The output is 15 January 2026.

Including the Weekday

weekday adds the day name.

Example

Example

javascript

const date = new Date(Date.UTC(2026, 0, 15));

console.log(date.toLocaleDateString("en-GB", {
  timeZone: "UTC",
  weekday: "long",
  day: "numeric",
  month: "long"
}));

The names come from the locale, so they translate automatically.

The ISO Format

toISOString is for storing and sending, not for showing.

It is always UTC and always the same shape.

Example

Example

javascript

const date = new Date(Date.UTC(2026, 0, 15));

console.log(date.toISOString());
console.log(date.toISOString().slice(0, 10));

Slicing the first ten characters gives just the date.

Reusing a Formatter

Intl.DateTimeFormat is faster when formatting many dates.

Example

Example

javascript

const formatter = new Intl.DateTimeFormat("en-GB", { timeZone: "UTC" });

console.log(formatter.format(new Date(Date.UTC(2026, 0, 15))));
console.log(formatter.format(new Date(Date.UTC(2026, 5, 1))));

Build it once and reuse it for the whole list.

Complete Example

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Date Formatting</title>
</head>
<body>

  <h1>Date Formatting</h1>

  <p id="out"></p>

  <script>
    const date = new Date(Date.UTC(2026, 0, 15));
    const options = { timeZone: "UTC" };

    document.getElementById("out").innerHTML =
      "British: " + date.toLocaleDateString("en-GB", options) +
      "<br>American: " + date.toLocaleDateString("en-US", options) +
      "<br>Long: " + date.toLocaleDateString("en-GB", {
        timeZone: "UTC", day: "numeric", month: "long", year: "numeric"
      }) +
      "<br>ISO: " + date.toISOString().slice(0, 10);
  </script>

</body>
</html>

Try It Yourself

Run the above example in the Try It Editor.

Try a short month:

Change month: "long" to "short".

Important Points

  • toLocaleDateString formats for a human reader.
  • The locale decides the order of the parts.
  • Options control how long each part is.
  • toISOString is for storage, not display.
  • Intl.DateTimeFormat is faster when reused.

Conclusion

Building date strings by hand gets the order wrong for most of the world.

The locale formatters already know every one of those rules.

Use ISO for machines and locale formatting for people.

PreviousJavaScript DatesNextJavaScript Date Arithmetic