A few more date picker strings that need to be translated

frontend/src/metabase-lib/lib/Dimension.js

@@ -453,7 +453,7 @@ export class DatetimeFieldDimension extends FieldDimension {
   }
 
   subTriggerDisplayName(): string {
-    return "by " + formatBucketing(this._args[0]).toLowerCase();
+    return t`by ${formatBucketing(this._args[0]).toLowerCase()}`;
   }
 
   render() {

frontend/src/metabase/parameters/components/widgets/DateQuarterYearWidget.jsx

@@ -5,6 +5,10 @@ import YearPicker from "./YearPicker.jsx";
 import moment from "moment";
 import _ from "underscore";
 import cx from "classnames";
+import { t } from "c-3po";
+
+// translator: this is a "moment" format string (https://momentjs.com/docs/#/displaying/format/) It should include "Q" for the quarter number, and raw text can be escaped by brackets. For eample "[Quarter] Q" will be rendered as "Quarter 1" etc
+const QUARTER_FORMAT_STRING = t`[Q]Q`;
 
 export default class DateQuarterYearWidget extends Component {
   constructor(props, context) {
@@ -84,6 +88,6 @@ const Quarter = ({ quarter, selected, onClick }) => (
   >
     {moment()
       .quarter(quarter)
-      .format("[Q]Q")}
+      .format(QUARTER_FORMAT_STRING)}
   </li>
 );

frontend/src/metabase/parameters/components/widgets/DateRelativeWidget.jsx

@@ -20,12 +20,12 @@ const SHORTCUTS = [
 ];
 
 const RELATIVE_SHORTCUTS = {
-  Last: [
+  [t`Last`]: [
     { name: t`Week`, operator: "time-interval", values: ["last", "week"] },
     { name: t`Month`, operator: "time-interval", values: ["last", "month"] },
     { name: t`Year`, operator: "time-interval", values: ["last", "year"] },
   ],
-  This: [
+  [t`This`]: [
     { name: t`Week`, operator: "time-interval", values: ["current", "week"] },
     { name: t`Month`, operator: "time-interval", values: ["current", "month"] },
     { name: t`Year`, operator: "time-interval", values: ["current", "year"] },

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

@@ -4,6 +4,7 @@ import NumericInput from "metabase/components/NumericInput.jsx";
 import Icon from "metabase/components/Icon";
 
 import cx from "classnames";
+import moment from "moment";
 
 const HoursMinutesInput = ({
   hours,
@@ -11,6 +12,7 @@ const HoursMinutesInput = ({
   onChangeHours,
   onChangeMinutes,
   onClear,
+  is24HourMode = false,
 }) => (
   <div className="flex align-center">
     <NumericInput
@@ -18,8 +20,16 @@ const HoursMinutesInput = ({
       style={{ height: 36 }}
       size={2}
       maxLength={2}
-      value={hours % 12 === 0 ? "12" : String(hours % 12)}
-      onChange={value => onChangeHours((hours >= 12 ? 12 : 0) + value)}
+      value={
+        is24HourMode
+          ? String(hours)
+          : hours % 12 === 0 ? "12" : String(hours % 12)
+      }
+      onChange={
+        is24HourMode
+          ? value => onChangeHours(value)
+          : value => onChangeHours((hours >= 12 ? 12 : 0) + value)
+      }
     />
     <span className="px1">:</span>
     <NumericInput
@@ -30,26 +40,28 @@ const HoursMinutesInput = ({
       value={(minutes < 10 ? "0" : "") + minutes}
       onChange={value => onChangeMinutes(value)}
     />
-    <div className="flex align-center pl1">
-      <span
-        className={cx("text-purple-hover mr1", {
-          "text-purple": hours < 12,
-          "cursor-pointer": hours >= 12,
-        })}
-        onClick={hours >= 12 ? () => onChangeHours(hours - 12) : null}
-      >
-        AM
-      </span>
-      <span
-        className={cx("text-purple-hover mr1", {
-          "text-purple": hours >= 12,
-          "cursor-pointer": hours < 12,
-        })}
-        onClick={hours < 12 ? () => onChangeHours(hours + 12) : null}
-      >
-        PM
-      </span>
-    </div>
+    {!is24HourMode && (
+      <div className="flex align-center pl1">
+        <span
+          className={cx("text-purple-hover mr1", {
+            "text-purple": hours < 12,
+            "cursor-pointer": hours >= 12,
+          })}
+          onClick={hours >= 12 ? () => onChangeHours(hours - 12) : null}
+        >
+          {moment.localeData().meridiem(0)}
+        </span>
+        <span
+          className={cx("text-purple-hover mr1", {
+            "text-purple": hours >= 12,
+            "cursor-pointer": hours < 12,
+          })}
+          onClick={hours < 12 ? () => onChangeHours(hours + 12) : null}
+        >
+          {moment.localeData().meridiem(12)}
+        </span>
+      </div>
+    )}
     {onClear && (
       <Icon
         className="text-light cursor-pointer text-medium-hover ml-auto"