Date and Time Localization in the app & web

Implementation of Date and Time Localization

Date and Time Localization of a website or a mobile app require taking into account different formats for date and time. These formats vary, depending on your target country.

Use of Libraries

In software development, there are a numerous technologies, languages, and frameworks that we can use to implement date and time localization. Considering the nature of the project’s requirements, Moment.js has been selected for the implementation.

Moment.js

Moment.JS is a JavaScript library which helps is parsing, validating, manipulating and displaying date/time in JavaScript easily.

Date and Time localization related implementation

In the code level, we are parsing the ‘Locale’ to the moment.locale() function to detect the app specific locale and apply moment().format() function to configure the date and time formats.

Here, the ‘Locale’ object represents a specific geographical, political, or cultural region.

Moment's format() method is what you use to convert a Moment object to a string which is more readable.

For locale-aware formatting, you can use the L ,l, LTS, LL or other tokens to get a locale-specific formatting of the date and time.

Note that based on the design, different tokens have been used in different places to show the dates and times.

moment.locale();         // en
moment().format('LT');   // 9:06 PM
moment().format('LTS');  // 9:06:40 PM
moment().format('L');    // 08/23/2022
moment().format('l');    // 8/23/2022
moment().format('LL');   // August 23, 2022
moment().format('ll');   // Aug 23, 2022
moment().format('LLL');  // August 23, 2022 9:06 PM
moment().format('lll');  // Aug 23, 2022 9:06 PM
moment().format('LLLL'); // Tuesday, August 23, 2022 9:06 PM
moment().format('llll'); // Tue, Aug 23, 2022 9:06 PM

Example : For Sweden, moment.lang("se").format('L');

Limitations

Here, the implementation doesn’t support the date localization based on the ‘Regions’. Only the basic language will be selected.

Example : English (New Zealand), English (Canada), English (India)

In the web app, in the class info cards, it has been decided to show the time in 24-hour format irrespective of the format in the locale considering the spacing issues that might arise.

Displayed time zone (documentation in progress)

(TP56141/GA2024.32)

In BRP Configuration > Apps > Select your app > “Base Information' tab, there is a field Displayed time zone which determines the time zone of the displayed times in the app and web.

Example of the use of this:

• If the 'Displayed time zone' field is left empty, the time for group activities, services and events will be shown to users in their current local time zone.
  
  For example, a user in the US will see the activity times in their local US time zone. If the facility where the user made their booking is in Denmark, for instance, they will not see the Danish time but instead their local time zone.
  

• If the 'Displayed time zone' is set, the user will see the activity times in the time zone specified in that field. For example, if a user in the US makes a booking at a facility in Denmark, they will see the times in the Danish time zone.