fix: Invalid Date Display in Table Widget's Date Column When Using Unix Timestamp (ms)

app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/Date_column_types_validation_spec.ts

@@ -0,0 +1,149 @@
+import { tableDateColumnTypes } from "../../../../../fixtures/tableDateColumnTypes";
+import {
+  agHelper,
+  entityExplorer,
+  propPane,
+  table,
+} from "../../../../../support/Objects/ObjectsCore";
+
+import EditorNavigation, {
+  EntityType,
+} from "../../../../../support/Pages/EditorNavigation";
+
+describe(
+  "Table widget date column type validation",
+  { tags: ["@tag.Widget", "@tag.Table"] },
+  () => {
+    before(() => {
+      entityExplorer.DragNDropWidget("tablewidgetv2", 350, 500);
+      EditorNavigation.SelectEntityByName("Table1", EntityType.Widget);
+      propPane.ToggleJSMode("Table data", true);
+      propPane.UpdatePropertyFieldValue("Table data", tableDateColumnTypes);
+      table.EditColumn("unixs", "v2");
+    });
+
+    beforeEach(() => {
+      propPane.NavigateBackToPropertyPane(false);
+    });
+
+    const setEditableDateFormats = (format: string) => {
+      // Update date format property
+      propPane.ToggleJSMode("Date format", true);
+      propPane.UpdatePropertyFieldValue("Date format", format);
+
+      // Update display format property
+      propPane.ToggleJSMode("Display format", true);
+      propPane.UpdatePropertyFieldValue("Display format", "YYYY-MM-DD");
+
+      // Toggle editable
+      propPane.TogglePropertyState("Editable", "On");
+    };
+
+    const clickAndValidateDateCell = (row: number, column: number) => {
+      // Click unix cell edit
+      table.ClickOnEditIcon(row, column);
+
+      // Click on specific date within
+      agHelper.GetNClick(
+        `${table._dateInputPopover} [aria-label='${table.getFormattedTomorrowDates().verboseFormat}']`,
+      );
+
+      // Check that date is set in column
+      table
+        .ReadTableRowColumnData(row, column, "v2")
+        .then((val) =>
+          expect(val).to.equal(table.getFormattedTomorrowDates().isoFormat),
+        );
+    };
+
+    it("1. should allow inline editing of Unix Timestamp in seconds (unix/s)", () => {
+      table.ChangeColumnType("unixs", "Date");
+      setEditableDateFormats("Epoch");
+      clickAndValidateDateCell(0, 0);
+    });
+
+    it("2. should allow inline editing of Unix Timestamp in milliseconds (unix/ms)", () => {
+      table.ChangeColumnType("unixms", "Date");
+      setEditableDateFormats("Milliseconds");
+      clickAndValidateDateCell(0, 1);
+    });
+
+    it("3. should allow inline editing of date in YYYY-MM-DD format", () => {
+      table.EditColumn("yyyymmdd", "v2");
+      setEditableDateFormats("YYYY-MM-DD");
+      clickAndValidateDateCell(0, 2);
+    });
+
+    it("4. should allow inline editing of date in YYYY-MM-DD HH:mm format", () => {
+      table.EditColumn("yyyymmddhhmm", "v2");
+      setEditableDateFormats("YYYY-MM-DD HH:mm");
+      clickAndValidateDateCell(0, 3);
+    });
+
+    it("5. should allow inline editing of date in ISO 8601 format (YYYY-MM-DDTHH:mm:ss)", () => {
+      table.EditColumn("iso8601", "v2");
+      setEditableDateFormats("YYYY-MM-DDTHH:mm:ss");
+      clickAndValidateDateCell(0, 4);
+    });
+
+    it("6. should allow inline editing of date in YYYY-MM-DD HH:mm format", () => {
+      table.EditColumn("yyyymmddTHHmmss", "v2");
+      setEditableDateFormats("YYYY-MM-DD HH:mm");
+      clickAndValidateDateCell(0, 5);
+    });
+
+    it("7. should allow inline editing of date in 'do MMM yyyy' format", () => {
+      table.ChangeColumnType("yyyymmddhhmmss", "Date");
+      setEditableDateFormats("YYYY-MM-DDTHH:mm:ss");
+      clickAndValidateDateCell(0, 6);
+    });
+
+    it("8. should allow inline editing of date in DD/MM/YYYY format", () => {
+      table.ChangeColumnType("doMMMyyyy", "Date");
+      setEditableDateFormats("Do MMM YYYY");
+      clickAndValidateDateCell(0, 7);
+    });
+
+    it("9. should allow inline editing of date in DD/MM/YYYY HH:mm format", () => {
+      table.EditColumn("ddmmyyyy", "v2");
+      setEditableDateFormats("DD/MM/YYYY");
+      clickAndValidateDateCell(0, 8);
+    });
+
+    it("10. should allow inline editing of date in LLL (Month Day, Year Time) format", () => {
+      table.EditColumn("ddmmyyyyhhmm", "v2");
+      setEditableDateFormats("DD/MM/YYYY HH:mm");
+      clickAndValidateDateCell(0, 9);
+    });
+
+    it("11. should allow inline editing of date in LL (Month Day, Year) format", () => {
+      table.EditColumn("lll", "v2");
+      setEditableDateFormats("LLL");
+      clickAndValidateDateCell(0, 10);
+    });
+
+    it("12. should allow inline editing of date in 'D MMMM, YYYY' format", () => {
+      table.EditColumn("ll", "v2");
+      setEditableDateFormats("LL");
+      clickAndValidateDateCell(0, 11);
+    });
+
+    it("13. should allow inline editing of date in 'h:mm A D MMMM, YYYY' format", () => {
+      table.EditColumn("dmmmmyyyy", "v2");
+      setEditableDateFormats("D MMMM, YYYY");
+      clickAndValidateDateCell(0, 12);
+    });
+
+    it("14. should allow inline editing of date in MM-DD-YYYY format", () => {
+      table.EditColumn("hmmAdmmmmyyyy", "v2");
+      setEditableDateFormats("H:mm A D MMMM, YYYY");
+      clickAndValidateDateCell(0, 13);
+    });
+
+    it("15. should allow inline editing of date in DD-MM-YYYY format", () => {
+      table.EditColumn("mm1dd1yyyy", "v2");
+      setEditableDateFormats("MM-DD-YYYY");
+      clickAndValidateDateCell(0, 14);
+    });
+  },
+);

app/client/cypress/fixtures/tableDateColumnTypes.ts

@@ -0,0 +1,26 @@
+export const tableDateColumnTypes = `
+{{
+  [
+    {
+      "unixs": 1727212200,
+      "unixms": 1727212200000,
+      "yyyymmdd": "2024-09-25",
+      "yyyymmddhhmm": "2024-09-25 14:30",
+      iso8601: "2024-09-25T14:30:00.000Z",
+      "yyyymmddTHHmmss": "2024-09-25T14:30:00",
+      "yyyymmddhhmmss": "2024-09-25 02:30:00",
+      "doMMMyyyy": "25th Sep 2024",
+      "ddmmyyyy": "25/09/2024",
+      "ddmmyyyyhhmm": "25/09/2024 14:30",
+      lll: "September 25, 2024 2:30 PM",
+      ll: "September 25, 2024",
+      "dmmmmyyyy": "25 September, 2024",
+      "hmmAdmmmmyyyy": "2:30 PM 25 September, 2024",
+      "mm1dd1yyyy": "09-25-2024",
+      "dd1mm1yyyy": "25-09-2024",
+      "ddimmiyy": "25/09/24",
+      "mmddyy": "09/25/24",
+    },
+  ]
+}}
+`;

app/client/cypress/support/Pages/Table.ts

@@ -848,4 +848,38 @@ export class Table {
     this.agHelper.GetHoverNClick(selector, 1, true);
     verify && cy.get(selector).eq(1).should("be.disabled");
   }
+
+  /**
+   * Helper function to get formatted date strings for tomorrow's date.
+   *
+   * @returns {Object} An object containing:
+   *  - verbose format (e.g., "Sat Sep 21 2024")
+   *  - ISO date format (e.g., "2024-09-21")
+   */
+  public getFormattedTomorrowDates() {
+    // Create a new Date object for today
+    const tomorrow = new Date();
+
+    // Set the date to tomorrow by adding 1 to today's date
+    tomorrow.setDate(tomorrow.getDate() + 1);
+
+    // Format tomorrow's date in verbose form (e.g., "Sat Sep 21 2024")
+    const verboseFormat = tomorrow
+      .toLocaleDateString("en-US", {
+        weekday: "short",
+        year: "numeric",
+        month: "short",
+        day: "2-digit",
+      })
+      .replace(/,/g, ""); // Remove commas from the formatted string
+
+    // Format tomorrow's date in ISO form (e.g., "2024-09-21")
+    const isoFormat = tomorrow.toISOString().split("T")[0]; // Extract the date part only
+
+    // Return both formatted date strings as an object
+    return {
+      verboseFormat,
+      isoFormat,
+    };
+  }
 }

app/client/src/widgets/TableWidgetV2/component/cellComponents/DateCell.tsx

@@ -9,7 +9,11 @@ import DateComponent from "widgets/DatePickerWidget2/component";
 import { TimePrecision } from "widgets/DatePickerWidget2/constants";
 import type { RenderDefaultPropsType } from "./PlainTextCell";
 import styled from "styled-components";
-import { EditableCellActions } from "widgets/TableWidgetV2/constants";
+import {
+  DateInputFormat,
+  EditableCellActions,
+  MomentDateInputFormat,
+} from "widgets/TableWidgetV2/constants";
 import { ISO_DATE_FORMAT } from "constants/WidgetValidation";
 import moment from "moment";
 import { BasicCell } from "./BasicCell";
@@ -196,6 +200,19 @@ export const DateCell = (props: DateComponentProps) => {
   const [isValid, setIsValid] = useState(true);
   const [showRequiredError, setShowRequiredError] = useState(false);
   const contentRef = useRef<HTMLDivElement>(null);
+
+  const convertInputFormatToMomentFormat = (inputFormat: string) => {
+    let momentAdjustedInputFormat = inputFormat;
+
+    if (inputFormat === DateInputFormat.MILLISECONDS) {
+      momentAdjustedInputFormat = MomentDateInputFormat.MILLISECONDS;
+    } else if (inputFormat === DateInputFormat.EPOCH) {
+      momentAdjustedInputFormat = MomentDateInputFormat.SECONDS;
+    }
+
+    return momentAdjustedInputFormat;
+  };
+
   const isCellCompletelyValid = useMemo(
     () => isEditableCellValid && isValid,
     [isEditableCellValid, isValid],
@@ -218,8 +235,15 @@ export const DateCell = (props: DateComponentProps) => {
   }, [value, props.outputFormat]);
 
   const onDateSelected = (date: string) => {
+    const momentAdjustedInputFormat =
+      convertInputFormatToMomentFormat(inputFormat);
+
+    const formattedDate = date
+      ? moment(date).format(momentAdjustedInputFormat)
+      : "";
+
     if (isNewRow) {
-      updateNewRowValues(alias, date, date);
+      updateNewRowValues(alias, date, formattedDate);
 
       return;
     }
@@ -235,8 +259,6 @@ export const DateCell = (props: DateComponentProps) => {
     setShowRequiredError(false);
     setHasFocus(false);
 
-    const formattedDate = date ? moment(date).format(inputFormat) : "";
-
     onDateSave(rowIndex, alias, formattedDate, onDateSelectedString);
   };
 

app/client/src/widgets/TableWidgetV2/constants.ts

@@ -219,6 +219,11 @@ export enum DateInputFormat {
   MILLISECONDS = "Milliseconds",
 }
 
+export enum MomentDateInputFormat {
+  MILLISECONDS = "x",
+  SECONDS = "X",
+}
+
 export const defaultEditableCell: EditableCell = {
   column: "",
   index: -1,

app/client/src/widgets/TableWidgetV2/widget/reactTableUtils/TransformDataPureFn.test.ts

@@ -0,0 +1,54 @@
+import type { ReactTableColumnProps } from "widgets/TableWidgetV2/component/Constants";
+import {
+  columns,
+  columnsNonDate,
+  expectedDataNonDate,
+  tableDataNonDate,
+} from "./fixtures";
+import { transformDataPureFn } from "./transformDataPureFn";
+
+describe("transformDataPureFn", () => {
+  it("should handle invalid date values", () => {
+    const invalidTableData = [
+      {
+        epoch: "invalid_epoch",
+        milliseconds: "invalid_milliseconds",
+        iso_8601: "invalid_iso_8601",
+        yyyy_mm_dd: "invalid_date",
+        lll: "invalid_date",
+      },
+    ];
+
+    const expectedInvalidData = [
+      {
+        epoch: "Invalid date",
+        milliseconds: "Invalid date",
+        iso_8601: "8601-01-01",
+        yyyy_mm_dd: "Invalid date",
+        lll: "Invalid date",
+      },
+    ];
+
+    const result = transformDataPureFn(
+      invalidTableData,
+      columns as ReactTableColumnProps[],
+    );
+
+    expect(result).toEqual(expectedInvalidData);
+  });
+
+  it("should return an empty array when tableData is empty", () => {
+    const result = transformDataPureFn([], columns as ReactTableColumnProps[]);
+
+    expect(result).toEqual([]);
+  });
+
+  it("should not transform non-date data", () => {
+    const result = transformDataPureFn(
+      tableDataNonDate,
+      columnsNonDate as ReactTableColumnProps[],
+    );
+
+    expect(result).toEqual(expectedDataNonDate);
+  });
+});