Natively Format JavaScript Dates and Times
Elijah Manor • 5 months
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,falsehour-"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-fnslibrary 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.