Localization

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

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

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

The component renders as Oct 7, 2013 2:17:08 AM.

To customize the date and time formatting, we recommend using lightning:formattedDateTime. This example sets the date and time using the init handler.
<aura:component>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="datetime" type="DateTime"/>
    <lightning:formattedDateTime value="{!v.datetime}" timeZone="Europe/Berlin" 
                                 year="numeric" month="short" day="2-digit" hour="2-digit"
                                 minute="2-digit" second="2-digit"/>
</aura:component>
({
    doInit : function(component, event, helper) {
        var date = new Date();
        component.set("v.datetime", date)
    }
})

This example creates a JavaScript Date instance, which is rendered in the format MMM DD, YYYY HH:MM:SS AM.

Although the output for this example is similar to <ui:outputDateTime value="{!v.datetime}" timezone="Europe/Berlin" />, the attributes on lightning:formattedDateTime enable you to control formatting at a granular level. For example, you can display the date using the MM/DD/YYYY format.
<lightning:formattedDateTime value="{!v.datetime}" timeZone="Europe/Berlin" year="numeric" month="numeric" day="numeric"/>
Note

Note

For more information, see lightning:formattedDateTime (Beta) and ui:outputDateTime.

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.

Note

Note

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

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.

<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.
<ui:outputCurrency value="100000" />
Note

Note

To change between using the currency symbol, code, or name, use lightning:formattedNumber instead. For more information, see lightning:formattedNumber (Beta).

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.