Skip to content

Frontend/i18n: Default localizeDateTime to the browser's timezone. #8124

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

Merged
tristanlabelle merged 1 commit into from
Mar 23, 2026
Merged

Frontend/i18n: Default localizeDateTime to the browser's timezone. #8124

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions app/web/features/auth/InviteCodesPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import { ListInviteCodesRes } from "proto/account_pb";
import React from "react";
import { inviteRoute } from "routes";
import { service } from "service";
import { BROWSER_TIMEZONE, localizeDateTime } from "utils/date";
import { localizeDateTime } from "utils/date";

import { inviteCodesKey } from "../queryKeys";

Expand Down Expand Up @@ -166,7 +166,6 @@ export default function InviteCodesPage() {
datetime: localizeDateTime(
new Date(c.created.seconds * 1000),
{
timezone: BROWSER_TIMEZONE,
locale: locale,
abbreviate: true,
},
Expand All @@ -181,7 +180,6 @@ export default function InviteCodesPage() {
datetime: localizeDateTime(
new Date(c.disabled.seconds * 1000),
{
timezone: BROWSER_TIMEZONE,
locale,
abbreviate: true,
},
Expand Down
3 changes: 1 addition & 2 deletions app/web/features/auth/jail/ModNoteCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { ModNote } from "proto/account_pb";
import { useState } from "react";
import { service } from "service";
import { theme } from "theme";
import { BROWSER_TIMEZONE, localizeDateTime, timestamp2Date } from "utils/date";
import { localizeDateTime, timestamp2Date } from "utils/date";

const StyledNoteContainer = styled("div")(() => ({
marginBottom: theme.spacing(4),
Expand All @@ -34,7 +34,6 @@ export default function ModNoteCard({ note, updateJailed }: ModNoteCardProps) {
const [loading, setLoading] = useState(false);

const formattedTime = localizeDateTime(timestamp2Date(note.created!), {
timezone: BROWSER_TIMEZONE,
locale,
abbreviate: true,
});
Expand Down
4 changes: 1 addition & 3 deletions app/web/features/auth/logins/LoginCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import { AUTH, GLOBAL } from "i18n/namespaces";
import { useTranslation } from "next-i18next";
import { ActiveSession } from "proto/account_pb";
import { service } from "service";
import { BROWSER_TIMEZONE, localizeDateTime, timestamp2Date } from "utils/date";
import { localizeDateTime, timestamp2Date } from "utils/date";
import { timeAgo } from "utils/timeAgo";

const StyledCard = styled(Card)(({ theme }) => ({
Expand All @@ -45,13 +45,11 @@ export default function LoginsPage({
locale,
});
const createdDisplay = localizeDateTime(timestamp2Date(session.created!), {
timezone: BROWSER_TIMEZONE,
locale,
includeSeconds: true,
abbreviate: true,
});
const expiryDisplay = localizeDateTime(timestamp2Date(session.expiry!), {
timezone: BROWSER_TIMEZONE,
locale,
includeTime: false,
abbreviate: true,
Expand Down
3 changes: 1 addition & 2 deletions app/web/features/communities/discussions/DiscussionPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import { useRouter } from "next/router";
import { Discussion } from "proto/discussions_pb";
import { service } from "service";
import { theme } from "theme";
import { BROWSER_TIMEZONE, localizeDateTime, timestamp2Date } from "utils/date";
import { localizeDateTime, timestamp2Date } from "utils/date";

import CommunityBase from "../CommunityBase";
import CommunityPageSubHeader from "../CommunityPage/CommunityPageSubHeader";
Expand Down Expand Up @@ -143,7 +143,6 @@ export default function DiscussionPage({
dateOnly: localizeDateTime(
timestamp2Date(discussion.created!),
{
timezone: BROWSER_TIMEZONE,
locale,
includeTime: false,
},
Expand Down
1 change: 1 addition & 0 deletions app/web/features/communities/events/EventCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,7 @@ export default function EventCard({
dayjs(timestamp2Date(event.startTime!)),
dayjs(timestamp2Date(event.endTime!)),
{
// TODO(#8064): Should use the event.timezone, but it's currently incorrect.
timezone: BROWSER_TIMEZONE,
locale,
includeDayOfWeek: true,
Expand Down
1 change: 1 addition & 0 deletions app/web/features/communities/events/EventPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -417,6 +417,7 @@ export default function EventPage({
dayjs(timestamp2Date(event.startTime!)),
dayjs(timestamp2Date(event.endTime!)),
{
// TODO(#8064): Should use the event.timezone, but it's currently incorrect.
timezone: BROWSER_TIMEZONE,
locale,
includeDayOfWeek: true,
Expand Down
1 change: 1 addition & 0 deletions app/web/features/communities/events/LongEventCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,7 @@ const LongEventCard = ({
dayjs(timestamp2Date(event.startTime!)),
dayjs(timestamp2Date(event.endTime!)),
{
// TODO(#8064): Should use the event.timezone, but it's currently incorrect.
timezone: BROWSER_TIMEZONE,
locale,
includeDayOfWeek: true,
Expand Down
9 changes: 4 additions & 5 deletions app/web/utils/date.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,16 +16,15 @@ const numNights = (date1: string, date2: string) => {
return diffDays;
};

/// Explicitly identifies the browser's timezone (clearer than "undefined").
/// Allow call sites to explicitly reference the browser's timezone (clearer than "undefined").
export const BROWSER_TIMEZONE: unique symbol = Symbol("browser-timezone");
export const UTC_TIMEZONE: string = "Etc/UTC";

interface LocalizeDateTimeParams {
/// The timezone to be used to figure the date components.
/// This is a required parameter to avoid unexpected results.
timezone: string | typeof BROWSER_TIMEZONE;
/// The locale to localize in.
locale: string;
/// The timezone to be used to figure the date components (defaults to the browser's).
timezone?: string | typeof BROWSER_TIMEZONE;
/// Whether to include the date (defaults to true).
includeDate?: boolean;
/// If including the date, whether to include the day of week (defaults to false).
Expand Down Expand Up @@ -86,7 +85,7 @@ function getIntlDateTimeFormat(
options.second = "numeric";
}
}
if (args.timezone !== BROWSER_TIMEZONE) {
if (args.timezone && args.timezone !== BROWSER_TIMEZONE) {
options.timeZone = args.timezone;
}
return Intl.DateTimeFormat(args.locale, options);
Expand Down
Loading