Systematize date range formats in Filter name (#32490)

frontend/src/metabase-lib/queries/structured/Filter.ts

@@ -2,13 +2,13 @@
 // @ts-nocheck
 import { t, ngettext, msgid } from "ttag";
 import _ from "underscore";
-import moment from "moment-timezone";
 import type {
   Filter as FilterObject,
   FieldFilter,
   FieldReference,
 } from "metabase-types/api";
 import { formatDateTimeRangeWithUnit } from "metabase/lib/formatting/date";
+import { parseTimestamp } from "metabase/lib/time";
 import { isExpression } from "metabase-lib/expressions";
 import { getFilterArgumentFormatOptions } from "metabase-lib/operators/utils";
 import {
@@ -63,40 +63,26 @@ export default class Filter extends MBQLClause {
     return this._query.removeFilter(this._index);
   }
 
-  betterDateLabel() {
-    const args = this.arguments();
-    if (!args.every(arg => typeof arg === "string")) {
-      return undefined;
-    }
-    const unit = this.dimension()?.temporalUnit();
-    const isSupportedDateRangeUnit = [
-      "day",
-      "week",
-      "month",
-      "quarter",
-      "year",
-    ].includes(unit);
-    const op = this.operatorName();
-    const betweenDates = op === "between" && isSupportedDateRangeUnit;
-    const equalsWeek = op === "=" && unit === "week";
-    if (betweenDates || equalsWeek) {
-      return formatDateTimeRangeWithUnit(args, unit, {
-        type: "tooltip",
-        date_resolution: unit === "week" ? "day" : unit,
-      });
-    }
-    const sliceFormat = {
-      // modified from DEFAULT_DATE_FORMATS in date.tsx to show extra context
-      "hour-of-day": "[hour] H",
-      "minute-of-hour": "[minute] m",
-      "day-of-month": "Do [day of month]",
-      "day-of-year": "DDDo [day of year]",
-      "week-of-year": "wo [week of year]",
-    }[unit];
-    const m = moment(args[0]);
-    if (op === "=" && sliceFormat && m.isValid()) {
-      return m.format(sliceFormat);
+  /**
+   * Returns the array of arguments as dates if they are specific dates, and returns their temporal unit.
+   */
+  specificDateArgsAndUnit() {
+    const field = this.dimension()?.field();
+    const isSpecific = ["=", "between", "<", ">"].includes(this.operatorName());
+    if ((field?.isDate() || field?.isTime()) && isSpecific) {
+      const args = this.arguments();
+      const dates = args.map(d => parseTimestamp(d));
+      if (dates.every(d => d.isValid())) {
+        const detectedUnit = dates.some(d => d.minutes())
+          ? "minute"
+          : dates.some(d => d.hours())
+          ? "hour"
+          : "day";
+        const unit = this.dimension()?.temporalUnit() ?? detectedUnit;
+        return [dates, unit];
+      }
     }
+    return [undefined, undefined];
   }
 
   /**
@@ -113,12 +99,17 @@ export default class Filter extends MBQLClause {
       if (isStartingFrom(this)) {
         includeOperator = false;
       }
-      const betterDate = this.betterDateLabel();
-      const op = betterDate ? "=" : this.operatorName();
+      const [dates, dateUnit] = this.specificDateArgsAndUnit();
+      const origOp = this.operatorName();
+      const dateRangeStr =
+        dates &&
+        ["=", "between"].includes(origOp) &&
+        formatDateTimeRangeWithUnit(dates, dateUnit, { type: "tooltip" });
+      const op = dateRangeStr ? "=" : origOp;
       return [
         includeDimension && this.dimension()?.displayName(),
         includeOperator && this.operator(op)?.moreVerboseName,
-        betterDate ?? this.formattedArguments().join(" "),
+        dateRangeStr || this.formattedArguments().join(" "),
       ]
         .map(s => s || "")
         .join(" ");

frontend/src/metabase-lib/queries/utils/query-time.js

@@ -434,8 +434,8 @@ export function setRelativeDatetimeValue(filter, value) {
   return filter;
 }
 
-const DATE_FORMAT = "YYYY-MM-DD";
-const DATE_TIME_FORMAT = "YYYY-MM-DDTHH:mm:ss";
+export const DATE_FORMAT = "YYYY-MM-DD";
+export const DATE_TIME_FORMAT = "YYYY-MM-DDTHH:mm:ss";
 
 export const getTimeComponent = value => {
   let hours = null;

frontend/src/metabase/lib/formatting/date.tsx

@@ -55,6 +55,436 @@ const DATE_STYLE_TO_FORMAT: DATE_STYLE_TO_FORMAT_TYPE = {
   },
 };
 
+const DATE_RANGE_MONTH_PLACEHOLDER = "<MONTH>";
+
+type DateVal = string | number | Moment;
+
+interface DateRangeFormatSpec {
+  same: null | moment.unitOfTime.StartOf;
+  format: [string] | [string, string];
+  dashPad?: string;
+  test: {
+    output: string;
+    verboseOutput?: string;
+    input: [DateVal] | [DateVal, DateVal];
+  };
+}
+
+export const DATE_RANGE_FORMAT_SPECS: {
+  [unit in DatetimeUnit]: DateRangeFormatSpec[];
+} = (() => {
+  // dates
+  const Y = "YYYY";
+  const Q = "[Q]Q";
+  const QY = "[Q]Q YYYY";
+  const M = DATE_RANGE_MONTH_PLACEHOLDER;
+  const MY = `${M} YYYY`;
+  const MDY = `${M} D, YYYY`;
+  const MD = `${M} D`;
+  const DY = "D, YYYY";
+
+  // times
+  const T = "h:mm";
+  const TA = "h:mm A";
+  const MA = "mm A";
+  const MDYT = `${MDY}, ${T}`;
+  const MDYTA = `${MDY}, ${TA}`;
+  const MDTA = `${MD}, ${TA}`;
+
+  // accumulations
+  // S = singular, P = plural
+  const DDDoS = "DDDo [day of the year]";
+  const DDDoP = "DDDo [days of the year]";
+  const DoS = "Do [day of the month]";
+  const DoP = "Do [days of the month]";
+  const woS = "wo [week of the year]";
+  const woP = "wo [weeks of the year]";
+  const mmS = "[minute] :mm";
+  const mmP = "[minutes] :mm";
+
+  // For a readable table, see the PR description for:
+  // https://github.com/metabase/metabase/pull/32490
+  return {
+    default: [],
+    // Use Wikipedia’s date range formatting guidelines for some of these:
+    // https://en.wikipedia.org/wiki/Wikipedia:Manual_of_Style/Dates_and_numbers#Ranges
+    year: [
+      {
+        same: "year",
+        format: [Y],
+        test: { output: "2018", input: ["2018"] },
+      },
+      {
+        same: null,
+        format: [Y, Y],
+        test: { output: "2018–2019", input: ["2018", "2019"] },
+      },
+    ],
+    quarter: [
+      {
+        same: "quarter",
+        format: [QY],
+        test: {
+          output: "Q2 2018",
+          input: ["2018-04-01"],
+        },
+      },
+      {
+        same: "year",
+        format: [Q, QY],
+        test: {
+          output: "Q2–Q4 2018",
+          verboseOutput: "Q2 2018 – Q4 2018",
+          input: ["2018-04-01", "2018-10-01"],
+        },
+      },
+      {
+        same: null,
+        format: [QY, QY],
+        dashPad: " ",
+        test: {
+          output: "Q2 2018 – Q3 2019",
+          input: ["2018-04-01", "2019-07-01"],
+        },
+      },
+    ],
+    "quarter-of-year": [
+      {
+        same: "quarter",
+        format: [Q],
+        test: {
+          output: "Q2",
+          input: ["2018-04-01"],
+        },
+      },
+      {
+        same: null,
+        format: [Q, Q],
+        test: {
+          output: "Q2–Q4",
+          input: ["2018-04-01", "2018-10-01"],
+        },
+      },
+    ],
+    month: [
+      {
+        same: "month",
+        format: [MY],
+        test: {
+          output: "September 2018",
+          input: ["2018-09-01"],
+        },
+      },
+      {
+        same: "year",
+        format: [M, MY],
+        test: {
+          output: "September–December 2018",
+          verboseOutput: "September 2018 – December 2018",
+          input: ["2018-09-01", "2018-12-01"],
+        },
+      },
+      {
+        same: null,
+        format: [MY, MY],
+        dashPad: " ",
+        test: {
+          output: "September 2018 – January 2019",
+          input: ["2018-09-01", "2019-01-01"],
+        },
+      },
+    ],
+    "month-of-year": [
+      {
+        same: "month",
+        format: [M],
+        test: {
+          output: "September",
+          input: ["2018-09-01"],
+        },
+      },
+      {
+        same: null,
+        format: [M, M],
+        test: {
+          output: "September–December",
+          input: ["2018-09-01", "2018-12-01"],
+        },
+      },
+    ],
+    week: [
+      {
+        same: "month",
+        format: [MD, DY],
+        test: {
+          output: "January 1–21, 2017",
+          verboseOutput: "January 1, 2017 – January 21, 2017",
+          input: ["2017-01-01", "2017-01-15"],
+        },
+      },
+      {
+        same: "year",
+        format: [MD, MDY],
+        dashPad: " ",
+        test: {
+          output: "January 1 – May 20, 2017",
+          verboseOutput: "January 1, 2017 – May 20, 2017",
+          input: ["2017-01-01", "2017-05-14"],
+        },
+      },
+      {
+        same: null,
+        format: [MDY, MDY],
+        dashPad: " ",
+        test: {
+          output: "January 1, 2017 – February 10, 2018",
+          input: ["2017-01-01", "2018-02-04"],
+        },
+      },
+    ],
+    "week-of-year": [
+      {
+        same: "week",
+        format: [woS],
+        test: {
+          output: "20th week of the year",
+          input: ["2017-05-14"],
+        },
+      },
+      {
+        same: null,
+        format: ["wo", woP],
+        test: {
+          output: "34th–40th weeks of the year",
+          input: ["2017-08-20", "2017-10-01"],
+        },
+      },
+    ],
+    day: [
+      {
+        same: "day",
+        format: [MDY],
+        test: {
+          output: "January 1, 2018",
+          input: ["2018-01-01"],
+        },
+      },
+      {
+        same: "month",
+        format: [MD, DY],
+        test: {
+          output: "January 1–2, 2018",
+          verboseOutput: "January 1, 2018 – January 2, 2018",
+          input: ["2018-01-01", "2018-01-02"],
+        },
+      },
+      {
+        same: "year",
+        format: [MD, MDY],
+        dashPad: " ",
+        test: {
+          output: "January 1 – February 2, 2018",
+          verboseOutput: "January 1, 2018 – February 2, 2018",
+          input: ["2018-01-01", "2018-02-02"],
+        },
+      },
+      {
+        same: null,
+        format: [MDY, MDY],
+        dashPad: " ",
+        test: {
+          output: "January 1, 2018 – February 2, 2019",
+          input: ["2018-01-01", "2019-02-02"],
+        },
+      },
+    ],
+    "day-of-year": [
+      {
+        same: "day",
+        format: [DDDoS],
+        test: {
+          output: "123rd day of the year",
+          input: ["2017-05-03"],
+        },
+      },
+      {
+        same: null,
+        format: ["DDDo", DDDoP],
+        test: {
+          output: "100th–123rd days of the year",
+          input: ["2017-04-10", "2017-05-03"],
+        },
+      },
+    ],
+    "day-of-month": [
+      {
+        same: "day",
+        format: [DoS],
+        test: {
+          output: "20th day of the month",
+          input: ["2017-02-20"],
+        },
+      },
+      {
+        same: null,
+        format: ["Do", DoP],
+        test: {
+          output: "10th–12th days of the month",
+          input: ["2017-02-10", "2017-02-12"],
+        },
+      },
+    ],
+    "day-of-week": [
+      {
+        same: "day",
+        format: ["dddd"],
+        test: {
+          output: "Monday",
+          input: ["2017-01-02"],
+        },
+      },
+      {
+        same: null,
+        format: ["dddd", "dddd"],
+        dashPad: " ",
+        test: {
+          output: "Monday – Thursday",
+          input: ["2017-01-02", "2017-01-05"],
+        },
+      },
+    ],
+    hour: [
+      {
+        same: "hour",
+        format: [MDYT, MA],
+        test: {
+          output: "January 1, 2018, 11:00–59 AM",
+          input: ["2018-01-01T11:00"],
+        },
+      },
+      {
+        same: "day",
+        format: [MDYTA, TA],
+        dashPad: " ",
+        test: {
+          output: "January 1, 2018, 11:00 AM – 2:59 PM",
+          input: ["2018-01-01T11:00", "2018-01-01T14:59"],
+        },
+      },
+      {
+        same: "year",
+        format: [MDTA, MDYTA],
+        dashPad: " ",
+        test: {
+          output: "January 1, 11:00 AM – February 2, 2018, 2:59 PM",
+          input: ["2018-01-01T11:00", "2018-02-02T14:59"],
+        },
+      },
+      {
+        same: null,
+        format: [MDYTA, MDYTA],
+        dashPad: " ",
+        test: {
+          output: "January 1, 2018, 11:00 AM – February 2, 2019, 2:59 PM",
+          input: ["2018-01-01T11:00", "2019-02-02T14:59"],
+        },
+      },
+    ],
+    "hour-of-day": [
+      {
+        same: "hour",
+        format: [T, MA],
+        test: {
+          output: "11:00–59 AM",
+          input: ["2018-01-01T11:00"],
+        },
+      },
+      {
+        same: null,
+        format: [TA, TA],
+        dashPad: " ",
+        test: {
+          output: "11:00 AM – 4:59 PM",
+          input: ["2018-01-01T11:00", "2018-01-01T16:00"],
+        },
+      },
+    ],
+    minute: [
+      {
+        same: "minute",
+        format: [MDYTA],
+        test: {
+          output: "January 1, 2018, 11:20 AM",
+          input: ["2018-01-01T11:20"],
+        },
+      },
+      {
+        same: "day",
+        format: [MDYTA, TA],
+        dashPad: " ",
+        test: {
+          output: "January 1, 2018, 11:20 AM – 2:35 PM",
+          input: ["2018-01-01T11:20", "2018-01-01T14:35"],
+        },
+      },
+      {
+        same: "year",
+        format: [MDTA, MDYTA],
+        dashPad: " ",
+        test: {
+          output: "January 1, 11:20 AM – February 2, 2018, 2:35 PM",
+          input: ["2018-01-01T11:20", "2018-02-02T14:35"],
+        },
+      },
+      {
+        same: null,
+        format: [MDYTA, MDYTA],
+        dashPad: " ",
+        test: {
+          output: "January 1, 2018, 11:20 AM – January 2, 2019, 2:35 PM",
+          input: ["2018-01-01T11:20", "2019-01-02T14:35"],
+        },
+      },
+    ],
+    "minute-of-hour": [
+      {
+        same: "minute",
+        format: [mmS],
+        test: {
+          output: "minute :05",
+          input: ["2018-01-01T11:05"],
+        },
+      },
+      {
+        same: null,
+        format: [mmP, "mm"],
+        test: {
+          output: "minutes :05–30",
+          input: ["2018-01-01T11:05", "2018-01-01T11:30"],
+        },
+      },
+    ],
+  };
+})();
+
+export const SPECIFIC_DATE_TIME_UNITS: DatetimeUnit[] = [
+  "year",
+  "quarter",
+  "quarter-of-year",
+  "month",
+  "month-of-year",
+  "week",
+  "week-of-year",
+  "day",
+  "day-of-week",
+  "day-of-month",
+  "day-of-year",
+  "hour",
+  "hour-of-day",
+  "minute",
+  "minute-of-hour",
+];
+
 const getDayFormat = (options: OptionsType) =>
   options.compact || options.date_abbreviate ? "ddd" : "dddd";
 
@@ -125,91 +555,82 @@ export function formatDateTimeForParameter(value: string, unit: DatetimeUnit) {
   }
 }
 
-type DateVal = string | number;
-
-/** This formats a time with unit as a date range */
-export function formatDateTimeRangeWithUnit(
-  value: DateVal | [DateVal] | [DateVal, DateVal],
+export function normalizeDateTimeRangeWithUnit(
+  values: [DateVal] | [DateVal, DateVal],
   unit: DatetimeUnit,
   options: OptionsType = {},
 ) {
-  const values = Array.isArray(value) ? value : [value];
   const [a, b] = [values[0], values[1] ?? values[0]].map(d =>
     parseTimestamp(d, unit, options.local),
   );
   if (!a.isValid() || !b.isValid()) {
-    return String(a);
+    return [a, b];
   }
 
+  // week-of-year → week, minute-of-hour → minute, etc
+  const momentUnit = unit.split("-")[0];
+
   // The client's unit boundaries might not line up with the data returned from the server.
   // We shift the range so that the start lines up with the value.
-  const start = a.clone().startOf(unit);
-  const end = b.clone().endOf(unit);
+  const start = a.clone().startOf(momentUnit);
+  const end = b.clone().endOf(momentUnit);
   const shift = a.diff(start, "days");
   [start, end].forEach(d => d.add(shift, "days"));
+  return [start, end, shift];
+}
 
-  if (!start.isValid() || !end.isValid()) {
+/** This formats a time with unit as a date range */
+export function formatDateTimeRangeWithUnit(
+  values: [DateVal] | [DateVal, DateVal],
+  unit: DatetimeUnit,
+  options: OptionsType = {},
+) {
+  const [start, end, shift] = normalizeDateTimeRangeWithUnit(
+    values,
+    unit,
+    options,
+  );
+  if (shift === undefined) {
+    return String(start);
+  } else if (!start.isValid() || !end.isValid()) {
     // TODO: when is this used?
-    return formatWeek(a, options);
+    return formatWeek(start, options);
   }
 
-  // Tooltips should show full month name, but condense "MMMM D, YYYY - MMMM D, YYYY" to "MMMM D - D, YYYY" etc
+  // Tooltips should show full month name, but condense "MMMM D, YYYY - MMMM D, YYYY" to "MMMM D-D, YYYY" etc
   const monthFormat =
     options.type === "tooltip" ? "MMMM" : getMonthFormat(options);
   const condensed = options.compact || options.type === "tooltip";
 
-  const sameYear = start.year() === end.year();
-  const sameQuarter = start.quarter() === end.quarter();
-  const sameMonth = start.month() === end.month();
-  const sameDayOfMonth = start.date() === end.date();
+  // month format is configurable, so we need to insert it after lookup
+  const formatDate = (date: Moment, formatStr: string) =>
+    date.format(formatStr.replace(DATE_RANGE_MONTH_PLACEHOLDER, monthFormat));
 
-  const Y = "YYYY";
-  const Q = "[Q]Q";
-  const QY = "[Q]Q YYYY";
-  const M = monthFormat;
-  const MY = `${monthFormat} YYYY`;
-  const MDY = `${monthFormat} D, YYYY`;
-  const MD = `${monthFormat} D`;
-  const DY = `D, YYYY`;
-
-  // Drop down to day resolution if shift causes misalignment with desired resolution boundaries
-  const date_resolution =
-    (shift === 0 ? options.date_resolution : null) ?? "day";
-
-  // Use Wikipedia’s date range formatting guidelines
-  // https://en.wikipedia.org/wiki/Wikipedia:Manual_of_Style/Dates_and_numbers#Ranges
-  const [startFormat, endFormat, pad = ""] = {
-    year:
-      !sameYear || !condensed
-        ? [Y, Y] // 2018–2019
-        : [Y], // 2018
-    quarter:
-      !sameYear || !condensed
-        ? [QY, QY, " "] // Q2 2018 – Q3 2019
-        : !sameQuarter
-        ? [Q, QY] // Q2–Q4 2019
-        : [QY], // Q2 2018
-    month:
-      !sameYear || !condensed
-        ? [MY, MY, " "] // September 2018 – January 2019
-        : !sameMonth
-        ? [M, MY] // September–December 2018
-        : [MY], // September 2018
-    day:
-      !sameYear || !condensed
-        ? [MDY, MDY, " "] // January 1, 2018 – January 2, 2019
-        : !sameMonth
-        ? [MD, MDY, " "] // January 1 – February 2, 2018
-        : !sameDayOfMonth
-        ? [MD, DY] // January 1–2, 2018
-        : [MDY], // January 1, 2018
-  }[date_resolution];
-
-  const startStr = start.format(startFormat);
-  const endStr = end.format(endFormat ?? startFormat);
-  return startStr === endStr
-    ? startStr
-    : startStr + pad + EN_DASH + pad + endStr;
+  const specs = DATE_RANGE_FORMAT_SPECS[unit];
+  const defaultSpec = specs.find(spec => spec.same === null);
+  const matchSpec =
+    specs.find(spec => start.isSame(end, spec.same)) ?? defaultSpec;
+  if (!matchSpec || !defaultSpec) {
+    return String(start);
+  }
+
+  // Even if we don’t have want to condense, we should avoid empty date ranges like Jan 1 - Jan 1.
+  // This is indicated when the smallest matched format has no end format.
+  if (!matchSpec.format[1]) {
+    return formatDate(start, matchSpec.format[0]);
+  }
+
+  const {
+    format: [startFormat, endFormat],
+    dashPad = "",
+  } = condensed ? matchSpec : defaultSpec;
+  return !endFormat
+    ? formatDate(start, startFormat)
+    : formatDate(start, startFormat) +
+        dashPad +
+        EN_DASH +
+        dashPad +
+        formatDate(end, endFormat);
 }
 
 export function formatRange(
@@ -322,7 +743,7 @@ export function formatDateTimeWithUnit(
       !options.noRange
     ) {
       // tooltip show range like "January 1 - 7, 2017"
-      return formatDateTimeRangeWithUnit(value, unit, options);
+      return formatDateTimeRangeWithUnit([value], unit, options);
     }
   }
 

frontend/src/metabase/lib/formatting/date.unit.spec.tsx

-import { formatDateTimeRangeWithUnit } from "metabase/lib/formatting/date";
-import { OptionsType } from "metabase/lib/formatting/types";
+import {
+  DATE_RANGE_FORMAT_SPECS,
+  formatDateTimeForParameter,
+  formatDateTimeRangeWithUnit,
+  SPECIFIC_DATE_TIME_UNITS,
+} from "metabase/lib/formatting/date";
 
 describe("formatDateTimeRangeWithUnit", () => {
-  const format = formatDateTimeRangeWithUnit;
-
-  // use this to test that the variants of a single date (not a date range) will all be equal
-  const singleDateVariants = (date: any) => [date, [date], [date, date]];
+  for (const unit of SPECIFIC_DATE_TIME_UNITS) {
+    describe(`formats for unit ${unit}`, () => {
+      const specs = DATE_RANGE_FORMAT_SPECS[unit];
+      it("should have a default spec in the last position", () => {
+        const i = specs.findIndex(spec => spec.same === null);
+        expect(i).toBe(specs.length - 1);
+      });
+      for (const {
+        same,
+        test: { output, verboseOutput, input },
+      } of specs) {
+        const inside = same
+          ? `inside the same ${same}`
+          : "with no units in common";
+        it(`should correctly format a ${unit} range ${inside}`, () => {
+          expect(
+            formatDateTimeRangeWithUnit(input, unit, { type: "tooltip" }),
+          ).toBe(output);
+          if (verboseOutput) {
+            // eslint-disable-next-line jest/no-conditional-expect
+            expect(formatDateTimeRangeWithUnit(input, unit)).toBe(
+              verboseOutput,
+            );
+          }
+        });
+      }
+    });
+  }
+});
 
-  // we use the tooltip type to test abbreviated dates
-  const abbrev: OptionsType = { type: "tooltip" };
+describe("formatDateTimeForParameter", () => {
+  const value = "2020-01-01T00:00:00+05:00";
 
-  it("should display year ranges", () => {
-    const opts: OptionsType = { date_resolution: "year" };
-    const unit = "year";
-    singleDateVariants("2018").forEach(d =>
-      expect(format(d, unit, opts)).toBe("2018"),
+  it("should format year", () => {
+    expect(formatDateTimeForParameter(value, "year")).toBe(
+      "2020-01-01~2020-12-31",
     );
-    expect(format(["2018", "2020"], unit, opts)).toBe("2018–2020");
   });
-  it("should display quarter ranges", () => {
-    const opts: OptionsType = { date_resolution: "quarter" };
-    const unit = "quarter";
-    singleDateVariants("2018-01-01").forEach(d =>
-      expect(format(d, unit, opts)).toBe("Q1 2018"),
-    );
-    expect(format(["2018-01-01", "2019-04-01"], unit, opts)).toBe(
-      "Q1 2018 – Q2 2019",
-    );
-    expect(format(["2018-01-01", "2018-04-01"], unit, opts)).toBe(
-      "Q1 2018 – Q2 2018",
-    );
-    expect(
-      format(["2018-01-01", "2018-04-01"], unit, { ...opts, ...abbrev }),
-    ).toBe("Q1–Q2 2018");
+
+  it("should format quarter", () => {
+    expect(formatDateTimeForParameter(value, "quarter")).toBe("Q1-2020");
   });
-  it("should display month ranges", () => {
-    const opts: OptionsType = { date_resolution: "month" };
-    const unit = "month";
-    singleDateVariants("2018-01-01").forEach(d =>
-      expect(format(d, unit, opts)).toBe("January 2018"),
-    );
-    expect(format(["2018-01-01", "2019-04-01"], unit, opts)).toBe(
-      "January 2018 – April 2019",
-    );
-    expect(format(["2018-01-01", "2018-04-01"], unit, opts)).toBe(
-      "January 2018 – April 2018",
-    );
-    expect(
-      format(["2018-01-01", "2018-04-01"], unit, { ...opts, ...abbrev }),
-    ).toBe("January–April 2018");
+
+  it("should format month", () => {
+    expect(formatDateTimeForParameter(value, "month")).toBe("2020-01");
   });
-  it("should display day ranges for a single unit", () => {
-    const opts: OptionsType = { ...abbrev };
-    singleDateVariants("2018-01-01").forEach(d =>
-      expect(format(d, "day", opts)).toBe("January 1, 2018"),
-    );
-    singleDateVariants("2018-01-01").forEach(d =>
-      expect(format(d, "week", opts)).toBe("January 1–7, 2018"),
-    );
-    singleDateVariants("2018-01-01").forEach(d =>
-      expect(format(d, "month", opts)).toBe("January 1–31, 2018"),
-    );
-    singleDateVariants("2018-01-01").forEach(d =>
-      expect(format(d, "quarter", opts)).toBe("January 1 – March 31, 2018"),
-    );
-    singleDateVariants("2018-01-01").forEach(d =>
-      expect(format(d, "year", opts)).toBe("January 1 – December 31, 2018"),
+
+  it("should format week", () => {
+    expect(formatDateTimeForParameter(value, "week")).toBe(
+      "2019-12-29~2020-01-04",
     );
   });
-  it("should display day ranges between two units", () => {
-    const opts: OptionsType = { ...abbrev };
-    expect(format(["2018-01-01", "2018-01-02"], "day", opts)).toBe(
-      "January 1–2, 2018",
-    );
-    expect(format(["2018-01-01", "2018-01-08"], "week", opts)).toBe(
-      "January 1–14, 2018",
-    );
-    expect(format(["2018-01-01", "2018-02-01"], "month", opts)).toBe(
-      "January 1 – February 28, 2018",
-    );
-    expect(format(["2018-01-01", "2018-04-01"], "quarter", opts)).toBe(
-      "January 1 – June 30, 2018",
-    );
-    expect(format(["2018-01-01", "2019-01-01"], "year", opts)).toBe(
-      "January 1, 2018 – December 31, 2019",
+
+  it("should format day", () => {
+    expect(formatDateTimeForParameter(value, "day")).toBe("2020-01-01");
+  });
+
+  it("should format hour as a day", () => {
+    expect(formatDateTimeForParameter(value, "hour")).toBe("2020-01-01");
+  });
+
+  it("should format minute", () => {
+    expect(formatDateTimeForParameter(value, "minute")).toBe("2020-01-01");
+  });
+
+  it("should format quarter-of-year as a day", () => {
+    expect(formatDateTimeForParameter(value, "quarter-of-year")).toBe(
+      "2020-01-01",
     );
   });
 });

frontend/src/metabase/lib/formatting/types.ts

@@ -24,7 +24,6 @@ export interface OptionsType {
   rich?: boolean;
   suffix?: string;
   time_enabled?: "minutes" | "milliseconds" | "seconds" | null;
-  date_resolution?: "day" | "month" | "quarter" | "year";
   time_format?: string;
   time_style?: string;
   type?: string;

frontend/src/metabase/lib/time.ts

@@ -10,8 +10,10 @@ addAbbreviatedLocale();
 const TIME_FORMAT_24_HOUR = "HH:mm";
 
 const TEXT_UNIT_FORMATS = {
-  "day-of-week": (value: string) =>
-    moment.parseZone(value, "ddd").startOf("day"),
+  "day-of-week": (value: string) => {
+    const day = moment.parseZone(value, "ddd").startOf("day");
+    return day.isValid() ? day : moment.parseZone(value).startOf("day");
+  },
 };
 
 const NUMERIC_UNIT_FORMATS = {

frontend/src/metabase/query_builder/components/filters/modals/InlineDatePicker/InlineDatePicker.unit.spec.tsx

@@ -119,7 +119,7 @@ describe("InlineDatePicker", () => {
     );
 
     expect(
-      screen.getByText("between November 5, 1605 November 5, 2005"),
+      screen.getByText("is November 5, 1605 – November 5, 2005"),
     ).toBeInTheDocument();
   });
 
@@ -313,7 +313,7 @@ describe("InlineDatePicker", () => {
       />,
     );
 
-    const btn = screen.getByText("between November 5, 1605 November 5, 2005");
+    const btn = screen.getByText("is November 5, 1605 – November 5, 2005");
     userEvent.click(btn);
     await screen.findByDisplayValue("11/05/1605");
     const input = screen.getByDisplayValue("11/05/1605");

frontend/src/metabase/query_builder/components/filters/pickers/DatePicker/DatePicker.tsx

@@ -158,7 +158,7 @@ const DatePicker: React.FC<Props> = props => {
     operators = DATE_OPERATORS,
   } = props;
 
-  const operator = getOperator(props.filter, operators);
+  const operator = getOperator(filter, operators);
   const [showShortcuts, setShowShortcuts] = React.useState(
     !operator && !disableOperatorSelection,
   );

frontend/test/metabase-lib/lib/queries/structured/Filter.unit.spec.js

@@ -22,6 +22,11 @@ function filter(mbql) {
   return new Filter(mbql, 0, query);
 }
 
+const dateType = temporalUnit => ({
+  "base-type": "type/DateTime",
+  "temporal-unit": temporalUnit,
+});
+
 describe("Filter", () => {
   describe("displayName", () => {
     it("should return the correct string for an = filter", () => {
@@ -32,61 +37,92 @@ describe("Filter", () => {
     it("should return the correct string for a segment filter", () => {
       expect(filter(["segment", 1]).displayName()).toEqual("Expensive Things");
     });
-    describe("betterDateLabel", () => {
-      function createdAtFilter(op, unit, ...args) {
-        return filter([
-          op,
-          [
-            "field",
-            ORDERS.CREATED_AT,
-            {
-              "base-type": "type/DateTime",
-              "temporal-unit": unit,
-            },
-          ],
-          ...args,
-        ]);
-      }
-
+    describe("date labels", () => {
       it("should display is-week filter as a day range", () => {
         expect(
-          createdAtFilter("=", "week", "2026-10-04").displayName(),
+          filter([
+            "=",
+            ["field", ORDERS.CREATED_AT, dateType("week")],
+            "2026-10-04",
+          ]).displayName(),
         ).toEqual("Created At is October 4–10, 2026");
       });
+      it("should display between dates filter with undefined temporal unit as day range", () => {
+        expect(
+          filter([
+            "between",
+            ["field", ORDERS.CREATED_AT, dateType()],
+            "2026-10-04",
+            "2026-10-11",
+          ]).displayName(),
+        ).toEqual("Created At is October 4–11, 2026");
+      });
       it("should display between-weeks filter as day range", () => {
         expect(
-          createdAtFilter(
+          filter([
             "between",
-            "week",
+            ["field", ORDERS.CREATED_AT, dateType("week")],
             "2026-10-04",
             "2026-10-11",
-          ).displayName(),
+          ]).displayName(),
         ).toEqual("Created At is October 4–17, 2026");
       });
+      it("should display between-minutes filter", () => {
+        expect(
+          filter([
+            "between",
+            ["field", ORDERS.CREATED_AT, dateType("minute")],
+            "2026-10-04T10:20",
+            "2026-10-04T16:30",
+          ]).displayName(),
+        ).toEqual("Created At is October 4, 2026, 10:20 AM – 4:30 PM");
+        expect(
+          filter([
+            "between",
+            ["field", ORDERS.CREATED_AT, dateType("minute")],
+            "2026-10-04T10:20",
+            "2026-10-11T16:30",
+          ]).displayName(),
+        ).toEqual(
+          "Created At is October 4, 10:20 AM – October 11, 2026, 4:30 PM",
+        );
+      });
       it("should display slice filters with enough context for understanding them", () => {
         expect(
-          createdAtFilter(
+          filter([
             "=",
-            "minute-of-hour",
-            "2023-07-03T18:31:00-05:00",
-          ).displayName(),
-        ).toEqual("Created At is minute 31");
+            ["field", ORDERS.CREATED_AT, dateType("minute-of-hour")],
+            "2023-07-03T18:31:00",
+          ]).displayName(),
+        ).toEqual("Created At is minute :31");
         expect(
-          createdAtFilter(
+          filter([
             "=",
-            "hour-of-day",
-            "2023-07-03T10:00:00-05:00",
-          ).displayName(),
-        ).toMatch(/^Created At is hour \d+$/); // GitHub CI is in different time zone
+            ["field", ORDERS.CREATED_AT, dateType("hour-of-day")],
+            "2023-07-03T10:00:00",
+          ]).displayName(),
+        ).toEqual("Created At is 10:00–59 AM");
         expect(
-          createdAtFilter("=", "day-of-month", "2016-01-17").displayName(),
-        ).toEqual("Created At is 17th day of month");
+          filter([
+            "=",
+            ["field", ORDERS.CREATED_AT, dateType("day-of-month")],
+            "2016-01-17",
+          ]).displayName(),
+        ).toEqual("Created At is 17th day of the month");
         expect(
-          createdAtFilter("=", "day-of-year", "2016-07-19").displayName(),
-        ).toEqual("Created At is 201st day of year");
+          filter([
+            "=",
+            ["field", ORDERS.CREATED_AT, dateType("day-of-year")],
+            "2016-07-19",
+          ]).displayName(),
+        ).toEqual("Created At is 201st day of the year");
         expect(
-          createdAtFilter("=", "week-of-year", "2023-07-02").displayName(),
-        ).toEqual("Created At is 27th week of year");
+          filter([
+            "=",
+            ["field", ORDERS.CREATED_AT, dateType("week-of-year")],
+            "2023-07-02",
+          ]).displayName(),
+        ).toEqual("Created At is 27th week of the year");
       });
     });
   });

frontend/test/metabase/lib/formatting/date.unit.spec.js

-import { formatDateTimeForParameter } from "metabase/lib/formatting/date";
-
-describe("formatDateTimeForParameter", () => {
-  const value = "2020-01-01T00:00:00+05:00";
-
-  it("should format year", () => {
-    expect(formatDateTimeForParameter(value, "year")).toBe(
-      "2020-01-01~2020-12-31",
-    );
-  });
-
-  it("should format quarter", () => {
-    expect(formatDateTimeForParameter(value, "quarter")).toBe("Q1-2020");
-  });
-
-  it("should format month", () => {
-    expect(formatDateTimeForParameter(value, "month")).toBe("2020-01");
-  });
-
-  it("should format week", () => {
-    expect(formatDateTimeForParameter(value, "week")).toBe(
-      "2019-12-29~2020-01-04",
-    );
-  });
-
-  it("should format day", () => {
-    expect(formatDateTimeForParameter(value, "day")).toBe("2020-01-01");
-  });
-
-  it("should format hour as a day", () => {
-    expect(formatDateTimeForParameter(value, "hour")).toBe("2020-01-01");
-  });
-
-  it("should format minute", () => {
-    expect(formatDateTimeForParameter(value, "minute")).toBe("2020-01-01");
-  });
-
-  it("should format quarter-of-year as a day", () => {
-    expect(formatDateTimeForParameter(value, "quarter-of-year")).toBe(
-      "2020-01-01",
-    );
-  });
-});