refactor(table): move local-ISO date formatters to utils/dates

dateToISODate/Time/DateTime were generic Date-to-string helpers stranded
in filters/serialize.ts after the folder split. Move them to utils/dates
alongside the existing date formatters, rename to make the local-time
semantics explicit (dateToLocalISO*), and add docstrings clarifying when
to use them versus Date.toISOString().

Author: kirangadhave

frontend/src/components/data-table/__tests__/date-filter-inputs.test.tsx

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { describe, expect, it } from "vitest";
+import { dateToLocalISODate } from "@/utils/dates";
 import { parsePastedRange } from "../date-filter-inputs";
-import { dateToISODate } from "../filters";
 
 describe("parsePastedRange", () => {
   it.each([
@@ -15,15 +15,15 @@ describe("parsePastedRange", () => {
   ])("splits a date range pasted with %s separator", (_, text) => {
     const result = parsePastedRange("date", text);
     expect(result).toBeDefined();
-    expect(result && dateToISODate(result.min)).toBe("2026-02-01");
-    expect(result && dateToISODate(result.max)).toBe("2026-04-01");
+    expect(result && dateToLocalISODate(result.min)).toBe("2026-02-01");
+    expect(result && dateToLocalISODate(result.max)).toBe("2026-04-01");
   });
 
   it("returns a degenerate range for a single pasted date", () => {
     const result = parsePastedRange("date", "2026-03-15");
     expect(result).toBeDefined();
-    expect(result && dateToISODate(result.min)).toBe("2026-03-15");
-    expect(result && dateToISODate(result.max)).toBe("2026-03-15");
+    expect(result && dateToLocalISODate(result.min)).toBe("2026-03-15");
+    expect(result && dateToLocalISODate(result.max)).toBe("2026-03-15");
   });
 
   it("returns undefined for unparsable input", () => {

frontend/src/components/data-table/date-filter-inputs.tsx

@@ -11,11 +11,11 @@ import type { DateValue, TimeValue } from "react-aria-components";
 import { TimeField } from "@/components/ui/date-input";
 import { DatePicker, DateRangePicker } from "@/components/ui/date-picker";
 import {
-  dateToISODate,
-  dateToISODateTime,
-  dateToISOTime,
-  type FilterType,
-} from "./filters";
+  dateToLocalISODate,
+  dateToLocalISODateTime,
+  dateToLocalISOTime,
+} from "@/utils/dates";
+import type { FilterType } from "./filters";
 
 export type DateLikeFilterType = Extract<
   FilterType,
@@ -28,11 +28,11 @@ function dateToAria(
 ): DateValue | TimeValue {
   switch (filterType) {
     case "date":
-      return parseDate(dateToISODate(d));
+      return parseDate(dateToLocalISODate(d));
     case "datetime":
-      return parseDateTime(dateToISODateTime(d));
+      return parseDateTime(dateToLocalISODateTime(d));
     case "time":
-      return parseTime(dateToISOTime(d));
+      return parseTime(dateToLocalISOTime(d));
   }
 }
 

frontend/src/components/data-table/filters/format.ts

@@ -1,11 +1,14 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { logNever } from "@/utils/assertNever";
-import { exactDateTime } from "@/utils/dates";
+import {
+  dateToLocalISODate,
+  dateToLocalISOTime,
+  exactDateTime,
+} from "@/utils/dates";
 import { OPERATOR_LABELS } from "../operator-labels";
 import { stringifyUnknownValue } from "../utils";
 import type { ColumnFilterValue } from "./builders";
-import { dateToISODate, dateToISOTime } from "./serialize";
 import type { FormattedFilter } from "./types";
 
 interface FormatContext {
@@ -91,9 +94,9 @@ export function formatValue(
   ) {
     const format =
       value.type === "date"
-        ? dateToISODate
+        ? dateToLocalISODate
         : value.type === "time"
-          ? dateToISOTime
+          ? dateToLocalISOTime
           : (d: Date) => exactDateTime(d, ctx.timezone, ctx.locale);
     switch (value.operator) {
       case "between":

frontend/src/components/data-table/filters/serialize.ts

@@ -7,29 +7,14 @@ import type {
 } from "@/plugins/impl/data-frames/schema";
 import type { ColumnId } from "@/plugins/impl/data-frames/types";
 import { assertNever } from "@/utils/assertNever";
+import {
+  dateToLocalISODate,
+  dateToLocalISODateTime,
+  dateToLocalISOTime,
+} from "@/utils/dates";
 import type { ColumnFilterValue } from "./builders";
 import { isNullishFilter } from "./guards";
 
-function pad2(n: number): string {
-  return n.toString().padStart(2, "0");
-}
-
-function pad4(n: number): string {
-  return n.toString().padStart(4, "0");
-}
-
-export function dateToISODate(d: Date): string {
-  return `${pad4(d.getFullYear())}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;
-}
-
-export function dateToISOTime(d: Date): string {
-  return `${pad2(d.getHours())}:${pad2(d.getMinutes())}:${pad2(d.getSeconds())}`;
-}
-
-export function dateToISODateTime(d: Date): string {
-  return `${dateToISODate(d)}T${dateToISOTime(d)}`;
-}
-
 export function filterToFilterCondition(
   columnIdString: string,
   filter: ColumnFilterValue | undefined,
@@ -137,10 +122,10 @@ export function filterToFilterCondition(
     case "time": {
       const encode =
         filter.type === "date"
-          ? dateToISODate
+          ? dateToLocalISODate
           : filter.type === "time"
-            ? dateToISOTime
-            : dateToISODateTime;
+            ? dateToLocalISOTime
+            : dateToLocalISODateTime;
       switch (filter.operator) {
         case "between":
           return [

frontend/src/utils/dates.ts

@@ -134,6 +134,45 @@ export function timeAgo(
   return value.toString();
 }
 
+function pad2(n: number): string {
+  return n.toString().padStart(2, "0");
+}
+
+function pad4(n: number): string {
+  return n.toString().padStart(4, "0");
+}
+
+/**
+ * Format a Date as `YYYY-MM-DD` using the date's local-time fields.
+ *
+ * The output reflects what the user sees in their own timezone (the calendar
+ * day on their clock), not the UTC day. Use this when round-tripping values
+ * that originated from local-time inputs — date pickers, "filter on this
+ * day", calendar UI — so the displayed and serialized days agree.
+ *
+ * Not suitable for cross-timezone storage; use `Date.toISOString()` for that.
+ */
+export function dateToLocalISODate(d: Date): string {
+  return `${pad4(d.getFullYear())}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;
+}
+
+/**
+ * Format a Date as `HH:MM:SS` using the date's local-time fields.
+ *
+ * See `dateToLocalISODate` for the rationale on local vs UTC.
+ */
+export function dateToLocalISOTime(d: Date): string {
+  return `${pad2(d.getHours())}:${pad2(d.getMinutes())}:${pad2(d.getSeconds())}`;
+}
+
+/**
+ * Format a Date as `YYYY-MM-DDTHH:MM:SS` (no timezone suffix) using local
+ * fields. See `dateToLocalISODate` for the rationale on local vs UTC.
+ */
+export function dateToLocalISODateTime(d: Date): string {
+  return `${dateToLocalISODate(d)}T${dateToLocalISOTime(d)}`;
+}
+
 export const supportedDateFormats = ["yyyy", "yyyy-MM", "yyyy-MM-dd"] as const;
 export type DateFormat = (typeof supportedDateFormats)[number];