0

I have a lightning formatted date time which has a value of a datetime in Zulu format. And the value changes based on the computer's time zone. For example, I have 2023-01-10T20:00:00.000Z, and it is converted to 2023-01-11T04:00:00.000Z if my time zone on my computer is UTC+08:00. Is this the default behavior? How do we prevent this and just display the Zulu format date on LWC without converting?

HTML

<lightning-formatted-date-time 
 value={object.date} 
 year="numeric" 
 month="numeric" 
 day="numeric" 
 hour="2-digit"
 minute="2-digit" 
 hour12="false"
>

JS

object.date = response.Date__c; //2023-01-10T20:00:00.000Z
1
  • Quick fix was to just use <span> instead of a <lightning-formatted-date-time>
    – Rwwwwwr
    Commented Jun 21, 2023 at 21:13

1 Answer 1

0

I think this is the default behavior when working with dates and times in JavaScript. When you create a new Date object in JavaScript and pass it a string in the format "YYYY-MM-DDTHH:mm:ss.sssZ", it will assume that the string represents the date and time in UTC, and will automatically convert it to the local time zone of the computer running the code (in this case your pc because javascript runs locally).

In order to display the date and time in UTC without converting it to the local time zone, you can use the toUTCString() method of the Date object to format the date and time in a string that includes the UTC offset.

For Example

let date = new Date("2023-01-10T20:00:00.000Z");
console.log(date.toUTCString());  // "Tue, 10 Jan 2023 12:00:00 GMT"

Another way to keep the date in UTC format is to make use of toISOString() function it will return the date in format of ISO-8601 format (yyyy-mm-ddTHH:mm:ss.sssZ)

let date = new Date("2023-01-10T20:00:00.000Z");
console.log(date.toISOString());  // "2023-01-10T20:00:00.000Z"

In case if you are working on LWC and if you have a date time string coming from the server in the format of '2023-01-10T20:00:00.000Z' you should use it directly. And make sure you are not creating a new date object out of that.

Note: Be careful when displaying the date and time to the user, because the user's local time zone may not be the same as the UTC time zone, so you should make sure to clearly indicate that the date and time is in UTC.

4
  • I have directly used the value from the server in the format of '2023-01-10T20:00:00.000Z' and the value is correct/not being converted on chrome debug, however the value is still converted into the local timezone whenever I render the value into lightning-formatted-date-time @Guy
    – Rwwwwwr
    Commented Jan 10, 2023 at 17:49
  • Ok I slightly misunderstood. Could you possibly add the LWC code fragment to your question? Commented Jan 10, 2023 at 18:31
  • I have added the LWC codes @Guy
    – Rwwwwwr
    Commented Jan 10, 2023 at 18:39
  • since you are using a Date as input to the lightning-formatted-date-time I believe it will always convert to local timezone. You could try using the additional parameter time-zone="UTC" to revert it back to UTC. Commented Jan 12, 2023 at 8:21

You must log in to answer this question.

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