Lightning Components Developer’s Guide
jNewer Version Available
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");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<aura:component>
18 <ui:outputDateTime value="2013-05-07T00:17:08.997Z" timezone="Europe/Berlin" langLocale="de"/>
19</aura:component>
20The 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");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17var dateFormat = $A.get("$Locale.dateFormat");
18var dateString = $A.localizationService.formatDateTime(new Date(), dateFormat);
19If 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");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17var dateFormat = "MMMM d, yyyy h:mm a";
18var userLocaleLang = $A.get("$Locale.langLocale");
19return $A.localizationService.formatDate(date, dateFormat, userLocaleLang);
20This example compares two dates to check that one is later than the other.
1swfobject.registerObject("clippy.codeblock-3", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17if( $A.localizationService.isAfter(StartDateTime,EndDateTime)) {
18 //throw an error if StartDateTime is after EndDateTime
19}