const - JS | lectureNumbers, Dates, Intl & Timers

JavaScript has a new Internationalization API. It allows us to format numbers and strings according to different languages easily. So with this new API, we can make our applications support different languages for users worldwide, which is pretty important. For example, currencies or dates are represented completely differently in Europe, the US, or Asia.

Now there are a lot of language-specific things that we can do with the Internationalization API. But in this section, we'll briefly discuss formatting dates and numbers. Starting with dates in this lecture.

Let's say we have a date object. We can use the Intl.DateTimeFormat class to format it. We can pass in a locale, which is a string that represents the language. And then we can call the format method on the object. And this will return a string with the date formatted according to the locale.

Let's start by creating a new date object.

const date = new Date();

Now to format this date object in another language, we use the Intl namespace from the internationalization API. For times and dates, we use the DateTimeFormat function. And all we need to pass to this function is a so-called locale. This is a string that represents the language. So, for example, if we want to format the date in German, we pass in de-DE.

new Intl.DateTimeFormat('de-DE');

The above highlighted line creates a so called formatter object for the german language. And on this object, we can call the format method, in which we pass in the date object we want to format. And this will return a string with the date formatted according to the german language.

console.log(new Intl.DateTimeFormat('de-DE').format(date)); // 20.9.2022
console.log(new Intl.DateTimeFormat('en-US').format(date)); // 9/20/2022
console.log(new Intl.DateTimeFormat('en-GB').format(date)); // 20/9/2022
console.log(new Intl.DateTimeFormat('fr-FR').format(date)); // 20/09/2022

You can get a list of locales that are supported by the Intl API here.

Now, this is the most straightforward way of formatting dates and times. But we can take it to the next level and add some options to customize it a little more. For example, the above examples only displays the date and not the time. Hence, we can change that by providing an options object to the DateTimeFormat function.

const options = {
  hour: 'numeric',
  minute: 'numeric',
};

console.log(new Intl.DateTimeFormat('de-DE', options).format(date)); // 16:52
console.log(new Intl.DateTimeFormat('en-US', options).format(date)); // 4:52 PM
console.log(new Intl.DateTimeFormat('en-GB', options).format(date)); // 16:52
console.log(new Intl.DateTimeFormat('fr-FR', options).format(date)); // 16:52

As you can see, we now get the time. But on the other hand, the date is gone 😅. This is because we only specified the time options. So we can add the date options as well.

const options = {
  hour: 'numeric',
  minute: 'numeric',
  day: 'numeric',  month: 'numeric',  year: 'numeric',};

console.log(new Intl.DateTimeFormat('de-DE', options).format(date)); // 20.9.2022, 21:30
console.log(new Intl.DateTimeFormat('en-US', options).format(date)); // 9/20/2022, 9:30 PM
console.log(new Intl.DateTimeFormat('en-GB', options).format(date)); // 20/09/2022, 21:30
console.log(new Intl.DateTimeFormat('fr-FR', options).format(date)); // 20/09/2022, 21:30

If we want to display the name of the month, instead of numeric, we can use long or short.

const options = {
  ...
  month: 'long',  ...
};

console.log(new Intl.DateTimeFormat('de-DE', options).format(date)); // 20. September 2022, 21:41 

We can also specify the weekday in our options object.

const options = {
  ...
  weekday: 'long',  ...
};

console.log(new Intl.DateTimeFormat('fr-FR', options).format(date)); // mardi 20 septembre 2022, 21:43 

In many situations,n it actually makes more sense to not define the locale manually, but instead, to simply get it from the user's browser. And that's actually pretty easy to do as well. All we have to do is to call the navigator object and then the language property. And this will return a string with the language of the user's browser.

const language = navigator.language;
console.log(language); // en-US

As you can see mine is set to en-US. And now I can use this to format the date.

console.log(new Intl.DateTimeFormat(language, options).format(date)); // Tuesday, September 20, 2022, 9:54 PM

Now, if you try it yourself, your date should be formatted according to your browser's language.

To finish this lecture, you can find all the configuration options for the DateTimeFormat function here.