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?


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


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.

  • But what about different locales? I should not have to hardcode the format. If I switch my local to English UK the format should be DD/MM/YYYY. These are things we don't have to worry about in VisualForce pages.
    – Homerlex
    Sep 17 '18 at 20:06
  • If you want to use locale, then you should instead use lightning:formattedDateTime
    – Jayant Das
    Sep 17 '18 at 20:08
  • Thanks for the suggestion but lightning:formattedDateTime outputs the the same wrong format - "Sep 17, 2018". Am I the only one seeing this?
    – Homerlex
    Sep 18 '18 at 11:15
  • If I specify the format like the following it works but I would expect the default format to match the standard UI's format: <lightning:formattedDateTime value="{!v.benefitList[0].ExpirationDate__c}" year="numeric" month="numeric" day="numeric" />
    – Homerlex
    Sep 18 '18 at 11:20
  • Dang, I just noticed that when I use lightning:formattedDateTime the date is rendered 1 day behind the actual date. Some other thread suggested add timeZone="UTC" to the formatting and that seems to fix it but date formatting in lightning seems all kinds of messed up. And to confirm, I am outputting a Date object not a DateTime object.
    – Homerlex
    Sep 18 '18 at 12:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.