I am displaying a Lead list using a datatable inside a aura:component. This is the table i am displaying: enter image description here I am developing this app from India. And, when the client opens the same app from USA, this is the table he is getting: enter image description here

You can see from the image, when app is opened in the USA, one day is subtracted from the BirthDate__c field and this is creating a issue. And, when i pass the date to another aura:component, i am getting the correct date(date displayed in India) in the new aura:component.

This is the code I am using to display the table:

                data="{! v.records }"
                columns="{! v.columns }"
                onrowaction="{! c.handleViewDetails }"

//controller code
    component.set('v.columns', [
            {label: 'Action', type:'button', typeAttributes: { label: { fieldName: 'Name'}, variant:'base'}},
            {label: 'Birth Date', fieldName: 'BirthDate__c', type: 'date', typeAttributes: { month: 'numeric', day: 'numeric', year: 'numeric'}},
            {label: 'Phone Number', fieldName: 'Phone', type: 'text'},
            {label: 'Email', fieldName: 'Email', type:'text'}

And, this is the code i use to send the data to another aura:component

handleViewDetails : function(component, event, helper) {
    var row = event.getParam('row');
    var evt = $A.get("e.force:navigateToComponent");

        componentDef: "healthfeed:ResourcesComponent",
        componentAttributes :{name: row.Name,
                              dateOfBirth: row.BirthDate__c}

So, what am i doing wrong here? how can i display same date in India and USA?

  • This is the ideal situation, there is a big difference in the time zone of India and USA. The "date" type displays time in the local time zone. – rahul gawale Jun 25 at 6:19
  • @rahulgawale yeah. I understand that. My question is, when i pass the date to another aura:component,in this case ResourcesComponent, i am getting the correct date. why is that? if it is a time zone issue, the date shown in ResourcesComponent, also should get i day subtracted, right? – Jayesh Babu Jun 25 at 6:41
  • how are you displaying the date in ResourcesComponent component? – rahul gawale Jun 25 at 6:44
  • <ui:outputDate value="{!v.dateOfBirth}"/> – Jayesh Babu Jun 25 at 6:48
  • 1
    I fixed it. I added timeZone="UTC" to this line: {label: 'Birth Date', fieldName: 'BirthDate__c', type: 'date', typeAttributes: { month: 'numeric', day: 'numeric', year: 'numeric'}}, inside typeAttributes – Jayesh Babu Jun 25 at 7:17

The problem is due to ui:outputDate. I think its showing date in UTC. Also, it is deprecated as of API version 47.0.

Consider using lightning:formattedDateTime instead of ui:outputDate.

With lightning:formattedDateTime you can use the default timezone, which is the runtime environment's time zone. or you can override the default by specifying a specific time zone to the timezone attribute.

<lightning:formattedDateTime value="1479944705000" timeZone="UTC" />

If you want to show the date in user's time-zone then don't set any value to timeZone attribute. If you always want to show date in a specific timezone then you can specify that using timeZone attribute.

You can also set the timeZone to the data table column inside typeAttributes.

| improve this answer | |
  • 1
    I added timeZone="UTC" to typeAttributes and it is fixed. thanks very much. – Jayesh Babu Jun 25 at 7:23
  • Great!! I guess you had already figured it out while I was typing the answer! – rahul gawale Jun 25 at 7:25
  • yeah.. i did. anyway, thanks very much for the help. – Jayesh Babu Jun 25 at 7:27

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.