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