Natively Format JavaScript Dates and Times
1 min read

screenshot 1

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 quite good these days when formatting dates and times and the browser support is great too! (see below)

Date.prototype.toLocaleDateString()

Let's first start with the toLocaleDateString() method. Maybe you want a date that only contains numbers, or how about a very long and wordy date, or even one that outputs in a different language. This method might be able to provide what you need. 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()

Sometimes you just need to output the time portion of a JavaScript Date object. Thankfully, you can reach for the toLocaleTimeString method. Not only does this method support locale like the cooresponding toLocaleDateString method, but it also supports a timeZone option! Cross browser support for this method is also very suprising.

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 good.

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 it's 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.

Newsletter

You may also enjoy my Manorisms newsletter containing Front-End Web developer news, articles, quotes, comics, and more....

Join me as I explore various parts of Front-End Web development. I'll share resources that I find useful, explore topics that I'm investigating, and publish silly puns and comics that I find funny.

Don't worry, I won't share your information with any third parties.