Use the hour cycle of the locale in timestamps

CHANGELOG.md

@@ -62,6 +62,7 @@ Legends:
 - Fixed the "Positive" card action button having less than 4.5:1 color contrast, fixes [#5713](https://github.com/microsoft/BotFramework-WebChat/issues/5713), in PR [#5905](https://github.com/microsoft/BotFramework-WebChat/pull/5905), by [@OEvgeny](https://github.com/OEvgeny)
 - Fixed screen readers announcing a single audio, video, or animation in a card as a list item, such as "1 of 1", fixes [#5722](https://github.com/microsoft/BotFramework-WebChat/issues/5722), in PR [#5903](https://github.com/microsoft/BotFramework-WebChat/pull/5903), by [@OEvgeny](https://github.com/OEvgeny)
 - Fixed video and animation cards disappearing in production builds when the video URL is relative or invalid, in PR [#5889](https://github.com/microsoft/BotFramework-WebChat/pull/5889), by [@OEvgeny](https://github.com/OEvgeny)
+- Fixed timestamps always using the 12-hour clock, such as "4:41 PM" instead of "16:41" in German, in PR [#5920](https://github.com/microsoft/BotFramework-WebChat/pull/5920), by [@OEvgeny](https://github.com/OEvgeny)
 
 ## [4.19.2] - 2026-10-08
 

__tests__/html2/timestamp/absolute.hourCycle.html

@@ -0,0 +1,82 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.production.min.js"></script>
+    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.production.min.js"></script>
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "@testduet/wait-for": "https://esm.sh/@testduet/wait-for"
+        }
+      }
+    </script>
+    <script type="module">
+      import { waitFor } from '@testduet/wait-for';
+
+      run(async function () {
+        const {
+          React: { createElement },
+          ReactDOM: { render },
+          WebChat: { ReactWebChat }
+        } = window; // Imports in UMD fashion.
+
+        const { directLine, store } = testHelpers.createDirectLineEmulator();
+
+        const renderWebChat = locale =>
+          render(
+            createElement(ReactWebChat, {
+              directLine,
+              locale,
+              store,
+              styleOptions: { hideSendBox: true, timestampFormat: 'absolute' }
+            }),
+            document.getElementById('webchat')
+          );
+
+        renderWebChat('en-US');
+
+        await pageConditions.uiConnected();
+
+        // WHEN: A message is received in the afternoon.
+        await directLine.emulateIncomingActivity({
+          from: { id: 'bot', role: 'bot' },
+          text: 'Hello, World!',
+          timestamp: '2019-08-08T16:41:12.000Z', // The test browser runs in UTC.
+          type: 'message'
+        });
+
+        await pageConditions.numActivitiesShown(1);
+
+        // THEN: In "en-US", the timestamp should use the 12-hour clock of the locale.
+        expect(testHelpers.getAllTextContents(pageElements.activityStatuses()[0])).toEqual([
+          'Sent at August 8 at 4:41 PM', // Screen reader text.
+          'August 8 at 4:41 PM' // Visible text.
+        ]);
+
+        // THEN: Should show "August 8 at 4:41 PM".
+        await host.snapshot('local');
+
+        // WHEN: The locale is changed to "de-DE".
+        renderWebChat('de-DE');
+
+        // THEN: In "de-DE", the timestamp should use the 24-hour clock of the locale, without "PM".
+        await waitFor(() =>
+          expect(testHelpers.getAllTextContents(pageElements.activityStatuses()[0])).toEqual([
+            'Gesendet um 8. August um 16:41', // Screen reader text.
+            '8. August um 16:41' // Visible text.
+          ])
+        );
+
+        // THEN: Should show "8. August um 16:41".
+        await host.snapshot('local');
+      });
+    </script>
+  </body>
+</html>

packages/api/scripts/createPrecompiledGlobalize.mjs

@@ -27,7 +27,7 @@ import { fileURLToPath } from 'url';
     return [
       ...formattersAndParsers,
       ...[
-        globalize.dateFormatter({ skeleton: 'MMMMdhm' }),
+        globalize.dateFormatter({ skeleton: 'MMMMdjm' }),
         globalize.pluralGenerator(),
         globalize.relativeTimeFormatter('hour'),
         globalize.relativeTimeFormatter('minute'),

packages/api/src/hooks/useDateFormatter.ts

@@ -10,7 +10,7 @@ export default function useDateFormatter(): (date: Date | number | string) => st
   const [globalize] = useLocalizedGlobalize();
 
   const formatDate = useMemo(
-    () => date => globalize.dateFormatter({ skeleton: 'MMMMdhm' })(new Date(date)),
+    () => date => globalize.dateFormatter({ skeleton: 'MMMMdjm' })(new Date(date)),
     [Date, globalize]
   );
 

packages/api/src/types/PrecompiledGlobalize.ts

@@ -1,5 +1,5 @@
 type PrecompiledGlobalize = {
-  dateFormatter: ({ skeleton }: { skeleton: 'MMMMdhm' }) => string;
+  dateFormatter: ({ skeleton }: { skeleton: 'MMMMdjm' }) => string;
   relativeTimeFormatter: (format: 'hour' | 'minute') => string;
   unitFormatter:
     | ((unit: 'byte', options: { form: 'long' }) => string)