Formatting a date with toLocaleString

Hey ,

I'm thrilled to help you learn JavaScript. Unfortunately, you've landed on a page where you cannot access with your current purchase.

Please upgrade (use this link) access this content.

I'm super eager to help you learn more!

Formatting a date with toLocaleString

You can also use toLocaleString to format a date in JavaScript. It’s easier to use toLocaleString than to create your own functions. It’s more powerful too.

toLocaleString

toLocaleString takes in two parameters: locale and options.

const dateString = date.toLocaleString(locale, options)

Let’s talk about options first.

options

By default, toLocaleString creates a string that looks like this: 1/3/2019, 11:10:10 PM. It’s not very helpful.

options lets you define what goes into the created string.

Here are the possible properties you can use:

  1. weekday:
    1. long produces Thursday
    2. short produces Thu
    3. narrow produces T
  2. year:
    1. numeric produces 2019
    2. 2-digit produces 19
  3. month:
    1. long produces January
    2. short produces Jan
    3. narrow produces J
    4. numeric produces 1
    5. 2-digit produces 01
  4. day:
    1. numeric produces 3
    2. 2-digit produces 03
  5. hour:
    1. numeric produces 3
    2. 2-digit produces 03
  6. minute:
    1. numeric produces 3
    2. 2-digit produces 03
  7. second:
    1. numeric produces 3
    2. 2-digit produces 03
  8. hour12: If true, produces time in a 12h format; if false, produces time in 24h format. If omitted, defaults to how the locale creates time.
  9. timeZone: The timezone of the created string based on the IANA Timezone Database. (Check this Wikipedia article for an easy reference to the Timezone database).
  10. timeZoneName:
    1. long produces the name of the timezone, like Singapore Standard Time
    2. short produces GMT +8

Every property mentioned above is optional. If you omit options, you’ll get the default string.

const date = new Date(2019, 0, 3, 23, 10, 10)
const string = date.toLocaleString('en-US')

console.log(string) // 1/3/2019, 11:10:10 PM

If you provide options, you’ll create a string with the properties you defined. Properties that are left out will not be created in the result string.

In the example below, we produce the day of the week with weekday.

const weekdayOnly = { weekday: 'long' }
const result = date.toLocaleString('en-US', weekdayOnly)

console.log(result) // Thursday

Here’s another example to produce year, month, and day information with year, month, and day properties.

const options = {
  year: 'numeric',
  month: 'long',
  day: '2-digit'
}
const result = date.toLocaleString('en-US', options)

console.log(result) // January 03, 2019

locale

options tells toLocaleString what to include, locale tells toLocaleString how to create the string. It takes the city’s date preferences into account.

For example, people in United States write dates in DD/MM/YYYY, while people in United Kingdom write dates in MM/DD/YYYY. The en-US and en-GB locales takes this into account.

const options = {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit'
}

const us = date.toLocaleString('en-US', options)
const uk = date.toLocaleString('en-GB', options)

console.log(us) // 01/03/2019
console.log(uk) // 03/01/2019

locale also lets you create dates with different languages easily.

const options = {
  year: 'numeric',
  month: 'long',
  day: '2-digit',
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric'
}

const chinese = date.toLocaleString('zh-Hans', options)
const korean = date.toLocaleString('ko-KR', options)
const danish = date.toLocaleString('da', options)

console.log(chinese) // 2019年1月03日 下午11:10:10
console.log(korean) // 2019년 1월 03일 오후 11:10:10
console.log(danish) // 03. januar 2019 11.10.10 PM

You can get a complete list of locales in the IANA Subtag Registry. (But I found the IANA Subtag Registry quite useless. I use this Stack Overflow post instead. You have to change _ to - to use the locales in JavaScript).

Other toLocaleString methods

JavaScript contains four methods to create a locale string. They are:

  1. toLocaleString (which you learned in this lesson)
  2. toLocaleDateString (returns the date portion from toLocaleString)
  3. toLocaleTimeString (returns the time portion from toLocaleString)
  4. Intl.DateTimeFormat (same as toLocaleString, but its syntax is slightly different)

Practice

Use toLocaleString to create the following date formats:

  1. Thu, 03/01/2019
  2. January 2019
  3. 3 January 2019
  4. Jan 3 2019
  5. 2019-03-02