Feature: Enhance date formatting with user locale support (#782)

YoranSys · Ubuntu · daveearley · web-flow · commit bd6b8bd2fa2b · 2025-11-27T10:13:06.000Z
Co-authored-by: Ubuntu &lt;ubuntu@vps-0f1a4724.vps.ovh.net&gt;
Co-authored-by: Dave Earley &lt;dave@hi.events&gt;
diff --git a/frontend/src/components/common/EventCard/index.tsx b/frontend/src/components/common/EventCard/index.tsx
@@ -27,7 +27,7 @@ import {showError, showSuccess} from "../../../utilites/notifications.tsx";
 import {useUpdateEventStatus} from "../../../mutations/useUpdateEventStatus.ts";
 import {formatCurrency} from "../../../utilites/currency.ts";
 import {formatNumber} from "../../../utilites/helpers.ts";
-import {formatDate} from "../../../utilites/dates.ts";
+import {formatDateWithLocale} from "../../../utilites/dates.ts";
 
 const placeholderEmojis = ['🎉', '🎪', '🎸', '🎨', '🌟', '🎭', '🎯', '🎮', '🎲', '🎳'];
 
@@ -137,15 +137,15 @@ export function EventCard({event}: EventCardProps) {
                         <div className={classes.dateTime}>
                             <div className={classes.dateBox}>
                                 <span
-                                    className={classes.month}>{formatDate(event.start_date, 'MMM', event.timezone)}</span>
-                                <span className={classes.day}>{formatDate(event.start_date, 'D', event.timezone)}</span>
+                                    className={classes.month}>{formatDateWithLocale(event.start_date, 'monthShort', event.timezone)}</span>
+                                <span className={classes.day}>{formatDateWithLocale(event.start_date, 'dayOfMonth', event.timezone)}</span>
                             </div>
                             <div className={classes.timeInfo}>
                                 <span
-                                    className={classes.time}>{formatDate(event.start_date, 'h:mm A', event.timezone)}</span>
+                                    className={classes.time}>{formatDateWithLocale(event.start_date, 'timeOnly', event.timezone)}</span>
                                 {event.end_date && (
                                     <span
-                                        className={classes.endTime}>- {formatDate(event.end_date, 'h:mm A', event.timezone)}</span>
+                                        className={classes.endTime}>- {formatDateWithLocale(event.end_date, 'timeOnly', event.timezone)}</span>
                                 )}
                             </div>
                         </div>
diff --git a/frontend/src/components/common/EventDateRange/index.tsx b/frontend/src/components/common/EventDateRange/index.tsx
@@ -1,32 +1,35 @@
-import {Event} from "../../../types.ts";
-import {formatDate} from "../../../utilites/dates.ts";
+import { Event } from "../../../types.ts";
+import { formatDateWithLocale } from "../../../utilites/dates.ts";
 
 interface EventDateRangeProps {
-    event: Event
+    event: Event;
 }
 
-export const EventDateRange = ({event}: EventDateRangeProps) => {
-    const startDateFormatted = formatDate(event.start_date, "ddd, MMM D, YYYY h:mm A", event.timezone);
-    const endDateFormatted = event.end_date ? formatDate(event.end_date, "ddd, MMM D, YYYY h:mm A", event.timezone) : null;
-    const sameDayFormatted = formatDate(event.start_date, "dddd, MMMM D", event.timezone);
-    const startTimeFormatted = formatDate(event.start_date, "h:mm A", event.timezone);
-    const endTimeFormatted = event.end_date ? formatDate(event.end_date, "h:mm A", event.timezone) : null;
-    const timezone = formatDate(event.start_date, "z", event.timezone);
-
+export const EventDateRange = ({ event }: EventDateRangeProps) => {
     const isSameDay = event.end_date && event.start_date.substring(0, 10) === event.end_date.substring(0, 10);
+    const timezone = formatDateWithLocale(event.start_date, "timezone", event.timezone);
+
+    if (isSameDay) {
+        const dayFormatted = formatDateWithLocale(event.start_date, "dayName", event.timezone);
+        const startTime = formatDateWithLocale(event.start_date, "timeOnly", event.timezone);
+        const endTime = formatDateWithLocale(event.end_date!, "timeOnly", event.timezone);
+
+        return (
+            <span>
+                {dayFormatted} · {startTime} - {endTime} {timezone}
+            </span>
+        );
+    }
+
+    const startDateFormatted = formatDateWithLocale(event.start_date, "fullDateTime", event.timezone);
+    const endDateFormatted = event.end_date
+        ? formatDateWithLocale(event.end_date, "fullDateTime", event.timezone)
+        : null;
 
     return (
-        <>
-            {isSameDay ? (
-                <span>
-                    {sameDayFormatted} · {startTimeFormatted} - {endTimeFormatted} {timezone}
-                </span>
-            ) : (
-                <span>
-                    {startDateFormatted}
-                    {endDateFormatted && ` - ${endDateFormatted}`} {timezone}
-                </span>
-            )}
-        </>
+        <span>
+            {startDateFormatted}
+            {endDateFormatted && ` - ${endDateFormatted}`} {timezone}
+        </span>
     );
 }
diff --git a/frontend/src/components/layouts/OrganizerHomepage/EventCard/index.tsx b/frontend/src/components/layouts/OrganizerHomepage/EventCard/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import {Link} from "react-router";
 import {Event} from "../../../../types.ts";
 import classes from './EventCard.module.scss';
-import {formatDate} from "../../../../utilites/dates.ts";
+import {formatDateWithLocale} from "../../../../utilites/dates.ts";
 import {t} from "@lingui/macro";
 import {isLightColor} from "@mantine/core";
 import {formatCurrency} from "../../../../utilites/currency.ts";
@@ -26,15 +26,15 @@ export const EventCard: React.FC<EventCardProps> = ({event, primaryColor = '#8b5
     const placeholderEmoji = placeholderEmojis[emojiIndex];
 
     // Format dates using the event's timezone
-    const startMonth = formatDate(event.start_date, "MMM", event.timezone);
-    const startDay = formatDate(event.start_date, "D", event.timezone);
-    const startTime = formatDate(event.start_date, "h:mm A", event.timezone);
-    const endTime = event.end_date ? formatDate(event.end_date, "h:mm A", event.timezone) : null;
-    const prettyTimezone = formatDate(event.start_date, "z", event.timezone);
+    const startMonth = formatDateWithLocale(event.start_date, "monthShort", event.timezone);
+    const startDay = formatDateWithLocale(event.start_date, "dayOfMonth", event.timezone);
+    const startTime = formatDateWithLocale(event.start_date, "timeOnly", event.timezone);
+    const endTime = event.end_date ? formatDateWithLocale(event.end_date, "timeOnly", event.timezone) : null;
+    const prettyTimezone = formatDateWithLocale(event.start_date, "timezone", event.timezone);
 
     const isSameDay = event.end_date && event.start_date.substring(0, 10) === event.end_date.substring(0, 10);
-    const endMonth = event.end_date ? formatDate(event.end_date, "MMM", event.timezone) : null;
-    const endDay = event.end_date ? formatDate(event.end_date, "D", event.timezone) : null;
+    const endMonth = event.end_date ? formatDateWithLocale(event.end_date, "monthShort", event.timezone) : null;
+    const endDay = event.end_date ? formatDateWithLocale(event.end_date, "dayOfMonth", event.timezone) : null;
 
     const coverImage = event.images?.find(img => img.type === 'EVENT_COVER');
     const location = event?.settings?.location_details?.city || event?.settings?.location_details?.venue_name;
diff --git a/frontend/src/components/routes/event/EventDashboard/index.tsx b/frontend/src/components/routes/event/EventDashboard/index.tsx
@@ -10,7 +10,7 @@ import {Card} from "../../../common/Card";
 import classes from "./EventDashboard.module.scss";
 import {useGetEventStats} from "../../../../queries/useGetEventStats.ts";
 import {formatCurrency} from "../../../../utilites/currency.ts";
-import {formatDate} from "../../../../utilites/dates.ts";
+import {formatDateWithLocale} from "../../../../utilites/dates.ts";
 import {Button, Skeleton} from "@mantine/core";
 import {useMediaQuery} from "@mantine/hooks";
 import {IconAlertCircle, IconX} from "@tabler/icons-react";
@@ -87,7 +87,7 @@ export const EventDashboard = () => {
     }
 
     const dateRange = (eventStats && event)
-        ? `${formatDate(eventStats.start_date, 'MMM DD', event?.timezone)} - ${formatDate(eventStats.end_date, 'MMM DD', event?.timezone)}`
+        ? `${formatDateWithLocale(eventStats.start_date, 'chartDate', event?.timezone)} - ${formatDateWithLocale(eventStats.end_date, 'chartDate', event?.timezone)}`
         : '';
 
     const shouldShowChecklist = (isChecklistVisible && event && accountIsFetched && account?.is_saas_mode_enabled) && (
@@ -255,7 +255,7 @@ export const EventDashboard = () => {
                     <AreaChart
                         h={300}
                         data={eventStats?.daily_stats.map(stat => ({
-                            date: formatDate(stat.date, 'MMM DD', event.timezone),
+                            date: formatDateWithLocale(stat.date, 'chartDate', event.timezone),
                             orders_created: stat.orders_created,
                             products_sold: stat.products_sold,
                             attendees_registered: stat.attendees_registered,
@@ -289,7 +289,7 @@ export const EventDashboard = () => {
                         h={300}
                         data={eventStats?.daily_stats.map(stat => {
                             return ({
-                                date: formatDate(stat.date, 'MMM DD', event.timezone),
+                                date: formatDateWithLocale(stat.date, 'chartDate', event.timezone),
                                 total_fees: stat.total_fees,
                                 total_sales_gross: stat.total_sales_gross,
                                 total_tax: stat.total_tax,
diff --git a/frontend/src/components/routes/event/Reports/DailySalesReport/index.tsx b/frontend/src/components/routes/event/Reports/DailySalesReport/index.tsx
@@ -1,7 +1,7 @@
 import {useParams} from "react-router";
 import {useGetEvent} from "../../../../../queries/useGetEvent.ts";
 import {formatCurrency} from "../../../../../utilites/currency.ts";
-import {formatDate} from "../../../../../utilites/dates.ts";
+import {formatDateWithLocale} from "../../../../../utilites/dates.ts";
 import ReportTable from "../../../../common/ReportTable";
 
 export const DailySalesReport = () => {
@@ -18,7 +18,7 @@ export const DailySalesReport = () => {
             key: 'date' as const,
             label: 'Date',
             sortable: true,
-            render: (value: string) => formatDate(value, 'MMM D, YYYY', event?.timezone)
+            render: (value: string) => formatDateWithLocale(value, 'shortDate', event?.timezone)
         },
         {
             key: 'sales_total_gross' as const,
diff --git a/frontend/src/components/routes/event/Reports/PromoCodesReport/index.tsx b/frontend/src/components/routes/event/Reports/PromoCodesReport/index.tsx
@@ -3,7 +3,7 @@ import {useGetEvent} from "../../../../../queries/useGetEvent.ts";
 import {formatCurrency} from "../../../../../utilites/currency.ts";
 import ReportTable from "../../../../common/ReportTable";
 import {t} from "@lingui/macro";
-import {formatDate} from "../../../../../utilites/dates.ts";
+import {formatDateWithLocale} from "../../../../../utilites/dates.ts";
 
 const PromoCodesReport = () => {
     const {eventId} = useParams();
@@ -63,13 +63,13 @@ const PromoCodesReport = () => {
             key: 'first_used_at' as const,
             label: t`First Used`,
             sortable: true,
-            render: (value: string) => value ? formatDate(value, 'MMM D, YYYY', event.timezone) : '-'
+            render: (value: string) => value ? formatDateWithLocale(value, 'shortDate', event.timezone) : '-'
         },
         {
             key: 'last_used_at' as const,
             label: t`Last Used`,
             sortable: true,
-            render: (value: string) => value ? formatDate(value, 'MMM D, YYYY', event.timezone) : '-'
+            render: (value: string) => value ? formatDateWithLocale(value, 'shortDate', event.timezone) : '-'
         },
         {
             key: 'max_allowed_usages' as const,
diff --git a/frontend/src/components/routes/organizer/Reports/CheckInSummaryReport/index.tsx b/frontend/src/components/routes/organizer/Reports/CheckInSummaryReport/index.tsx
@@ -1,6 +1,6 @@
 import {Link, useParams} from "react-router";
 import {useGetOrganizer} from "../../../../../queries/useGetOrganizer.ts";
-import {formatDate} from "../../../../../utilites/dates.ts";
+import {formatDateWithLocale} from "../../../../../utilites/dates.ts";
 import OrganizerReportTable from "../../../../common/OrganizerReportTable";
 import {t} from "@lingui/macro";
 
@@ -28,7 +28,7 @@ const CheckInSummaryReport = () => {
             key: 'start_date' as const,
             label: t`Event Date`,
             sortable: true,
-            render: (value: string) => value ? formatDate(value, 'MMM D, YYYY', organizer?.timezone) : '-'
+            render: (value: string) => value ? formatDateWithLocale(value, 'shortDate', organizer?.timezone || 'UTC') : '-'
         },
         {
             key: 'total_attendees' as const,
diff --git a/frontend/src/components/routes/organizer/Reports/EventsPerformanceReport/index.tsx b/frontend/src/components/routes/organizer/Reports/EventsPerformanceReport/index.tsx
@@ -2,7 +2,7 @@ import {Link, useParams} from "react-router";
 import {useGetOrganizer} from "../../../../../queries/useGetOrganizer.ts";
 import {useGetOrganizerStats} from "../../../../../queries/useGetOrganizerStats.ts";
 import {formatCurrency} from "../../../../../utilites/currency.ts";
-import {formatDate} from "../../../../../utilites/dates.ts";
+import {formatDateWithLocale} from "../../../../../utilites/dates.ts";
 import OrganizerReportTable from "../../../../common/OrganizerReportTable";
 import {t} from "@lingui/macro";
 import {Badge} from "@mantine/core";
@@ -55,7 +55,7 @@ const EventsPerformanceReport = () => {
             key: 'start_date' as const,
             label: t`Date`,
             sortable: true,
-            render: (value: string) => value ? formatDate(value, 'MMM D, YYYY', organizer?.timezone) : '-'
+            render: (value: string) => value ? formatDateWithLocale(value, 'shortDate', organizer?.timezone || 'UTC') : '-'
         },
         {
             key: 'event_state' as const,
diff --git a/frontend/src/components/routes/organizer/Reports/RevenueSummaryReport/index.tsx b/frontend/src/components/routes/organizer/Reports/RevenueSummaryReport/index.tsx
@@ -2,7 +2,7 @@ import {useParams} from "react-router";
 import {useGetOrganizer} from "../../../../../queries/useGetOrganizer.ts";
 import {useGetOrganizerStats} from "../../../../../queries/useGetOrganizerStats.ts";
 import {formatCurrency} from "../../../../../utilites/currency.ts";
-import {formatDate} from "../../../../../utilites/dates.ts";
+import {formatDateWithLocale} from "../../../../../utilites/dates.ts";
 import OrganizerReportTable from "../../../../common/OrganizerReportTable";
 import {t} from "@lingui/macro";
 
@@ -23,7 +23,7 @@ const RevenueSummaryReport = () => {
             key: 'date' as const,
             label: t`Date`,
             sortable: true,
-            render: (value: string) => formatDate(value, 'MMM D, YYYY', organizer?.timezone)
+            render: (value: string) => formatDateWithLocale(value, 'shortDate', organizer?.timezone || 'UTC')
         },
         {
             key: 'gross_sales' as const,
diff --git a/frontend/src/components/routes/profile/ManageProfile/index.tsx b/frontend/src/components/routes/profile/ManageProfile/index.tsx
@@ -1,7 +1,7 @@
 import {Card} from "../../../common/Card";
 import {useForm, UseFormReturnType} from "@mantine/form";
 import {useGetMe} from "../../../../queries/useGetMe.ts";
-import {Alert, Button, PasswordInput, Select, Tabs, TextInput} from "@mantine/core";
+import {Alert, Button, NativeSelect, PasswordInput, Select, Tabs, TextInput} from "@mantine/core";
 import classes from "./ManageProfile.module.scss";
 import {useEffect, useState} from "react";
 import {IconInfoCircle, IconPassword, IconUser} from "@tabler/icons-react";
@@ -13,7 +13,12 @@ import {useCancelEmailChange} from "../../../../mutations/useCancelEmailChange.t
 import {useFormErrorResponseHandler} from "../../../../hooks/useFormErrorResponseHandler.tsx";
 import {t, Trans} from "@lingui/macro";
 import {useResendEmailConfirmation} from "../../../../mutations/useResendEmailConfirmation.ts";
-import {getLocaleName, localeToFlagEmojiMap, localeToNameMap, SupportedLocales} from "../../../../locales.ts";
+import {localeToFlagEmojiMap, localeToNameMap, SupportedLocales} from "../../../../locales.ts";
+
+const localeSelectData = Object.keys(localeToNameMap).map(locale => ({
+    value: locale,
+    label: `${localeToFlagEmojiMap[locale as SupportedLocales]} ${localeToNameMap[locale as SupportedLocales]}`,
+}));
 
 export const ManageProfile = () => {
     const {data: me, isFetching} = useGetMe();
@@ -162,15 +167,12 @@ export const ManageProfile = () => {
                                         placeholder={t`UTC`}
                                     />
 
-                                    <Select
+                                    <NativeSelect
                                         required
-                                        data={Object.keys(localeToNameMap).map(locale => ({
-                                            value: locale,
-                                            label: localeToFlagEmojiMap[locale as SupportedLocales] + ' ' + getLocaleName(locale as SupportedLocales),
-                                        }))}
-                                        {...profileForm.getInputProps('locale')}
+                                        data={localeSelectData}
+                                        value={profileForm.values.locale || ''}
+                                        onChange={(e) => profileForm.setFieldValue('locale', e.target.value)}
                                         label={t`Language`}
-                                        placeholder={t`English`}
                                     />
 
                                     <Button fullWidth loading={mutation.isPending}
diff --git a/frontend/src/locales.ts b/frontend/src/locales.ts
@@ -1,5 +1,4 @@
 import {i18n} from "@lingui/core";
-import {t} from "@lingui/macro";
 
 export type SupportedLocales =
     "en"
@@ -51,7 +50,7 @@ export const localeToNameMap: Record<SupportedLocales, string> = {
 };
 
 export const getLocaleName = (locale: SupportedLocales) => {
-    return t`${localeToNameMap[locale]}`
+    return localeToNameMap[locale];
 }
 
 export const getClientLocale = () => {
diff --git a/frontend/src/utilites/dateLocales.ts b/frontend/src/utilites/dateLocales.ts
diff --git a/frontend/src/utilites/dates.ts b/frontend/src/utilites/dates.ts
