You don't need Libraries for internationalisation (i18n) of Dates

All apps use of dates in some sort of way. And one common operation with a date is to display it in a readable format.

To make it readable and understandable, we need to localize the date-strings. And along with localization, also the formats which are familiar to the user.

There are so many libraries to easily work with localization or internationalization (i18n) of the Date Objects. Some of these libraries are:

• moment
• dayjs (An underdog in this area)
• date-fns

But, you might not need any of these libraries to have some basic Formatting and Localization on the Date Objects.

You can use Date.prototype.toLocaleString and its customizable API to get the localized output easily. Like in the following example, we will use the Locale String to easily get the Readable Date desired by the user:

const date = new Date() // Date from current timestamp
console.log(+date, date);
/* 👆
  1581422692394
  Tue Feb 11 2020 13:04:52 GMT+0100 (Central European Standard Time)
*/

// For above date, let's see different locales
console.log(
  'For USA Users: ', date.toLocaleString('en-US'))
// 👆 For USA based Users:  2/11/2020, 1:04:52 PM

console.log(
  'For UK Users: ', date.toLocaleString('en-GB'))
// 👆 For UK based Users:  11/02/2020, 13:04:52

console.log(
  'For DE Users: ', date.toLocaleString('de-DE'))
// 👆 For DE based Users:  11.2.2020, 13:04:52

But it is not that; you have only seen the basic operations.

This function also accepts the second parameter as a JavaScript Object. You can customize the result of toLocaleString by adding some specific keys & related values to this JS Object. For example, you can remove Weekday; change Month Display etc.

Lets looks at some examples of more customization to the output with the second parameter

const date = new Date() // Date from current timestamp
console.log(+date, date);
/* 👆
  1581422692394
  Tue Feb 11 2020 13:04:52 GMT+0100 (Central European Standard Time)
*/

const readableDate = date.toLocaleString('de-DE', {
  day: "2-digit",
  month: "long",
  year: "2-digit"
});
// 👆 "11. Februar 20"
/*
year: "numeric" → "11. Februar 2020"
month: "numeric" → "11.2.20"
month: "2-digit" → "11.02.20"
month: "short" → "11. Feb. 20"
month: "narrow" → "11. F 20"
*/

The signature of the object to customize the output of the toLocaleString function can have the following keys. Though there are many more keys, I am listing here only the common ones.

• dateStyle: [ 'full', 'long', 'medium', 'short' ]
• timeStyle: [ 'full', 'long', 'medium', 'short' ]
• timeZone: Time Some from IANA TimeZone Database
• month: [ 'numeric', '2-digit', 'long', 'short', 'narrow' ]
• year: [ 'numeric', '2-digit' ]
• weekday: [ 'long', 'short', 'narrow' ]
• day, hour, minute and second: [ 'numeric', '2-digit' ]
• timeZooneName: [ 'long', 'short' ]

Things to Notice

Few things to pay attention here:

• Any numeric value has these two values: numeric and 2-digit
• And string values are from full, long, medium, short and narrow
• Anything with possible one character Abbreviation can have narrow as its value

Another big thing to notice here is:

you don’t need to stick to a specific timeZone if you need the desired output.

For . as the separator, use de-DE; for / as the separator, use en-GB and etc.
You can read more about this function atMDN documentation of toLocaleString.

Specific Functions

Like the above function toLocaleStrung; there are exactly the same functions for only Date or Time. Hence you don't need to do some string operation to separate Date and Time.

Date

For only Date outputs, you can use date.toLocaleDateString

const readableDate = date.toLocaleDateString('de-DE', {
  day: "2-digit",
  month: "long",
  year: "2-digit"
});

console.log(readableDate);
// 👆 11. Februar 20

You can read more about this function at MDN documentation of toLocaleDateString.

Time

If you want only the Time strings, you can use date.toLocaleTimeString

const readableTime = date.toLocaleTimeString('de-DE', {
  hour: "2-digit",
  minute: "2-digit",
  second: "2-digit"
});

console.log(readableTime);
// 👆 13:04:52

You can read more about this function at MDN documentation of toLocaleString.

Conclusion

Dates are very important information to display in any application. Applications which are as simple as a ToDo or this Blog. Dates are also complex objects.

But you don’t need heavy lifting libraries all the time. This post gives a brief idea to have some desired outputs without jumping into heavy (but very useful) packages.

What do you use for Date object manipulation?

Let me know through comments 💬 or on Twitter at @patel_pankaj_ and @time2hack

If you find this article helpful, please share it with others 🗣

Subscribe to the blog to receive new posts right to your inbox.

Originally published at https://time2hack.com on February 18, 2020.