Skip to content

Temporal.Now.timeZoneId() does not return the most recent system time zone #63

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
Sector6759 opened this issue Feb 27, 2025 · 1 comment
Open

Temporal.Now.timeZoneId() does not return the most recent system time zone #63

Sector6759 opened this issue Feb 27, 2025 · 1 comment

Comments

@Sector6759
Copy link

Sector6759 commented Feb 27, 2025 •
edited
Loading

The value of new Intl.DateTimeFormat().resolvedOptions().timeZone is updated immediately by the browser when the system time zone changes, without the need to restart the browser or reload the tab. I tested this with Chrome and Firefox, on Linux Mint 22 and Windows 11.

When calling Temporal.Now.timeZoneId() using Firefox's native Temporal implementation, or the https://github.com/js-temporal/temporal-polyfill, this method also returns the most recent system time zone.

But doing the same using the https://github.com/fullcalendar/temporal-polyfill, the returned time zone is the one that was set when the browser tab was last reloaded.

How to reproduce

Code

js-temporal/temporal-polyfill ✅

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>js-temporal</title>
  </head>
  <body>
    <button type="button">Click</button>

    <script type="module">
      import { Temporal } from "https://cdn.jsdelivr.net/npm/@js-temporal/polyfill@0.4.4/+esm";

      const button = document.querySelector("button");

      button.addEventListener("click", () => {
        console.log(Temporal.Now.timeZoneId());
      });
    </script>
  </body>
</html>

fullcalendar/temporal-polyfill ❌

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>fullcalendar</title>
  </head>
  <body>
    <button type="button">Click</button>

    <script type="module">
      import { Temporal } from "https://cdn.jsdelivr.net/npm/temporal-polyfill@0.2.5/+esm";

      const button = document.querySelector("button");

      button.addEventListener("click", () => {
        console.log(Temporal.Now.timeZoneId());
      });
    </script>
  </body>
</html>
  1. Open the HTML file in the browser
  2. Open dev console
  3. Click the button
  4. Observe the logged time zone
  5. Change your system time zone
  6. Click the button again
  7. Observe the logged time zone
@arshaw
Copy link
Member

arshaw commented Feb 27, 2025

Thanks for the report. temporal-polyfill is caching the initial call. I'll do away with this caching to fix the bug.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@arshaw @Sector6759