Natively Format JavaScript Dates and Times

Elijah Manor 2 months
499 words 3 min read

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)

Quick 3 minute Overview

The above video is hosted on


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.


  • weekday - "narrow", "short", "long"
  • year - "numeric", "2-digit"
  • month - "numeric", "2-digit", "narrow", "short", "long"
  • day - "numeric", "2-digit"
const date = new Date();

// 7/19/2020

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

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

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

  date.toLocaleDateString('fr-FR', {
    month: 'long',
// juillet


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.


  • timeZone - List of Time Zones
  • hour12 - true, false
  • hour - "numeric", "2-digit"
  • minute - "numeric", "2-digit"
  • second - "numeric", "2-digit"
const date = new Date();

// 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

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


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

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


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.