Formatting Date and Time by using Internationalization API

     As I wrote in my older posts, DateTime data type can be really pain. In this post, I want to write about dates in JavaScript. It can be a challenge to display the date in right format in front-end using JavaScript specially if you have a global web application. You need to respect your user's location and try to display data in different format. Or you might want to display name of the day or month rather than number. You might end up with code like this.

const Idontlikehardcodes = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; 
let dynamicDt = new Date(); 
document.write("Month is " + Idontlikehardcodes[dynamicDt.getMonth()]);

What's wrong with this code? It works right? My feedback for this is, display a month name should not be this difficult and it should not include creating hard coded names in your code. Also, what if you want to display the name of a month in different language? Do we need to hardcore that too? There should be an easy way to deal with this without adding any frameworks or libraries. I want to introduce you JavaScript Internationalization API, It can solve this problem and many problems you might have with date in JavaScript without any hardcore..

 Following code gives you the month in text for the default culture.

const myDt = new Date(2020,2,18); 
const myMonth = myDt.toLocaleString('default', {month: 'long'}); 
console.log(myMonth);

If your date is in UTC format, you can display it in different time zones.

const utcDt = new Date(Date.UTC(2020, 2, 18, 3, 0, 0)); 
console.log(utcDt.toLocaleString('en-GB', { timeZone: 'UTC' })); 


console.log(utcDt.toLocaleString('en-US')); 

Output will be:

19/12/2012, 22:00:00       <-- British English format
12/19/2012, 10:00:00 PM    <-- US English format

You can write a custom format and use it too.

var myDt = new Date(Date.UTC(2020,2,18,3,0,0)); 
var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', timeZone:'GMT', timeZoneName : 'short' }; 
console.log(date.toLocaleString('en-US', options)); 

Thursday, December 20, 2012, UTC

Do you want to display time in 24-hour format? You can do that by adding hour12: false to options.

var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)); 
var t24 = { hour: "2-digit", minute: "2-digit", hour12: false }; console.log(date.toLocaleDateString('en-US', t24));

12/19/2012, 22:00

Here is some of the common formatter option you might want to know.

weekday

Format	Example
"long"	Monday
"short"	Mon
"narrow"	M

year

Format	Example
"numeric"	2019
"2-digit"	19

month

Format	Example
"numeric"	2
"2-digit"	02
"long"	February
"short"	Feb
"narrow"	F

day

Format	Example
"numeric"	5
"2-digit"	05

hour

Format	Example
"numeric"	5
"2-digit"	05

minute

Format	Example
"numeric"	5
"2-digit"	05

second

Format	Example
"numeric"	5
"2-digit"	05

timeZoneName

Format	Example
"long"	Eastern
"short"	GMT-5