@oneuptime/common 11.7.0 → 11.7.1

package/Tests/Types/DateUserTimezone.test.ts

@@ -0,0 +1,205 @@
+/**
+ * The user's profile timezone (User Settings > Timezone) — not the zone the
+ * browser reports — decides which wall clock OneUptimeDate reads and writes.
+ *
+ * The bug these lock in: a user in America/New_York whose browser reported
+ * America/Adak was told "your local timezone - HDT" on every date field, and
+ * had to enter Hawaii-Aleutian times for their events to land correctly. The
+ * profile timezone was stored but never consulted by the UI.
+ *
+ * Every assertion is expressed in explicit-zone wall-clock (or absolute
+ * milliseconds) so it holds under whatever TZ the suite runs in.
+ */
+import OneUptimeDate from "../../Types/Date";
+import Timezone from "../../Types/Timezone";
+import moment from "moment-timezone";
+
+const NY: Timezone = Timezone.AmericaNew_York;
+const ADAK: Timezone = Timezone.AmericaAdak;
+const KOLKATA: Timezone = Timezone.AsiaKolkata;
+
+describe("OneUptimeDate user timezone", () => {
+  afterEach(() => {
+    // Never leak an override into the rest of the suite.
+    OneUptimeDate.setUserTimezone(null);
+  });
+
+  describe("setUserTimezone / getCurrentTimezone", () => {
+    it("falls back to the browser / process zone when no user timezone is set", () => {
+      expect(OneUptimeDate.getUserTimezone()).toBeNull();
+      expect(OneUptimeDate.getCurrentTimezone().toString()).toBe(
+        moment.tz.guess(),
+      );
+    });
+
+    it("prefers the user timezone over the browser / process zone", () => {
+      OneUptimeDate.setUserTimezone(NY);
+
+      expect(OneUptimeDate.getCurrentTimezone()).toBe(NY);
+      expect(OneUptimeDate.getUserTimezone()).toBe(NY);
+    });
+
+    it("reports the abbreviation of the user timezone, DST aware", () => {
+      OneUptimeDate.setUserTimezone(NY);
+
+      // The bug reported "HDT" (America/Adak) for a New York user.
+      expect(OneUptimeDate.getCurrentTimezoneString()).not.toBe("HDT");
+      expect(["EST", "EDT"]).toContain(
+        OneUptimeDate.getCurrentTimezoneString(),
+      );
+    });
+
+    it("clears back to the browser / process zone when set to null", () => {
+      OneUptimeDate.setUserTimezone(NY);
+      OneUptimeDate.setUserTimezone(null);
+
+      expect(OneUptimeDate.getUserTimezone()).toBeNull();
+      expect(OneUptimeDate.getCurrentTimezone().toString()).toBe(
+        moment.tz.guess(),
+      );
+    });
+
+    it("ignores a value moment does not recognise as a zone rather than breaking every date", () => {
+      OneUptimeDate.setUserTimezone("Not/AZone" as Timezone);
+
+      expect(OneUptimeDate.getUserTimezone()).toBeNull();
+      expect(OneUptimeDate.getCurrentTimezone().toString()).toBe(
+        moment.tz.guess(),
+      );
+      // Formatting still works.
+      expect(
+        OneUptimeDate.toDateTimeLocalString(new Date("2026-07-09T13:00:00Z")),
+      ).toMatch(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}$/);
+    });
+  });
+
+  describe("datetime-local round trip", () => {
+    it("renders a stored instant as its wall-clock in the user timezone", () => {
+      OneUptimeDate.setUserTimezone(NY);
+
+      // 17:00 UTC on 2026-07-09 is 13:00 in New York (EDT).
+      expect(
+        OneUptimeDate.toDateTimeLocalString(new Date("2026-07-09T17:00:00Z")),
+      ).toBe("2026-07-09T13:00:00");
+    });
+
+    it("resolves a typed wall-clock in the user timezone, not the browser zone", () => {
+      OneUptimeDate.setUserTimezone(NY);
+
+      const typed: Date =
+        OneUptimeDate.fromDateTimeLocalString("2026-07-09T13:00");
+
+      expect(typed.toISOString()).toBe("2026-07-09T17:00:00.000Z");
+    });
+
+    it("round trips what the user typed back into the picker unchanged", () => {
+      OneUptimeDate.setUserTimezone(NY);
+
+      const typed: Date =
+        OneUptimeDate.fromDateTimeLocalString("2026-01-15T09:30");
+
+      expect(OneUptimeDate.toDateTimeLocalString(typed)).toBe(
+        "2026-01-15T09:30:00",
+      );
+    });
+
+    it("stores different instants for the same wall-clock in different user timezones", () => {
+      OneUptimeDate.setUserTimezone(NY);
+      const inNY: Date =
+        OneUptimeDate.fromDateTimeLocalString("2026-07-09T13:00");
+
+      OneUptimeDate.setUserTimezone(ADAK);
+      const inAdak: Date =
+        OneUptimeDate.fromDateTimeLocalString("2026-07-09T13:00");
+
+      // Adak is 5 hours behind New York in July.
+      expect(inAdak.getTime() - inNY.getTime()).toBe(5 * 60 * 60 * 1000);
+    });
+
+    it("honours the user timezone's DST offset for a winter instant", () => {
+      OneUptimeDate.setUserTimezone(NY);
+
+      // 09:00 EST is 14:00 UTC in January.
+      expect(
+        OneUptimeDate.fromDateTimeLocalString("2026-01-15T09:00").toISOString(),
+      ).toBe("2026-01-15T14:00:00.000Z");
+    });
+  });
+
+  describe("display helpers", () => {
+    it("formats an instant in the user timezone with its abbreviation", () => {
+      OneUptimeDate.setUserTimezone(NY);
+
+      const formatted: string = OneUptimeDate.getDateAsLocalFormattedString(
+        new Date("2026-07-09T17:00:00Z"),
+      );
+
+      expect(formatted).toContain("Jul 09 2026");
+      expect(formatted).toContain("13:00");
+      expect(formatted).toContain("EDT");
+    });
+
+    it("reads the hour and minute of an instant in the user timezone", () => {
+      OneUptimeDate.setUserTimezone(KOLKATA);
+
+      const instant: Date = new Date("2026-07-09T17:00:00Z");
+
+      // 17:00 UTC is 22:30 in Kolkata (UTC+5:30).
+      expect(OneUptimeDate.getLocalHours(instant)).toBe(22);
+      expect(OneUptimeDate.getLocalMinutes(instant)).toBe(30);
+      expect(OneUptimeDate.getLocalTimeString(instant)).toBe("22:30");
+    });
+
+    it("rolls the calendar day when the user timezone puts the instant on another date", () => {
+      OneUptimeDate.setUserTimezone(KOLKATA);
+
+      // 23:00 UTC on Jul 9 is already 04:30 on Jul 10 in Kolkata.
+      const instant: Date = new Date("2026-07-09T23:00:00Z");
+
+      expect(OneUptimeDate.asDateForDatabaseQuery(instant)).toBe("2026-07-10");
+      expect(OneUptimeDate.getDateAsLocalDayMonthString(instant)).toBe(
+        "10 Jul",
+      );
+      expect(OneUptimeDate.getDateAsLocalMonthYearString(instant)).toBe(
+        "Jul 2026",
+      );
+    });
+  });
+
+  describe("schedule-zone wall-clock bridge", () => {
+    it("reads the entered wall-clock in the user timezone before anchoring it to the schedule zone", () => {
+      OneUptimeDate.setUserTimezone(NY);
+
+      // The admin typed 09:00 while working in New York.
+      const typed: Date =
+        OneUptimeDate.fromDateTimeLocalString("2026-07-09T09:00");
+
+      const stored: Date = OneUptimeDate.getInstantFromLocalWallClockInTimezone(
+        typed,
+        KOLKATA.toString(),
+      );
+
+      // ...and the schedule enforces 09:00 in Kolkata.
+      expect(moment.tz(stored, KOLKATA.toString()).format("HH:mm")).toBe(
+        "09:00",
+      );
+    });
+
+    it("redisplays a stored schedule-zone time as the same wall-clock in the picker", () => {
+      OneUptimeDate.setUserTimezone(NY);
+
+      const stored: Date = moment
+        .tz("2026-07-09 09:00", KOLKATA.toString())
+        .toDate();
+
+      const forPicker: Date = OneUptimeDate.getLocalDateFromWallClockInTimezone(
+        stored,
+        KOLKATA.toString(),
+      );
+
+      expect(OneUptimeDate.toDateTimeLocalString(forPicker)).toBe(
+        "2026-07-09T09:00:00",
+      );
+    });
+  });
+});

package/Tests/Types/DateUserTimezoneOverridesBrowser.test.ts

@@ -0,0 +1,73 @@
+/** @timezone America/Adak */
+
+/**
+ * Regression test for the reported bug, reproduced exactly: the process (a
+ * stand-in for the customer's browser) reports America/Adak — abbreviated
+ * "HDT" — while the user has picked America/New_York in User Settings.
+ *
+ * Before the fix, every date field labelled itself "your local timezone - HDT"
+ * and resolved what the user typed in Adak's zone, so a New York user had to
+ * enter Hawaii-Aleutian times to get the right instant stored. The profile
+ * timezone must win over whatever the browser reports.
+ */
+import OneUptimeDate from "../../Types/Date";
+import Timezone from "../../Types/Timezone";
+import moment from "moment-timezone";
+
+const NY: Timezone = Timezone.AmericaNew_York;
+
+describe("user timezone overrides a browser reporting a different zone", () => {
+  afterEach(() => {
+    OneUptimeDate.setUserTimezone(null);
+  });
+
+  it("confirms the process really is on the Adak (HDT) clock", () => {
+    // Guards the premise of every assertion below.
+    expect(moment.tz.guess()).toBe("America/Adak");
+    expect(OneUptimeDate.getCurrentTimezoneString()).toBe("HDT");
+  });
+
+  it("labels date fields with the profile timezone, not HDT", () => {
+    OneUptimeDate.setUserTimezone(NY);
+
+    expect(OneUptimeDate.getCurrentTimezoneString()).toBe("EDT");
+    expect(OneUptimeDate.getCurrentTimezone()).toBe(NY);
+  });
+
+  it("stores the wall-clock the user typed as New York time", () => {
+    OneUptimeDate.setUserTimezone(NY);
+
+    /*
+     * The user schedules maintenance for 14:00 on Jul 9. That is 18:00 UTC in
+     * New York; reading it on the Adak clock would have stored 23:00 UTC —
+     * five hours off, which is exactly what the customer worked around.
+     */
+    const startsAt: Date =
+      OneUptimeDate.fromDateTimeLocalString("2026-07-09T14:00");
+
+    expect(startsAt.toISOString()).toBe("2026-07-09T18:00:00.000Z");
+  });
+
+  it("reads a stored event back at the wall-clock the user typed", () => {
+    OneUptimeDate.setUserTimezone(NY);
+
+    const startsAt: Date = new Date("2026-07-09T18:00:00.000Z");
+
+    expect(OneUptimeDate.toDateTimeLocalString(startsAt)).toBe(
+      "2026-07-09T14:00:00",
+    );
+    expect(OneUptimeDate.getDateAsLocalFormattedString(startsAt)).toContain(
+      "EDT",
+    );
+    expect(OneUptimeDate.getLocalTimeString(startsAt)).toBe("14:00");
+  });
+
+  it("still follows the browser zone for a user who has not picked one", () => {
+    OneUptimeDate.setUserTimezone(null);
+
+    // 14:00 HDT (UTC-9) is 23:00 UTC the same day.
+    expect(
+      OneUptimeDate.fromDateTimeLocalString("2026-07-09T14:00").toISOString(),
+    ).toBe("2026-07-09T23:00:00.000Z");
+  });
+});

package/Tests/UI/Components/TimePicker/TimePicker.test.tsx

@@ -89,6 +89,17 @@ jest.mock("../../../../Types/Date", () => {
           return base;
         },
       ),
+      /*
+       * The picker reads the wall-clock through OneUptimeDate so it resolves in
+       * the user's configured timezone; the stubbed dates above already carry
+       * the hour/minute the test intends.
+       */
+      getLocalHours: jest.fn((d: HourMinuteMock) => {
+        return d.getHours();
+      }),
+      getLocalMinutes: jest.fn((d: HourMinuteMock) => {
+        return d.getMinutes();
+      }),
       getCurrentTimezoneString: jest.fn(() => {
         return "UTC";
       }),

package/Types/Date.ts

@@ -12,6 +12,13 @@ export const Moment: typeof moment = moment;
 export default class OneUptimeDate {
   // get date time from unix timestamp
 
+  /*
+   * The timezone the signed-in user configured in User Settings, pushed in by
+   * the UI (see UserUtil.initializeUserTimezone). Null on the server and on
+   * signed-out pages, where the process / browser zone is used instead.
+   */
+  private static userTimezone: Timezone | null = null;
+
   private static padDatePart(value: number): string {
     return value.toString().padStart(2, "0");
   }
@@ -44,6 +51,7 @@ export default class OneUptimeDate {
   private static getLocalShortMonthName(date: Date): string {
     return date.toLocaleString("default", {
       month: "short",
+      timeZone: this.getCurrentTimezone().toString(),
     });
   }
 
@@ -156,6 +164,19 @@ export default class OneUptimeDate {
     return this.getLocalTimeString(date);
   }
 
+  /**
+   * The hour / minute `date` reads at in the current timezone. Time pickers use
+   * these instead of Date.getHours()/getMinutes() so the digits they show are
+   * the ones the user expects in the zone they configured.
+   */
+  public static getLocalHours(date: Date | string): number {
+    return this.inCurrentTimezone(date).hours();
+  }
+
+  public static getLocalMinutes(date: Date | string): number {
+    return this.inCurrentTimezone(date).minutes();
+  }
+
   public static getLocalShortMonthNameFromDate(date: Date | string): string {
     date = this.fromString(date);
     return this.getLocalShortMonthName(date);
@@ -172,26 +193,27 @@ export default class OneUptimeDate {
 
     const includeMinutes: boolean = options?.includeMinutes ?? true;
     const includeSeconds: boolean = options?.includeSeconds ?? false;
-    const hours: string = this.padDatePart(date.getHours());
+    const localDate: moment.Moment = this.inCurrentTimezone(date);
+    const hours: string = this.padDatePart(localDate.hours());
 
     if (!includeMinutes) {
       return hours;
     }
 
-    const minutes: string = this.padDatePart(date.getMinutes());
+    const minutes: string = this.padDatePart(localDate.minutes());
 
     if (!includeSeconds) {
       return `${hours}:${minutes}`;
     }
 
-    const seconds: string = this.padDatePart(date.getSeconds());
+    const seconds: string = this.padDatePart(localDate.seconds());
     return `${hours}:${minutes}:${seconds}`;
   }
 
   public static getDateAsLocalDayMonthString(date: Date | string): string {
     date = this.fromString(date);
 
-    const day: string = this.padDatePart(date.getDate());
+    const day: string = this.padDatePart(this.inCurrentTimezone(date).date());
     const month: string = this.getLocalShortMonthName(date);
 
     return `${day} ${month}`;
@@ -207,7 +229,7 @@ export default class OneUptimeDate {
     date = this.fromString(date);
 
     const month: string = this.getLocalShortMonthName(date);
-    const year: string = date.getFullYear().toString();
+    const year: string = this.inCurrentTimezone(date).year().toString();
 
     return `${month} ${year}`;
   }
@@ -316,7 +338,7 @@ export default class OneUptimeDate {
       : `${datePart}, ${timePart}`;
 
     if (!data.timezone) {
-      const local: moment.Moment = moment(date).local();
+      const local: moment.Moment = this.inCurrentTimezone(date);
       return (
         local.format(formatString) +
         (data.onlyShowDate ? "" : " " + this.getCurrentTimezoneString())
@@ -333,18 +355,18 @@ export default class OneUptimeDate {
   }
 
   /**
-   * Reinterpret the wall-clock components of `date` — read in the process /
-   * browser local zone — as the SAME wall-clock in `timezone`, and return that
-   * instant. Used to store a time the user typed for the schedule's timezone
-   * even though the time picker captured it in the browser's local zone (audit
-   * F1). Inverse of getLocalDateFromWallClockInTimezone.
+   * Reinterpret the wall-clock components of `date` — read in the CURRENT
+   * timezone, i.e. the one the pickers render in — as the SAME wall-clock in
+   * `timezone`, and return that instant. Used to store a time the user typed
+   * for the schedule's timezone even though the time picker captured it in the
+   * viewer's own zone (audit F1). Inverse of
+   * getLocalDateFromWallClockInTimezone.
    */
   public static getInstantFromLocalWallClockInTimezone(
     date: Date | string,
     timezone: string,
   ): Date {
-    date = this.fromString(date);
-    const local: moment.Moment = moment(date);
+    const local: moment.Moment = this.inCurrentTimezone(date);
     return moment
       .tz(
         {
@@ -361,10 +383,10 @@ export default class OneUptimeDate {
   }
 
   /**
-   * Inverse of getInstantFromLocalWallClockInTimezone: return a process /
-   * browser local Date whose LOCAL wall-clock equals `date`'s wall-clock as seen
-   * in `timezone`. Used to display a stored schedule-timezone time inside a
-   * browser-local time picker (audit F1).
+   * Inverse of getInstantFromLocalWallClockInTimezone: return a Date whose
+   * wall-clock IN THE CURRENT TIMEZONE equals `date`'s wall-clock as seen in
+   * `timezone`. Used to display a stored schedule-timezone time inside a picker
+   * that renders in the viewer's own zone (audit F1).
    */
   public static getLocalDateFromWallClockInTimezone(
     date: Date | string,
@@ -372,14 +394,19 @@ export default class OneUptimeDate {
   ): Date {
     date = this.fromString(date);
     const zoned: moment.Moment = moment.tz(date, timezone);
-    return moment({
-      year: zoned.year(),
-      month: zoned.month(),
-      day: zoned.date(),
-      hour: zoned.hour(),
-      minute: zoned.minute(),
-      second: zoned.second(),
-    }).toDate();
+    return moment
+      .tz(
+        {
+          year: zoned.year(),
+          month: zoned.month(),
+          day: zoned.date(),
+          hour: zoned.hour(),
+          minute: zoned.minute(),
+          second: zoned.second(),
+        },
+        this.getCurrentTimezone().toString(),
+      )
+      .toDate();
   }
 
   public static isOverlapping(
@@ -709,22 +736,26 @@ export default class OneUptimeDate {
     return this.addRemoveMinutes(date, date.getTimezoneOffset());
   }
 
+  /**
+   * Render an instant as the value of an `<input type="datetime-local">` — a
+   * bare wall-clock with no offset — read in the current timezone.
+   */
   public static toDateTimeLocalString(date: Date): string {
-    date = this.fromString(date);
-
-    type TenFunction = (i: number) => string;
-
-    const ten: TenFunction = (i: number): string => {
-        return (i < 10 ? "0" : "") + i;
-      },
-      YYYY: number = date.getFullYear(),
-      MM: string = ten(date.getMonth() + 1),
-      DD: string = ten(date.getDate()),
-      HH: string = ten(date.getHours()),
-      II: string = ten(date.getMinutes()),
-      SS: string = ten(date.getSeconds());
+    return this.inCurrentTimezone(date).format("YYYY-MM-DDTHH:mm:ss");
+  }
 
-    return YYYY + "-" + MM + "-" + DD + "T" + HH + ":" + II + ":" + SS;
+  /**
+   * Inverse of toDateTimeLocalString: turn the offset-less wall-clock a user
+   * typed into a `<input type="date">` / `<input type="datetime-local">` into
+   * the instant it names in the current timezone. Without this the browser
+   * zone is used to resolve the wall-clock, so a user whose machine reports a
+   * different zone than the one they configured would have their times stored
+   * hours off.
+   */
+  public static fromDateTimeLocalString(value: string): Date {
+    return moment
+      .tz(value.trim(), this.getCurrentTimezone().toString())
+      .toDate();
   }
 
   public static fromJSON(json: JSONObject): Date {
@@ -1713,7 +1744,7 @@ export default class OneUptimeDate {
       formatstring = "MMM DD, YYYY";
     }
 
-    const momentDate: moment.Moment = moment(date).local();
+    const momentDate: moment.Moment = this.inCurrentTimezone(date);
 
     return (
       momentDate.format(formatstring) +
@@ -1752,8 +1783,41 @@ export default class OneUptimeDate {
     return zoneAbbr;
   }
 
+  /**
+   * Set the timezone the signed-in user picked in User Settings. Once set,
+   * every "local" helper below resolves wall-clock times in THIS zone instead
+   * of the zone the browser reports, so what the user reads and types matches
+   * the timezone they configured — even when the machine, OS or VPN they are
+   * on reports a different one. Pass null to fall back to the browser zone
+   * (signed-out surfaces, or a user who has not picked a timezone).
+   */
+  public static setUserTimezone(timezone: Timezone | null | undefined): void {
+    /*
+     * Ignore anything moment does not recognise as an IANA zone. A stale or
+     * corrupt saved value must not take every date in the UI down with it.
+     */
+    if (!timezone || !moment.tz.zone(timezone.toString())) {
+      this.userTimezone = null;
+      return;
+    }
+
+    this.userTimezone = timezone;
+  }
+
+  public static getUserTimezone(): Timezone | null {
+    return this.userTimezone;
+  }
+
   public static getCurrentTimezone(): Timezone {
-    return moment.tz.guess() as Timezone;
+    return this.userTimezone || (moment.tz.guess() as Timezone);
+  }
+
+  /**
+   * The instant `date` viewed through the current timezone — the single place
+   * that decides which wall clock the "local" helpers below read from.
+   */
+  private static inCurrentTimezone(date: Date | string): moment.Moment {
+    return moment(this.fromString(date)).tz(this.getCurrentTimezone());
   }
 
   public static getDateString(date: Date): string {
@@ -1810,9 +1874,8 @@ export default class OneUptimeDate {
   }
 
   public static asDateForDatabaseQuery(date: string | Date): string {
-    date = this.fromString(date);
     const formatstring: string = "YYYY-MM-DD";
-    return moment(date).local().format(formatstring);
+    return this.inCurrentTimezone(date).format(formatstring);
   }
 
   public static asFilterDateForDatabaseQuery(
@@ -1850,13 +1913,19 @@ export default class OneUptimeDate {
       throw new BadDataException("Invalid seconds");
     }
 
-    const date: Date = OneUptimeDate.getCurrentDate();
-
-    date.setHours(hour);
-    date.setMinutes(minutes);
-    date.setSeconds(seconds);
-
-    return date;
+    /*
+     * The hour/minute the user picked is a wall-clock reading in THEIR
+     * timezone, so anchor it to today's date in that zone rather than setting
+     * it on a browser-local Date.
+     */
+    return this.inCurrentTimezone(OneUptimeDate.getCurrentDate())
+      .set({
+        hour: hour,
+        minute: minutes,
+        second: seconds,
+        millisecond: 0,
+      })
+      .toDate();
   }
 
   public static toDatabaseDate(date: Date): string {

package/UI/Components/Forms/Fields/FormField.tsx

@@ -291,9 +291,19 @@ const FormField: <T extends GenericObject>(
         fieldDescription = "";
       }
 
-      fieldDescription +=
-        " This is in your local timezone - " +
-        OneUptimeDate.getCurrentTimezoneString();
+      /*
+       * Name the zone in full. The abbreviation on its own ("EDT") is not
+       * enough to tell whether the field is following the timezone picked in
+       * User Settings or the one the browser reports.
+       */
+      fieldDescription = (
+        fieldDescription +
+        " This is in your timezone - " +
+        OneUptimeDate.getCurrentTimezoneString() +
+        " (" +
+        OneUptimeDate.getCurrentTimezone().toString() +
+        ")."
+      ).trim();
     }
 
     type GetFieldDescriptionFunction = () => ReactElement | string;

package/UI/Components/Input/Input.tsx

@@ -174,7 +174,12 @@ const Input: FunctionComponent<ComponentProps> = (
                 props.type === InputType.DATETIME_LOCAL) &&
               value
             ) {
-              const date: Date = OneUptimeDate.fromString(value);
+              /*
+               * The input hands back a bare wall-clock with no offset. Resolve
+               * it in the user's configured timezone rather than letting the
+               * browser assume its own zone.
+               */
+              const date: Date = OneUptimeDate.fromDateTimeLocalString(value);
               const dateString: string = OneUptimeDate.toString(date);
               setValue(dateString);
               if (props.onChange) {

package/UI/Components/TimePicker/TimePicker.tsx

@@ -81,8 +81,12 @@ const TimePicker: FunctionComponent<ComponentProps> = (
     return toDate(props.value) || OneUptimeDate.getCurrentDate();
   }, [props.value]);
 
-  const [hours24, setHours24] = useState<number>(initialDate.getHours());
-  const [minutes, setMinutes] = useState<number>(initialDate.getMinutes());
+  const [hours24, setHours24] = useState<number>(
+    OneUptimeDate.getLocalHours(initialDate),
+  );
+  const [minutes, setMinutes] = useState<number>(
+    OneUptimeDate.getLocalMinutes(initialDate),
+  );
 
   const hoursInputRef: React.MutableRefObject<HTMLInputElement | null> =
     useRef<HTMLInputElement | null>(null);
@@ -99,8 +103,8 @@ const TimePicker: FunctionComponent<ComponentProps> = (
     if (!d) {
       return;
     }
-    setHours24(d.getHours());
-    setMinutes(d.getMinutes());
+    setHours24(OneUptimeDate.getLocalHours(d));
+    setMinutes(OneUptimeDate.getLocalMinutes(d));
   }, [props.value]);
 
   const emitChange: (h24: number, m: number) => void = (