Natively Format JavaScript Dates and Times

For many years I used the moment.js library for parsing, manipulating, and formatting JavaScript dates and times. More recently I've started using the date-fns library instead. However, it's interesting to note that native browser capabilities are pretty capable these days when formatting dates and times, and the browser support is quite impressive too! (see below)

Quick 3 minute Overview

Date.prototype.toLocaleDateString()

Let's first start with the toLocaleDateString() method. Imagine that you want a date that only contains numbers, or maybe you want a very long and wordy date or one that outputs in a different language. If that’s the case, then toLocaleDateString might be the method you need for date formatting. The method accepts a locale and an optional options parameter where you can pass one or more flags to control the output behavior.

Options

• weekday - "narrow", "short", "long"
• year - "numeric", "2-digit"
• month - "numeric", "2-digit", "narrow", "short", "long"
• day - "numeric", "2-digit"

const date = new Date()

console.log(date.toLocaleDateString('en-US'))
// 7/19/2020

const dateOptions = {
    weekday: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric',
}

console.log(date.toLocaleDateString('en-US', dateOptions))
// Sunday, July 19, 2020

console.log(
    date.toLocaleDateString('en-US', {
        month: 'short',
        day: 'numeric',
    })
)
// Jul 19

console.log(
    date.toLocaleDateString('fr-FR', {
        month: 'long',
    })
)
// juillet

Date.prototype.toLocaleTimeString()

Occasionally, you just need to output the time portion of a JavaScript Date object. Fortunately, in cases like these, you can use the toLocaleTimeString method. Not only does this method support locale, like the corresponding toLocaleDateString method, but it also supports a timeZone option! Cross browser support for this method is also surprising good.

Options

• timeZone - List of Time Zones
• hour12 - true, false
• hour - "numeric", "2-digit"
• minute - "numeric", "2-digit"
• second - "numeric", "2-digit"

const date = new Date()

console.log(date.toLocaleTimeString('en-US'))
// 11:30:34 PM

const timeOptions = {
    hour12: true,
    hour: 'numeric',
    minute: '2-digit',
    second: '2-digit',
}

console.log(date.toLocaleTimeString('en-US', timeOptions))
// 11:30:33 PM

console.log(
    date.toLocaleTimeString('en-US', {
        timeZone: 'America/Los_Angeles',
    })
)
// 9:30:33 PM

Date.prototype.toLocaleString()

There is also a generic method called toLocaleString and you can pass one or all of the options from the toLocaleDateString and toLocaleTimeString methods into this method. Cross Browser support for this method is also very robust.

const date = new Date()

console.log(date.toLocaleString('en-US', { month: 'short' }))
// Jul

console.log(date.toLocaleString('en-US', { hour: '2-digit' }))
// 11 PM

console.log(date.toLocaleString('en-US', { ...timeOptions, ...dateOptions }))
// Sunday, July 19, 2020, 11:30:33 PM

Playground

The following is a CodeSandbox playground where you can experiment with the above browser APIs.

NOTE: I do still use the date-fns library for many of its helpful methods, but I'm much more aware of the native browser APIs and try to use them when or if they are appropriate for my needs.