1

Issue I am facing is I am querying a list of data. When I am displaying that data in dataTable, datable is showing date time field based on machine this code is running, not on timeZone assigned to user in salesforce. Like my Local is india/kolkata and Salesforce org user is in America/Los Angeles. So time displayed is india/kolkata not America/Los Angeles.

Here is my sample code

import { LightningElement, wire, track } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';

export default class TestAccount extends LightningElement {
    @track data = [];
    col = this.columns = [{
        label: 'Name', 
        fieldName: 'Name', 
        type: 'text', 
        hideDefaultActions: true,
        sortable : true
    },{
        label: 'CreatedDate', 
        fieldName: 'CreatedDate', 
        type: 'date', 
        hideDefaultActions: true,
        typeAttributes:{
            year: "numeric",
            month: "long",
            day: "2-digit",
            hour: "2-digit",
            minute: "2-digit"
        }
    }];
    @wire(getRecord, { recordId: '0012D00000WYFgRQAX', fields: ['Account.Name','Account.CreatedDate']})
    getData({error,data}){
        if(data){
            this.data.push({Id:data.id, Name : data.fields.Name.value, CreatedDate : data.fields.CreatedDate.value});
        }
    }
}

html

<template>
    <lightning-datatable key-field="id" resize-column-disabled hide-checkbox-column data={data} columns={col} 
    ></lightning-datatable>
</template>

I have written above example to simplify code. I am actually doing an soql query to get records. This "data.fields.CreatedDate.value" is equal to value we get from soql. (Thats why I didn't used "data.fields.CreatedDate.displayValue");

Is there any parameter we can pass to show user's timezone in dataTable or this is excepted behaviour.

3 Answers 3

4

The documentation for lightning-datatable mentions the following

enter image description here

The locale set in the Salesforce user preferences determines the default formatting for date and time types. The data table supports the date object and dates provided as ISO8601 formatted strings.

This sounds like it should work. But, like you noted, it does use the computer's time zone setting to reflect the conversion of the datetime versus the Salesforce user settings.

I agree that the datatable doc isn't clear, but if you dig deeper you'll see the behavior is listed under lightning-formatted-date-time functions (which is used by datatable).

enter image description here

That's much clearer and matches the behavior of the component. It also shows there is a way to set the timezone to override this behavior.

Within the lightning-datatable doc, you can see there is a typeAttribute for timeZone that will help you achieve what you want (using @POZ's suggestion in combo).

enter image description here

<!-- get user selected timezone on user profile -->
import TIME_ZONE  from '@salesforce/i18n/timeZone';


{
        label: 'LastModifiedDate', 
        fieldName: 'LastModifiedDate', 
        type: 'date', 
        typeAttributes:{
            year: "numeric",
            month: "long",
            day: "2-digit",
            hour: "2-digit",
            minute: "2-digit",
            timeZone: TIME_ZONE <!-- set the timezone in the datetime column -->
        }
}
2
  • I agree this should work. Jun 16, 2021 at 16:35
  • Simple search of documentation always work. :facepalm: Thanks @kris Jun 16, 2021 at 17:45
0

There's no attribute that allows to change the timezone on the datable component.

If you really need to adjust the time, you'll have to fetch the user's timezone as defined in Salesforce with the i18n wire then adjust the data.fields.CreatedDate.value with some JS.

import TIMEZONE from '@salesforce/i18n/timezone';

That being said, I would expect the getRecord adapter to return time already set in the right timezone for the user...

0

Another Approach Could be

gettimeZone Apex class function that will return the string 'users timezone' and 'v.timeZone' is an attribute of the component

Apex Class function:

 @AuraEnabled
public static string getTimeZone()
{
  String timeZone = UserInfo.getTimeZone().getID();
  // timeZone = 'test';
  return timeZone;
}

Component Helper function

fetchSAHelper : function(component, event, helper) 
{
var action1 = component.get("c.getTimeZone");
        action1.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                var timeZoneTmp = response.getReturnValue();
                component.set('v.timeZone',response.getReturnValue());
                const actions = [
                    { label: 'View', name: 'view' }
                ];
                component.set('v.mycolumns', [
                    {label: 'Appointment Number', fieldName: 'AppointmentNumber', type: 'text'},
                    {label: 'Start Time', fieldName: 'SchedStartTime',  type: 'date', typeAttributes: {  
                        day: 'numeric',  
                        month: 'short',  
                        hour: '2-digit',  
                        minute: '2-digit',  
                        second: '2-digit',   
                        hour12: true,
                        timeZone: component.get('v.timeZone')}}, 
                    {label: 'End Time', fieldName: 'SchedEndTime', type: 'date', typeAttributes: {  
                        day: 'numeric',  
                        month: 'short',  
                        hour: '2-digit',  
                        minute: '2-digit',  
                        second: '2-digit',  
                        hour12: true,timeZone:  component.get('v.timeZone')}}, 
                    {type:  'button',typeAttributes:{
                        iconName: 'utility:preview',
                        label: 'View', 
                        name: 'viewRecord', 
                        title: 'viewTitle', 
                        disabled: false, 
                        value: 'view'
                    }
                    }
                    
                ]);
                var strn=component.get("v.recordId");
                var pageSize = component.get("v.pageSize").toString();
                var pageNumber = component.get("v.pageNumber").toString();
                var action2 = component.get("c.fetchAppointments");
                action2.setParams({
                    recordId : strn,
                    pageSize : pageSize,
                    pageNumber : pageNumber
                });
                action2.setCallback(this, function(response){
                    var state = response.getState();
                    if (state === "SUCCESS") {
                        component.set("v.apptList", response.getReturnValue());
                        var resultData = response.getReturnValue();
                        if(resultData.length < component.get("v.pageSize")){
                            component.set("v.isLastPage", true);
                        } else{
                            component.set("v.isLastPage", false);
                        }
                    }
                });
                $A.enqueueAction(action2);
            }
        });
        $A.enqueueAction(action1);  
  }
})

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .