Adjust min/max value with timezone offset in date-picker-cell (#1042)

Author: lukasmasuch

packages/cells/src/cells/date-picker-cell.tsx

@@ -31,7 +31,7 @@ export interface DatePickerCellProps {
     readonly displayDate: string;
     /* Defines the type of the HTML input element. */
     readonly format: DateKind;
-    /* Timezone offset in minutes. 
+    /* Timezone offset in minutes.
     This can be used to adjust the date by a given timezone offset. */
     readonly timezoneOffset?: number;
     /* Minimum value that can be entered by the user.
@@ -40,17 +40,27 @@ export interface DatePickerCellProps {
     /* Maximum value that can be entered by the user.
     This is passed to the max attribute of the HTML input element. */
     readonly max?: string | Date;
-    /* Granularity that the date must adhere. 
+    /* Granularity that the date must adhere.
     This is passed to the step attribute of the HTML input element. */
     readonly step?: string;
 }
 
 export type DateKind = "date" | "time" | "datetime-local";
 
-export const formatValueForHTMLInput = (dateKind: DateKind, date: Date | undefined | null): string => {
+export const formatValueForHTMLInput = (
+    dateKind: DateKind,
+    date: Date | undefined | null,
+    timezoneOffsetMs?: number
+): string => {
     if (date === undefined || date === null) {
         return "";
     }
+
+    if (timezoneOffsetMs) {
+        // Adjust based on the configured timezone offset:
+        date = new Date(date.getTime() + timezoneOffsetMs);
+    }
+
     const isoDate = date.toISOString();
     switch (dateKind) {
         case "date":
@@ -72,18 +82,18 @@ const Editor: ReturnType<ProvideEditorCallback<DatePickerCell>> = cell => {
     const step =
         cellData.step !== undefined && !Number.isNaN(Number(cellData.step)) ? Number(cellData.step) : undefined;
 
-    const minValue = cellData.min instanceof Date ? formatValueForHTMLInput(format, cellData.min) : cellData.min;
+    // Convert timezone offset from minutes to milliseconds:
+    const timezoneOffsetMs = cellData.timezoneOffset ? cellData.timezoneOffset * 60 * 1000 : 0;
 
-    const maxValue = cellData.max instanceof Date ? formatValueForHTMLInput(format, cellData.max) : cellData.max;
+    // We need to convert the min and max to iso strings. Thereby, we are also
+    // adjusting the values to the given timezone offset.
+    const minValue =
+        cellData.min instanceof Date ? formatValueForHTMLInput(format, cellData.min, timezoneOffsetMs) : cellData.min;
+    const maxValue =
+        cellData.max instanceof Date ? formatValueForHTMLInput(format, cellData.max, timezoneOffsetMs) : cellData.max;
+
+    const value = formatValueForHTMLInput(format, cellData.date, timezoneOffsetMs);
 
-    let date = cellData.date;
-    // Convert timezone offset to milliseconds
-    const timezoneOffsetMs = cellData.timezoneOffset ? cellData.timezoneOffset * 60 * 1000 : 0;
-    if (timezoneOffsetMs && date) {
-        // Adjust based on the timezone offset
-        date = new Date(date.getTime() + timezoneOffsetMs);
-    }
-    const value = formatValueForHTMLInput(format, date);
     if (cell.value.readonly) {
         return (
             <TextCellEntry

packages/cells/test/date-picker-cell.test.tsx

@@ -17,6 +17,21 @@ describe("formatValueForHTMLInput", () => {
     ])("check %p format and %p date leads correct format: {%p}", (format: string, date: Date, valueForHTML: string) => {
         expect(formatValueForHTMLInput(format as DateKind, date)).toStrictEqual(valueForHTML);
     });
+
+    it.each([
+        ["datetime-local", new Date("2023-01-01T12:00:00.000Z"), 60 * 60 * 1000, "2023-01-01T13:00:00.000"],
+        ["datetime-local", new Date("2023-01-01T12:00:00.000Z"), -60 * 60 * 1000, "2023-01-01T11:00:00.000"],
+        ["date", new Date("2023-01-01T23:30:00.000Z"), 60 * 60 * 1000, "2023-01-02"],
+        ["date", new Date("2023-01-02T00:30:00.000Z"), -60 * 60 * 1000, "2023-01-01"],
+        ["time", new Date("1970-01-01T10:00:00.000Z"), 30 * 60 * 1000, "10:30:00.000"],
+        ["time", new Date("1970-01-01T10:00:00.000Z"), -30 * 60 * 1000, "09:30:00.000"],
+    ])(
+        "check %p format and %p date with timezoneOffsetMs %p leads to correct format: %p",
+        (format: string, date: Date, timezoneOffsetMs: number, valueForHTML: string) => {
+            expect(formatValueForHTMLInput(format as DateKind, date, timezoneOffsetMs)).toStrictEqual(valueForHTML);
+        }
+    );
+
     it("throws an error when a weird value is passed", () => {
         expect(() => formatValueForHTMLInput("weird" as DateKind, new Date())).toThrow("Unknown date kind weird");
     });