Introduction

Here is a hypothetical situation for you. Assume you are using a website dealing with shopping and once you have done the purchase, it shows the order will be delivered by,

• nedjelja, 28. juni 2020 17:45 or
• 2020年6月28日星期日 17:44 or
• ఆదివారం, 28 జూన్ 2020, సాయంత్రం 5:44
• Sunday, 28 June 2020 6:23 PM

Considering you do not understand any of those languages, you may not appreciate this at all. Here are the problems you may face:

• It is informing you of the date and time by when you can expect to receive the order. But, you are not familiar with the language and the format.
• Even if you have guessed it to be date-and-time, you may still be wondering about the time here. Is the time is in IST(India Standard Time)? CST(China Standard Time)? GMT(Greenwich Mean Time), or anything else?
• Is it a 12-hours clock or a 24-hours clock? The time is in the morning or evening?

Talking about the feelings here, how do we feel here being the end-user? Confused? Irritated? Frustrated?

Now, let's take ourselves to the other end of it. Think, we have coded something which resulted in an end-customer dissatisfaction because we have underplayed the Locale Aware(i18n-Compliant) Date Time Format in our UI pages.

In this story, I'll be explaining the importance of the Locale-Aware Date Time Format and how to take care of it just by using some simple methods and APIs available publicly. Hope you enjoy it.

What is Locale aware Date-Time Format?

Before I answer that, let us understand the meaning of Locale in the world of Computer Software Engineering.

In computing, a locale is a set of parameters that defines the user's language, region, and any special variant preferences that the user wants to see in their user interface. - Wikipedia

One of the variant preferences is the way date and time should be formatted which is most useful and making sense to the user.

A Locale aware Date-Time Format is the format(or representation) of date and time that a user understands easily because it is used in his/her region, language. - Wikipedia

Here are some examples,

• People from France will understand this better, 28 juin 2020 18:20. See the month(juin) and the time is in 24-hours format.
• People from India will understand 28 June 2020 6:20 PM. The month says June and the time is in 12-hours format with an am-pm indication in it.
• A Spanish speaking will understand it as, 28 de jun. de 2020 18:20

Fixing to specific date-time formats like, dd/mm/yyyy hh:mm:ss or mmm-dd-yyyy, etc is not a great idea at all when your app is targeted for the people beyond one particular region and language. So, how do we take care of it? Let us see that in the next section of the story.

How to use it Right?

Most of the enterprise applications and public-facing apps are meant to have users from different regions and languages. Taking care of Internationalization(i18n) helps localizing the strings(or texts).

However, we as web developers may still miss using the appropriate date-time format based on the regions and languages.

The popular date-time utility libraries like Moment.js or date-fns provide this support very well.

Moment.js - Multiple Locale Support

Moment.js provides multiple locale support for date-time format. A locale can be set easily by doing this,

// get client(browser) language
const getLang = () => {
    return navigator.languages[0];
}

// moment expects the lang code to passed in lower case
const langLocale = getLang().toLowerCase();

// set the locale
moment.locale(langLocale);

Hereafter, we can get the locale-aware date-time format by calling the format method passing the locale flags like, L, LTS, LT, LLL etc.

// My browser language is English(India)
moment.locale();         // en-in

// Here are the examples
moment().format('LT');   // 9:21 PM
moment().format('LTS');  // 9:21:27 PM
moment().format('L');    // 28/06/2020
moment().format('l');    // 28/6/2020
moment().format('LL');   // 28 June 2020
moment().format('ll');   // 28 Jun 2020
moment().format('LLL');  // 28 June 2020 9:21 PM
moment().format('lll');  // 28 Jun 2020 9:21 PM
moment().format('LLLL'); // Sunday, 28 June 2020 9:21 PM
moment().format('llll'); // Sun, 28 Jun 2020 9:21 PM

If your browser lang is fr(French), the above formats would return according to the French locale,

moment.locale();         // fr

moment().format('LT');   // 21:26
moment().format('LTS');  // 21:26:13
moment().format('L');    // 28/06/2020
moment().format('l');    // 28/6/2020
moment().format('LL');   // 28 juin 2020
moment().format('ll');   // 28 juin 2020
moment().format('LLL');  // 28 juin 2020 21:26
moment().format('lll');  // 28 juin 2020 21:26
moment().format('LLLL'); // dimanche 28 juin 2020 21:26
moment().format('llll'); // dim. 28 juin 2020 21:26

Here is the link to the format function usage for various needs. Hope it will be useful.

date-fns - date time format

Just like Moment.js, date-fns is another powerful library for many useful date-time functions. It also supports the locale-aware formatting of date and time. See the following table for locale-aware date-time formatting. For more details, please visit this link:

Screen capture from https://date-fns.org/docs/format

Conclusion

Locale aware date-time formatting can often be misunderstood by web developers as they could assume, passing a format like dd-mm-yyyy should take care of it.

This is not true. We need to understand, the date-time format expectations change from region to region and language to language.

This story was all about giving an introduction to this concept, Hope it was useful.

If it was useful to you, please Like/Share so that, it reaches others as well. To get e-mail notifications on my latest posts, please subscribe to my blog by hitting the Subscribe button at the top of the page.