show am/pm if locale uses 12-hour clock (#11049)

frontend/src/metabase/lib/i18n.js

@@ -25,6 +25,13 @@ export function setLocalization(translationsObject) {
   moment.locale(locale);
 }
 
+// Format a fixed timestamp in local time to see if the current locale defaults
+// to using a 24 hour clock.
+export function isLocale24Hour() {
+  const formattedTime = moment("2000-01-01T13:00:00").format("LT");
+  return /^13:/.test(formattedTime);
+}
+
 // we delete msgid property since it's redundant, but have to add it back in to
 // make ttag happy
 function addMsgIds(translationsObject) {

frontend/src/metabase/query_builder/components/filters/pickers/HoursMinutesInput.jsx

@@ -2,6 +2,7 @@ import React from "react";
 
 import NumericInput from "metabase/components/NumericInput";
 import Icon from "metabase/components/Icon";
+import { isLocale24Hour } from "metabase/lib/i18n";
 
 import cx from "classnames";
 import moment from "moment";
@@ -12,7 +13,7 @@ const HoursMinutesInput = ({
   onChangeHours,
   onChangeMinutes,
   onClear,
-  is24HourMode = false,
+  is24HourMode = isLocale24Hour(),
 }) => (
   <div className="flex align-center">
     <NumericInput

frontend/test/metabase/lib/i18n.unit.spec.js

+import moment from "moment";
+
+import { isLocale24Hour } from "metabase/lib/i18n";
+
+describe("isLocale24Hour", () => {
+  const testCases = [
+    ["en", false],
+    ["en-us", false],
+    ["en-gb", true],
+    ["fr", true],
+    ["zh-cn", true],
+  ];
+  for (const [locale, is24] of testCases) {
+    it(`should return ${is24} for '${locale}'`, () => {
+      // save locale before changing it
+      const startingLocale = moment.locale();
+
+      moment.locale(locale);
+      expect(isLocale24Hour()).toBe(is24);
+
+      // reset locale
+      moment.locale(startingLocale);
+    });
+  }
+});