Use Intl to localise dates and times

src/DateUtils.ts

@@ -43,16 +43,25 @@ export function getMonthsArray(month: Intl.DateTimeFormatOptions["month"] = "sho
     return [...Array(12).keys()].map((m) => format(Date.UTC(2021, m)));
 }
 
+// XXX: Ideally we could just specify `hour12: boolean` but it has issues on Chrome in the `en` locale
+// https://support.google.com/chrome/thread/29828561?hl=en
+function getTwelveHourOptions(showTwelveHour: boolean): Intl.DateTimeFormatOptions {
+    return {
+        hourCycle: showTwelveHour ? "h12" : "h23",
+    };
+}
+
 /**
- * Formats a given date to a date & time string with
- * variable resolution depending on far away the given date it from now.
+ * Formats a given date to a date & time string.
+ *
+ * The output format depends on how far away the given date is from now.
  * Will use the browser's default time zone.
  * If the date is today it will return a time string excluding seconds. See {@formatTime}.
  * If the date is within the last 6 days it will return the name of the weekday along with the time string excluding seconds.
  * If the date is within the same year then it will return the weekday, month and day of the month along with the time string excluding seconds.
  * Otherwise, it will return a string representing the full date & time in a human friendly manner. See {@formatFullDate}.
  * @param date - date object to format
- * @param showTwelveHour - whether to use 12-hour mode instead of default 24-hour mode
+ * @param showTwelveHour - whether to use 12-hour rather than 24-hour time. Defaults to `false` (24 hour mode). Overrides the default from the locale, whether `true` or `false`.
  * @param locale - the locale string to use, in BCP 47 format, defaulting to user's selected application locale
  */
 export function formatDate(date: Date, showTwelveHour = false, locale?: string): string {
@@ -61,28 +70,29 @@ export function formatDate(date: Date, showTwelveHour = false, locale?: string):
     if (date.toDateString() === now.toDateString()) {
         return formatTime(date, showTwelveHour, _locale);
     } else if (now.getTime() - date.getTime() < 6 * DAY_MS) {
-        // Time is less than 6 days into the future.
+        // Time is within the last 6 days (or in the future)
         return new Intl.DateTimeFormat(_locale, {
+            ...getTwelveHourOptions(showTwelveHour),
             weekday: "short",
             hour: "numeric",
             minute: "2-digit",
-            hour12: showTwelveHour,
         }).format(date);
     } else if (now.getFullYear() === date.getFullYear()) {
         return new Intl.DateTimeFormat(_locale, {
+            ...getTwelveHourOptions(showTwelveHour),
             weekday: "short",
             month: "short",
             day: "numeric",
             hour: "numeric",
             minute: "2-digit",
-            hour12: showTwelveHour,
         }).format(date);
     }
     return formatFullDate(date, showTwelveHour, false, _locale);
 }
 
 /**
- * Formats a given date to a human-friendly string with short weekday
+ * Formats a given date to a human-friendly string with short weekday.
+ * Will use the browser's default time zone.
  * @example "Thu, 17 Nov 2022" in en-GB locale
  * @param date - date object to format
  * @param locale - the locale string to use, in BCP 47 format, defaulting to user's selected application locale
@@ -97,7 +107,8 @@ export function formatFullDateNoTime(date: Date, locale?: string): string {
 }
 
 /**
- * Formats a given date to a date & time string, optionally including seconds
+ * Formats a given date to a date & time string, optionally including seconds.
+ * Will use the browser's default time zone.
  * @example "Thu, 17 Nov 2022, 4:58:32 pm" in en-GB locale with showTwelveHour=true and showSeconds=true
  * @param date - date object to format
  * @param showTwelveHour - whether to use 12-hour mode instead of default 24-hour mode
@@ -106,20 +117,20 @@ export function formatFullDateNoTime(date: Date, locale?: string): string {
  */
 export function formatFullDate(date: Date, showTwelveHour = false, showSeconds = true, locale?: string): string {
     return new Intl.DateTimeFormat(locale ?? getUserLanguage(), {
+        ...getTwelveHourOptions(showTwelveHour),
         weekday: "short",
         month: "short",
         day: "numeric",
         year: "numeric",
         hour: "numeric",
         minute: "2-digit",
         second: showSeconds ? "2-digit" : undefined,
-        hour12: showTwelveHour,
     }).format(date);
 }
 
 /**
  * Formats dates to be compatible with attributes of a `<input type="date">`. Dates
- * should be formatted like "2020-06-23" (formatted according to ISO8601)
+ * should be formatted like "2020-06-23" (formatted according to ISO8601).
  *
  * @param date The date to format.
  * @returns The date string in ISO8601 format ready to be used with an `<input>`
@@ -132,7 +143,8 @@ export function formatDateForInput(date: Date): string {
 }
 
 /**
- * Formats a given date to a time string including seconds
+ * Formats a given date to a time string including seconds.
+ * Will use the browser's default time zone.
  * @example "4:58:32 PM" in en-GB locale with showTwelveHour=true
  * @example "16:58:32" in en-GB locale with showTwelveHour=false
  * @param date - date object to format
@@ -141,15 +153,16 @@ export function formatDateForInput(date: Date): string {
  */
 export function formatFullTime(date: Date, showTwelveHour = false, locale?: string): string {
     return new Intl.DateTimeFormat(locale ?? getUserLanguage(), {
+        ...getTwelveHourOptions(showTwelveHour),
         hour: "numeric",
         minute: "2-digit",
         second: "2-digit",
-        hour12: showTwelveHour,
     }).format(date);
 }
 
 /**
- * Formats a given date to a time string excluding seconds
+ * Formats a given date to a time string excluding seconds.
+ * Will use the browser's default time zone.
  * @example "4:58 PM" in en-GB locale with showTwelveHour=true
  * @example "16:58" in en-GB locale with showTwelveHour=false
  * @param date - date object to format
@@ -158,9 +171,9 @@ export function formatFullTime(date: Date, showTwelveHour = false, locale?: stri
  */
 export function formatTime(date: Date, showTwelveHour = false, locale?: string): string {
     return new Intl.DateTimeFormat(locale ?? getUserLanguage(), {
+        ...getTwelveHourOptions(showTwelveHour),
         hour: "numeric",
         minute: "2-digit",
-        hour12: showTwelveHour,
     }).format(date);
 }
 
@@ -257,7 +270,8 @@ export function formatFullDateNoDayISO(date: Date): string {
 }
 
 /**
- * Formats a given date to a string
+ * Formats a given date to a string.
+ * Will use the browser's default time zone.
  * @example 17/11/2022 in en-GB locale
  * @param date - date object to format
  * @param locale - the locale string to use, in BCP 47 format, defaulting to user's selected application locale

src/languageHandler.tsx

@@ -93,7 +93,7 @@ export class UserFriendlyError extends Error {
 
 export function getUserLanguage(): string {
     const language = SettingsStore.getValue("language", null, /*excludeDefault:*/ true);
-    if (typeof language === "string" && !!language) {
+    if (typeof language === "string" && language !== "") {
         return language;
     } else {
         return normalizeLanguageKey(getLanguageFromBrowser());

test/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap

@@ -77,7 +77,7 @@ exports[`<MessageEditHistory /> should match the snapshot 1`] = `
                   <span
                     class="mx_MessageTimestamp"
                   >
-                    24:00
+                    00:00
                   </span>
                   <div
                     class="mx_EventTile_content"
@@ -193,7 +193,7 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
                   <span
                     class="mx_MessageTimestamp"
                   >
-                    24:00
+                    00:00
                   </span>
                   <div
                     class="mx_EventTile_content"
@@ -236,7 +236,7 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
                   <span
                     class="mx_MessageTimestamp"
                   >
-                    24:00
+                    00:00
                   </span>
                   <div
                     class="mx_EventTile_content"
@@ -290,7 +290,7 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
                   <span
                     class="mx_MessageTimestamp"
                   >
-                    24:00
+                    00:00
                   </span>
                   <div
                     class="mx_EventTile_content"

test/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap

@@ -51,7 +51,7 @@ exports[`<PinnedEventTile /> should render pinned event 1`] = `
       <span
         class="mx_MessageTimestamp mx_PinnedEventTile_timestamp"
       >
-        Thu, Jan 1, 1970, 24:00
+        Thu, Jan 1, 1970, 00:00
       </span>
       <div
         class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"

test/components/views/settings/devices/DeviceDetails-test.tsx

@@ -45,7 +45,6 @@ describe("<DeviceDetails />", () => {
 
     beforeEach(() => {
         jest.setSystemTime(now);
-        jest.spyOn(Date, "now").mockImplementation(() => now);
     });
 
     it("renders device without metadata", () => {

test/utils/DateUtils-test.ts

@@ -350,7 +350,7 @@ describe("formatFullDateNoDayISO", () => {
 });
 
 describe("formatFullDateNoDayNoTime", () => {
-    it("should return en-GB locale", () => {
+    it("should return a date formatted for en-GB locale", () => {
         expect(formatFullDateNoDayNoTime(REPEATABLE_DATE, "en-GB")).toMatchInlineSnapshot(`"17/11/2022"`);
     });
 });