Lightning Components Developer’s Guide

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Localization

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

The components retrieve the browser's locale information and display the date and time accordingly. 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.

Component source

1swfobject.registerObject("clippy.codeblock-0", "9");<aura:component>
2    <ui:outputDateTime value="2013-05-07T00:17:08.997Z"  timezone="Europe/Berlin" langLocale="de"/>
3</aura:component>
4

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

Additionally, you can use the global value provider, $Locale, to obtain a browser's locale information. By default, the framework uses the browser's locale, but it can be configured to use others through the global value provider.

Using the Localization Service

The framework’s localization service enables you to manage the localization of date, time, numbers, and currencies.

This example sets the formatted date time using $Locale and the localization service. 
1swfobject.registerObject("clippy.codeblock-1", "9");var dateFormat = $A.get("$Locale.dateFormat");
2var dateString = $A.localizationService.formatDateTime(new Date(), dateFormat);
3
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.
1swfobject.registerObject("clippy.codeblock-2", "9");var dateFormat = "MMMM d, yyyy h:mm a";
2var userLocaleLang = $A.get("$Locale.langLocale");
3return $A.localizationService.formatDate(date, dateFormat, userLocaleLang);
4
This example compares two dates to check that one is later than the other. 
1swfobject.registerObject("clippy.codeblock-3", "9");if( $A.localizationService.isAfter(StartDateTime,EndDateTime)) {
2    //throw an error if StartDateTime is after EndDateTime
3}