Tuesday, December 12, 2017

Formatting and Localizing dates in javascript in Lightning

Date formatting in javascript

AuraLocalizationService JavaScript API provides methods for localizing dates and formatting.

Use the formatDate() to format date by providing format string as second argument.

formatDate (String | Number | Date date, String formatString)

Use $A.localizationService to use the methods in AuraLocalizationService.

Below are few examples of format string and their output:

var now = new Date();
var dateString = "2017-12-12";

// Returns date in the format "Dec 12, 2017"
console.log($A.localizationService.formatDate(dateString));

// Returns date in the format "2017 12 12"
console.log($A.localizationService.formatDate(dateString, "YYYY MM DD"));

// Returns date in the format "December 12 2017, 11:03:47 PM"
console.log($A.localizationService.formatDate(now, "MMMM DD YYYY, hh:mm:ss a"));

// Returns date in the format "Dec 12 2017, 11:03:57 PM"
console.log($A.localizationService.formatDate(now, "MMM DD YYYY, hh:mm:ss a"));

Refer below link for more details:
tokens supported in format string

Localization

Lightning framework provides client-side localization support on input/output elements. This helps in customize the date and time format.

For example, below code will display date in Europe/Berlin timezone (Dec 13, 2017 2:17:08 AM)

<aura:component>
    <ui:outputDateTime value="2017-12-13T02:17:08.997Z"  timezone="Europe/Berlin" />
</aura:component>

To customize date and time format use, lightning:formattedDateTime.

The attributes on lightning:formattedDateTime helps you to control formatting at a granular level. For example, you need to display the date using the MM/DD/YYYY format, then use below code:

<lightning:formattedDateTime value="{!v.datetimeValue}" timeZone="Europe/Berlin" year="numeric" month="numeric" day="numeric"/>


datetimeValue can be set in controller code either in doInit or any other function as mentioned below:

var date = new Date();
component.set("v.datetimeValue", date)

Locale Information on client side controller

  • $A.get("$Locale.timezone")  : This will return timezone like Europe/Paris, Europe/Berlin etc.
  • $A.get("$Locale.currency") : This will return org currency locale like "$", "¥" etc.

Hope this will help!!!!

4 comments:

  1. var dateFormat = "yyyy-MM-ddTHH:mm:ss.000Z";
    var dateString = $A.localizationService.formatDateTime(estResDate, dateFormat);

    Need to add two days to current date .How can we do that?

    ReplyDelete
  2. Just simply add
    estResDate.setDate(estResDate.getDate() + 2);

    it is working fine for me.

    ReplyDelete
  3. I also, as many people, faced this problem. I have been looking for this information for two days. I hope, that I have found it.

    ReplyDelete
  4. Thanks for such an informative post. I have been looking for such information for a long time and finally found it here. This is useful for me when developing my site. Continue to delight us with such wonderful articles.

    ReplyDelete