Localization

The framework provides client-side localization support on input and output components.

The following example shows how you can override the default langLocale and timezone attributes. The output displays the time in the format hh:mm by default.

For more information on supported attributes, see the Reference Doc App.

Note

Component source

1<aura:component>
2    <ui:outputDateTime value="2013-10-07T00:17:08.997Z"  timezone="Europe/Berlin" langLocale="de"/>
3</aura:component>

The component renders as Okt. 7, 2015 2:17:08 AM.

Additionally, you can use the global value provider, $Locale, to obtain the locale information. The locale settings in your organization overrides the browser’s locale information.

Working with Locale Information

In a single currency organization, Salesforce administrators set the currency locale, default language, default locale, and default time zone for their organizations. Users can set their individual language, locale, and time zone on their personal settings pages.

Single language organizations cannot change their language, although they can change their locale.

Note

For example, setting the time zone on the Language & Time Zone page to (GMT+02:00) returns 28.09.2015 09:00:00 when you run the following code.

1<ui:outputDateTime value="09/28/2015" />

Running $A.get("$Locale.timezone") returns the time zone name, for example, Europe/Paris. For more information, see "Supported Time Zones" in the Salesforce Help.

Setting the currency locale on the Company Information page to Japanese (Japan) - JPY returns ¥100,000 when you run the following code.

1<ui:outputCurrency value="100000" />

Similarly, running $A.get("$Locale.currency") returns "¥" when your org’s currency locale is set to Japanese (Japan) - JPY. For more information, see "Supported Currencies" in the Salesforce Help.

Using the Localization Service

The framework’s localization service enables you to manage the localization of date, time, numbers, and currencies. These methods are available in the AuraLocalizationService JavaScript API.

This example sets the formatted date time using $Locale and the localization service.

1var dateFormat = $A.get("$Locale.dateFormat");
2var dateString = $A.localizationService.formatDateTime(new Date(), dateFormat);

If you’re not retrieving the browser’s date information, you can specify the date format on your own. This example specifies the date format and uses the browser’s language locale information.

1var dateFormat = "MMMM d, yyyy h:mm a";
2var userLocaleLang = $A.get("$Locale.langLocale");
3return $A.localizationService.formatDate(date, dateFormat, userLocaleLang);

The AuraLocalizationService JavaScript API provides methods for working with localization. For example, you can compare two dates to check that one is later than the other.

1var startDateTime = new Date();
2//return the date time at end of the day
3var endDateTime = $A.localizationService.endOf(d, 'day');
4if( $A.localizationService.isAfter(startDateTime,endDateTime)) {
5    //throw an error if startDateTime is after endDateTime
6}

For more information on the localization service, see the JavaScript API in the Reference Doc App.

Note

Lightning Components Developer Guide

Localization

Working with Locale Information

Using the Localization Service

See Also: