How to Convert a Date String into a Human-Readable Format

The Quick Path to Readable Dates in JavaScript

Date strings from APIs frequently arrive in ISO 8601 format—for example, 2020-05-25T04:00:00Z, where the trailing "Z" signals UTC. While this is machine-friendly, it's not exactly pleasant to read. A cleaner display, such as May 25, 2020, usually requires only a few lines of code without pulling in a full date library.

The core approach involves the Intl.DateTimeFormat options object, a new Date instance, and the .toLocaleDateString() method:

const dateString = '2020-05-14T04:00:00Z'

const formatDate = (dateString) => {
  const options = { year: "numeric", month: "long", day: "numeric" }
  return new Date(dateString).toLocaleDateString(undefined, options)
}

Breaking Down the Formatting Steps

The first piece is an options object that declares exactly how the output should look. There are many additional configuration choices beyond this common example, but this shows the typical essentials:

const options = { year: "numeric", month: "long", day: "numeric" }

Next, a new Date instance is created. This object represents a single, unambiguous moment in time, independent of any platform or locale:

return new Date(dateString)

Finally, the formatting options are applied by invoking .toLocaleDateString() on that instance:

return new Date(dateString).toLocaleDateString(undefined, options)

Handling Locales

Notice the undefined argument. Omitting the locale here causes the method to fall back on the system's default locale. For sites that serve international audiences, you can explicitly pass a locale string—such as 'en-US' or 'de-DE'—or use the user's selected region. A convenient way to look up supported locale codes is via the locale-codes npm package.