Is the time-zone attribute broken in lightning-formatted-date-time?

Question

Based on my reading of the documentation that includes statements like this:

When using the component to display a date only, without time, include time-zone="UTC" to ensure the correct date displays in all time zones.

I would expect this:

<lightning-formatted-date-time value="2020-07-07T00:00:00Z" time-zone="UTC">

to always output Jul 7, 2020. But when I change the timezone on my Mac, the date can jump back to Jul 6, 2020. Note that that is not consistent with this next piece of documentation either as it is my browser's time zone that is being responded to not my user's time zone in Salesforce:

When no attributes other than value are specified, the component uses the default date format based on the user's locale in Salesforce.

What am I missing here?

PS

My colleague Cesar-Garcia has done dome more work on this in response to sfcbweb and has this to share...

I’ve tested the following template, displaying the same timestamp both, as a date and as a the full date+time:

<template>
    <p><lightning-formatted-date-time
            value="2020-07-07T00:00:00Z"
            time-zone="UTC"
    ></lightning-formatted-date-time>
    </p>
    <p>
    <lightning-formatted-date-time
            value="2020-07-07T00:00:00Z"
            year="numeric"
            month="numeric"
            day="numeric"
            hour="2-digit"
            minute="2-digit"
            time-zone-name="short"
            hour12="true"
            time-zone="UTC"
    ></lightning-formatted-date-time>
    </p>
</template>

When setting my timezone to China - Mainland (UTC+7), I get the following output, where the date only output is shifted:

so the problem appears to be in the default conversion to date only.

Answer 1

@keith-c, thank you for your question. I work at Salesforce, and reviewed the component, and the documentation along with a colleague on the Docs team.

If you are setting the attribute time-zone="UTC" on lightning-formatted-date-time, you shouldn't see the day value change, no matter which time zone setting is being retrieved by the component.

If you don't set time-zone="UTC", you may see the day value change, as it would be set +/- hours based on the user time-zone setting in Salesforce (as documented) or the time zone setting in the OS (as observed, read below).

I've tried reproducing the issue on a Salesforce org, and changed the timezone on my Mac's settings to a couple of different values ahead and behind my PST timezone. I wasn’t able to reproduce the shifting date change when time-zone="UTC" IS set. However, I observed that my Mac's timezone is reflected by the component when the time-zone attribute IS NOT set, which is contrary to what we document. We will investigate further and update documentation.

Could you share your steps to reproduce in a comment here? It'll help me investigate further. If possible, record your time zone settings for the Salesforce org, the Salesforce user settings, and on your Mac.  Try adding these attributes to see clearly what's being rendered:

year="numeric" month="numeric" day="numeric" hour="2-digit" minute="2-digit" time-zone-name="short" hour12="true"

Also, the value you are passing includes time zone information even if you only want to display the date, so these other attributes can help narrow down what's happening. 

In your final comment you reference a second piece of documentation about the default date format and the user's locale. Just to clarify, the Salesforce locale and the Salesforce time zone are separate settings. The date format refers only to the order and format of the month, day, and year, and that is determined by the locale. For example, the English (United States) locale's date format is Jul 7, 2020 and the French (France) locale's date format is 7 Jul 2020. The time zone is not considered in the locale's date format. We will clarify this in the documentation.