Lightning Formatted Date Time converts datetime to system settings timezone

Question

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

Answer 1

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.