Fix implementation and added unit tests

Author: matt-aitken

apps/webapp/app/components/primitives/DateTime.tsx

@@ -103,24 +103,7 @@ export function formatDateTimeISO(date: Date, timeZone: string): string {
     return date.toISOString();
   }
 
-  // Get the offset in minutes for the specified timezone
-  const formatter = new Intl.DateTimeFormat("en-US", {
-    timeZone,
-    timeZoneName: "shortOffset",
-  });
-  const tzOffset =
-    formatter
-      .formatToParts(date)
-      .find((p) => p.type === "timeZoneName")
-      ?.value.replace("GMT", "") ?? "";
-
-  // Format the offset properly as ±HH:mm
-  const offsetNum = parseInt(tzOffset);
-  const offsetHours = Math.abs(Math.floor(offsetNum)).toString().padStart(2, "0");
-  const sign = offsetNum >= 0 ? "+" : "-";
-  const formattedOffset = `${sign}${offsetHours}:00`;
-
-  // Format the date parts
+  // Get the date parts in the target timezone
   const dateFormatter = new Intl.DateTimeFormat("en-US", {
     timeZone,
     year: "numeric",
@@ -132,18 +115,26 @@ export function formatDateTimeISO(date: Date, timeZone: string): string {
     hour12: false,
   });
 
-  const parts = dateFormatter.formatToParts(date);
-  const dateParts: Record<string, string> = {};
-  parts.forEach((part) => {
-    dateParts[part.type] = part.value;
+  // Get the timezone offset for this specific date
+  const timeZoneFormatter = new Intl.DateTimeFormat("en-US", {
+    timeZone,
+    timeZoneName: "longOffset",
   });
 
+  const dateParts = Object.fromEntries(
+    dateFormatter.formatToParts(date).map(({ type, value }) => [type, value])
+  );
+
+  const timeZoneParts = timeZoneFormatter.formatToParts(date);
+  const offset =
+    timeZoneParts.find((part) => part.type === "timeZoneName")?.value.replace("GMT", "") ||
+    "+00:00";
+
   // Format: YYYY-MM-DDThh:mm:ss.sss±hh:mm
-  const isoString =
+  return (
     `${dateParts.year}-${dateParts.month}-${dateParts.day}T` +
-    `${dateParts.hour}:${dateParts.minute}:${dateParts.second}.000${formattedOffset}`;
-
-  return isoString;
+    `${dateParts.hour}:${dateParts.minute}:${dateParts.second}.000${offset}`
+  );
 }
 
 // New component that only shows date when it changes

apps/webapp/test/components/DateTime.test.ts

@@ -0,0 +1,48 @@
+import { describe, it, expect } from "vitest";
+import { formatDateTimeISO } from "~/components/primitives/DateTime";
+
+describe("formatDateTimeISO", () => {
+  it("should format UTC dates with Z suffix", () => {
+    const date = new Date("2025-04-29T14:01:19.000Z");
+    const result = formatDateTimeISO(date, "UTC");
+    expect(result).toBe("2025-04-29T14:01:19.000Z");
+  });
+
+  describe("British Time (Europe/London)", () => {
+    it("should format with +01:00 during BST (summer)", () => {
+      // BST - British Summer Time (last Sunday in March to last Sunday in October)
+      const summerDate = new Date("2025-07-15T14:01:19.000Z");
+      const result = formatDateTimeISO(summerDate, "Europe/London");
+      expect(result).toBe("2025-07-15T15:01:19.000+01:00");
+    });
+
+    it("should format with +00:00 during GMT (winter)", () => {
+      // GMT - Greenwich Mean Time (winter)
+      const winterDate = new Date("2025-01-15T14:01:19.000Z");
+      const result = formatDateTimeISO(winterDate, "Europe/London");
+      expect(result).toBe("2025-01-15T14:01:19.000+00:00");
+    });
+  });
+
+  describe("US Pacific Time (America/Los_Angeles)", () => {
+    it("should format with -07:00 during PDT (summer)", () => {
+      // PDT - Pacific Daylight Time (second Sunday in March to first Sunday in November)
+      const summerDate = new Date("2025-07-15T14:01:19.000Z");
+      const result = formatDateTimeISO(summerDate, "America/Los_Angeles");
+      expect(result).toBe("2025-07-15T07:01:19.000-07:00");
+    });
+
+    it("should format with -08:00 during PST (winter)", () => {
+      // PST - Pacific Standard Time (winter)
+      const winterDate = new Date("2025-01-15T14:01:19.000Z");
+      const result = formatDateTimeISO(winterDate, "America/Los_Angeles");
+      expect(result).toBe("2025-01-15T06:01:19.000-08:00");
+    });
+  });
+
+  it("should preserve milliseconds", () => {
+    const date = new Date("2025-04-29T14:01:19.123Z");
+    const result = formatDateTimeISO(date, "UTC");
+    expect(result).toBe("2025-04-29T14:01:19.123Z");
+  });
+});