JavaScript

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

Dates are one of very critical info to display in any application; & you don’t need libraries all the time. You already have localization on Date strings

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

All apps use of dates in some sort of way. And one common operation with 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:

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, lets 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 a desired output.
For . as separator, use de-DE; for / as separator, use en-GB and etc.

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


Specific Functions

Like above function toLocaleString; there are exactly 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. Application 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 on how to achieve some desired Formatting on Date Objects.

What do you use for Date object manipulation?

Let me know through comments 💬 or on Twitter at @patelpankaj 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.


Credits

Photo by Charles Deluvio on Unsplash

Hey There! You have made it this far.

Would you like to subscribe via email?

You've successfully subscribed to Time to Hack!
Close