Respect hour12 settings when formatting local date (#33679)

* Respect hour12 settings when formatting local date

packages/grafana-data/src/datetime/formats.test.ts

@@ -14,6 +14,25 @@ describe('Date Formats', () => {
       ''
     );
 
-    expect(format).toBe('MM/DD/YYYY, HH:mm:ss A');
+    expect(format).toBe('MM/DD/YYYY, hh:mm:ss A');
+  });
+});
+
+describe('Date Formats without hour12', () => {
+  it('localTimeFormat', () => {
+    const format = localTimeFormat(
+      {
+        year: '2-digit',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        hour12: false,
+      },
+      ''
+    );
+
+    expect(format).toBe('MM/DD/YYYY, HH:mm:ss');
   });
 });

packages/grafana-data/src/datetime/formats.ts

@@ -97,12 +97,15 @@ export function localTimeFormat(
   }
 
   // https://momentjs.com/docs/#/displaying/format/
-  const parts = new Intl.DateTimeFormat(locale, options).formatToParts(new Date());
+  const dateTimeFormat = new Intl.DateTimeFormat(locale, options);
+  const parts = dateTimeFormat.formatToParts(new Date());
+  const hour12 = dateTimeFormat.resolvedOptions().hour12;
+
   const mapping: { [key: string]: string } = {
     year: 'YYYY',
     month: 'MM',
     day: 'DD',
-    hour: 'HH',
+    hour: hour12 ? 'hh' : 'HH',
     minute: 'mm',
     second: 'ss',
     weekday: 'ddd',