Lightning Component - Date formatting not consistent with standard UI

Question

I am using lightning:datatable to render data including dates.

My date column definition looks like:

{ label: 'Expiration', fieldName: 'ExpirationDate__c', type: 'date'}

The date in the table is rendered as "Sep 17, 2018". I even tried rendering it using something like:

<ui:outputDate value="{!v.myDataList[0].ExpirationDate__c}"/>

... and same results.

Dates rendered from standard SF views (like in related lists for example) look like "09/17/2018"

Why don't my custom components render using the same formatting as standard UI?

Answer 1

Perhaps the issue I am seeing is related to this: https://success.salesforce.com/issues_view?id=a1p3A000000FmAgQAK

Answer 2

You need to use the format attribute to display the output however you want. In your case to be able to display it as 09/17/2018, you can just have it as:

<ui:outputDate value="{!v.myDataList[0].ExpirationDate__c}" format="MM/DD/YYYY"/>

Refer to the documentation's specification for details.

---

If you need to support User's locale, use lightning:formattedDate instead, which allows to format the date based on User's locale.

A lightning:formattedDateTime component displays formatted date and time. This component uses the Intl.DateTimeFormat JavaScript object to format date values. The locale set in the app's user preferences determines the formatting.