bob.tsI've used a variety of tools over the years to manage date and time functionality in JavaScript. Here I am documenting the Vanilla JavaScript patterns for my own use.
See
Intl.DateTimeFormat()constructor for reference information beyond what is in this article.
Date.prototype.toLocaleString
There is also a generic method called toLocaleString and it can take all of the options from the toLocaleDateString and toLocaleTimeString methods.
Support
const date = new Date();
const options1 = {
month: 'short'
};
console.log(date.toLocaleString('en-US', options1));
// Aug
const options2 = {
hour: '2-digit'
};
console.log(date.toLocaleString('en-US', options2));
// 1 PM
const dateOptions = {
weekday: 'long',
day: 'numeric',
month: 'long',
year: 'numeric'
};
const timeOptions = {
hour12: true,
hour: 'numeric',
minute: '2-digit',
second: '2-digit',
};
const options3 = {
...timeOptions, ... dateOptions
};
console.log(date.toLocaleString('en-US', options3));
// Monday, Aug 10, 2020, 1:44:27 PM
Date.prototype.toLocaleDateString
The method accepts a locale and an optional options parameter where you can pass one or more flags to control the output behavior.
Support
const date = new Date();
console.log(date.toLocaleDateString('en-US'));
// 8/10/2020
const dateOptions1 = {
weekday: 'long',
day: 'numeric',
month: 'long',
year: 'numeric'
};
console.log(date.toLocaleDateString('en-US, dateOptions1);
// Monday, August 10, 2020
const dateOptions2 = {
day: 'numeric',
month: 'short'
};
console.log(date.toLocaleDateString('en-US, dateOptions2);
// Aug 10
const dateOptions3 = {
month: 'long'
};
console.log(date.toLocaleDateString('fr-FR, dateOptions3);
// juillet
Options
-
weekday:'narrow','short','long' -
day:'numeric','2-digit' -
month:'numeric','2-digit','narrow','short','long' -
year:'numeric','2-digit'
Date.prototype.toLocaleTimeString
Not only does this method support locale like the previous toLocaleDateString method, but it also supports a timeZone option.
Support
const date = new Date();
console.log(date.toLocaleTimeString('en-US'));
// 1:38:27 PM
const timeOptions1 = {
hour12: true,
hour: 'numeric',
minute: '2-digit',
second: '2-digit',
};
console.log(date.toLocaleTimeString('en-US', timeOptions1));
// 1:38:27 PM
const timeOptions2 = {
timeZone: 'America/Los_Angeles',
};
console.log(date.toLocaleTimeString('en-US', timeOptions2));
// 10:38:27 AM
Options
-
hour12:true,false -
hour:'numeric','2-digit' -
minute:'numeric','2-digit' -
second:'numeric','2-digit'
