Localization

Working with Locale, Language, and Timezone

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.

If you’re working with Salesforce data, we recommend using the base components built on Lightning Data Service. For example, the lightning:recordForm and lightning:recordViewForm components can display a read-only value of your record data. See Lightning Data Service.

Consider the lightning:formatted* components only if the lightning:record*Form components don’t meet your requirements.

Let’s take a look at the lightning:formattedDateTime component to display a date and time. Setting the time zone on the Language & Time Zone page to (GMT+02:00) returns the date and time like Sep 28, 2020, 11:13 AM when you run the following code.

<lightning:formattedDateTime value="2020-09-28T18:13:41Z"
            year="numeric" month="short" day="2-digit"
            hour="2-digit"
            minute="2-digit"/>

Changing the user locale to French (France) returns the date and time like 28 sept. 2020 à 11:13. Running $A.get("$Locale.userLocaleCountry") returns the user’s locale, for example, FR.

For more information, see Supported Locales and ICU Formats.

To display a currency value, use lightning:formattedNumber. Setting the currency locale on the Company Information page to Japanese (Japan) - JPY returns ¥100,000 when you run the following code.

<lightning:formattedNumber value="100000" style="currency" />

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

Working with Address, Name, and Number Formats

The user’s locale determines the name and address formats. Numbers, including currency, decimal, and percentage are also formatted according to the user’s locale. See Supported Locales and ICU Formats.

To get user input for an address, use lightning:inputAddress. For a read-only output of an address, use lightning:formattedAddress. The default output displays an address that links to Google Maps.

To get user input for a person’s name, use lightning:inputName. For a read-only output of a name, use lightning:formattedName.

To get user input for a number, including currency, decimal, and percentage, use lightning:input with number type. For a read-only output of a number, use lightning:formattedNumber.

Working with Date and Time Formats

To get user input for a date and time, use lightning:input with type date, datetime, or time. To customize the date and time formats, we recommend using lightning:formattedDateTime or lightning:formattedTime.

This example sets the date and time from a Date object using the init handler. The timeZone attribute is optional and is used to override the default timezone based on the user’s location.

<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 renders the date in the format MMM DD, YYYY HH:MM:SS AM. Refer to the component reference for examples on how you can display the date in a different format.