From 560cf9fc62eacc9ee1048549f182346f2f125d15 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 3 Dec 2022 14:20:52 +0800
Subject: [PATCH 01/14] feat(nc-gui): add time formats

---
 packages/nc-gui/utils/dateTimeUtils.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/utils/dateTimeUtils.ts b/packages/nc-gui/utils/dateTimeUtils.ts
index 8736221840..6f58db18c5 100644
--- a/packages/nc-gui/utils/dateTimeUtils.ts
+++ b/packages/nc-gui/utils/dateTimeUtils.ts
@@ -5,17 +5,19 @@ export const timeAgo = (date: any) => {
 }
 
 export const dateFormats = [
+  'YYYY-MM-DD',
+  'YYYY/MM/DD',
   'DD-MM-YYYY',
   'MM-DD-YYYY',
-  'YYYY-MM-DD',
   'DD/MM/YYYY',
   'MM/DD/YYYY',
-  'YYYY/MM/DD',
   'DD MM YYYY',
   'MM DD YYYY',
   'YYYY MM DD',
 ]
 
+export const timeFormats = ['HH:mm', 'HH:mm:ss', 'HH:mm:ss.SSS']
+
 export const handleTZ = (val: any) => {
   if (!val) {
     return
@@ -60,7 +62,7 @@ export function getDateFormat(v: string) {
 
 export function getDateTimeFormat(v: string) {
   for (const format of dateFormats) {
-    for (const timeFormat of ['HH:mm', 'HH:mm:ss', 'HH:mm:ss.SSS']) {
+    for (const timeFormat of timeFormats) {
       const dateTimeFormat = `${format} ${timeFormat}`
       if (dayjs(v, dateTimeFormat, true).isValid() as any) {
         return dateTimeFormat

From 0295f4ca7163a93972173efdaed447439a7e02e2 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 3 Dec 2022 14:21:04 +0800
Subject: [PATCH 02/14] feat(nc-gui): add LazySmartsheetColumnDateTimeOptions
 for DateTime

---
 packages/nc-gui/components/smartsheet/column/EditOrAdd.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
index f7a63fe1de..cfe70bae07 100644
--- a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
+++ b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
@@ -177,6 +177,7 @@ useEventListener('keydown', (e: KeyboardEvent) => {
         <LazySmartsheetColumnCheckboxOptions v-if="formState.uidt === UITypes.Checkbox" v-model:value="formState" />
         <LazySmartsheetColumnLookupOptions v-if="!isEdit && formState.uidt === UITypes.Lookup" v-model:value="formState" />
         <LazySmartsheetColumnDateOptions v-if="formState.uidt === UITypes.Date" v-model:value="formState" />
+        <LazySmartsheetColumnDateTimeOptions v-if="formState.uidt === UITypes.DateTime" v-model:value="formState" />
         <LazySmartsheetColumnRollupOptions v-if="!isEdit && formState.uidt === UITypes.Rollup" v-model:value="formState" />
         <LazySmartsheetColumnLinkedToAnotherRecordOptions
           v-if="!isEdit && formState.uidt === UITypes.LinkToAnotherRecord"

From 2d466830129d8f9661cd7bed705e962b11867f49 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 3 Dec 2022 14:21:41 +0800
Subject: [PATCH 03/14] feat(nc-gui): add DateTimeOptions

---
 .../smartsheet/column/DateTimeOptions.vue     | 46 +++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 packages/nc-gui/components/smartsheet/column/DateTimeOptions.vue

diff --git a/packages/nc-gui/components/smartsheet/column/DateTimeOptions.vue b/packages/nc-gui/components/smartsheet/column/DateTimeOptions.vue
new file mode 100644
index 0000000000..6b0f8e25e6
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet/column/DateTimeOptions.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { dateFormats, timeFormats, useVModel } from '#imports'
+
+const props = defineProps<{
+  value: any
+}>()
+
+const emit = defineEmits(['update:value'])
+
+const vModel = useVModel(props, 'value', emit)
+
+if (!vModel.value.meta?.date_format) {
+  if (!vModel.value.meta) vModel.value.meta = {}
+  vModel.value.meta.date_format = dateFormats[0]
+}
+
+if (!vModel.value.meta?.time_format) {
+  if (!vModel.value.meta) vModel.value.meta = {}
+  vModel.value.meta.time_format = timeFormats[0]
+}
+</script>
+
+<template>
+  <a-form-item label="Date Format">
+    <a-select v-model:value="vModel.meta.date_format" dropdown-class-name="nc-dropdown-date-format">
+      <a-select-option v-for="(format, i) of dateFormats" :key="i" :value="format">
+        <div class="flex flex-row items-center">
+          <div class="text-xs">
+            {{ format }}
+          </div>
+        </div>
+      </a-select-option>
+    </a-select>
+  </a-form-item>
+  <a-form-item label="Time Format">
+    <a-select v-model:value="vModel.meta.time_format" dropdown-class-name="nc-dropdown-time-format">
+      <a-select-option v-for="(format, i) of timeFormats" :key="i" :value="format">
+        <div class="flex flex-row items-center">
+          <div class="text-xs">
+            {{ format }}
+          </div>
+        </div>
+      </a-select-option>
+    </a-select>
+  </a-form-item>
+</template>

From 55fd0fee74ce814cb0a4ea42a741182433b57f15 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 3 Dec 2022 14:22:09 +0800
Subject: [PATCH 04/14] feat(nc-gui): format DateTime data

---
 .../nc-gui/components/cell/DateTimePicker.vue     | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/cell/DateTimePicker.vue b/packages/nc-gui/components/cell/DateTimePicker.vue
index 8819d23ce7..ffd88acc0c 100644
--- a/packages/nc-gui/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui/components/cell/DateTimePicker.vue
@@ -2,10 +2,13 @@
 import dayjs from 'dayjs'
 import {
   ActiveCellInj,
+  ColumnInj,
   ReadonlyInj,
+  dateFormats,
   inject,
   isDrawerOrModalExist,
   ref,
+  timeFormats,
   useProject,
   useSelectedCellKeyupListener,
   watch,
@@ -28,9 +31,15 @@ const active = inject(ActiveCellInj, ref(false))
 
 const editable = inject(EditModeInj, ref(false))
 
+const columnMeta = inject(ColumnInj, null)!
+
 let isDateInvalid = $ref(false)
 
-const dateFormat = isMysql ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm:ssZ'
+const dateTimeFormat = $computed(() => {
+  const dateFormat = columnMeta?.value?.meta?.date_format ?? dateFormats[0]
+  const timeFormat = columnMeta?.value?.meta?.time_format ?? timeFormats[0]
+  return `${dateFormat} ${timeFormat}${!isMysql ? 'Z' : ''}`
+})
 
 let localState = $computed({
   get() {
@@ -52,7 +61,7 @@ let localState = $computed({
     }
 
     if (val.isValid()) {
-      emit('update:modelValue', val?.format(dateFormat))
+      emit('update:modelValue', val?.format(dateTimeFormat))
     }
   },
 })
@@ -163,7 +172,7 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
     :show-time="true"
     :bordered="false"
     class="!w-full !px-0 !border-none"
-    format="YYYY-MM-DD HH:mm"
+    :format="dateTimeFormat"
     :placeholder="isDateInvalid ? 'Invalid date' : ''"
     :allow-clear="!readOnly && !localState && !isPk"
     :input-read-only="true"

From 164f0c9f8eb82024cd95cfabfe24ea648c3c9273 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 3 Dec 2022 16:27:53 +0800
Subject: [PATCH 05/14] feat(playwrights): add DateTimeCell.ts

---
 .../Dashboard/common/Cell/DateTimeCell.ts     | 36 +++++++++++++++++++
 .../pages/Dashboard/common/Cell/index.ts      |  3 ++
 2 files changed, 39 insertions(+)
 create mode 100644 tests/playwright/pages/Dashboard/common/Cell/DateTimeCell.ts

diff --git a/tests/playwright/pages/Dashboard/common/Cell/DateTimeCell.ts b/tests/playwright/pages/Dashboard/common/Cell/DateTimeCell.ts
new file mode 100644
index 0000000000..9d876726cb
--- /dev/null
+++ b/tests/playwright/pages/Dashboard/common/Cell/DateTimeCell.ts
@@ -0,0 +1,36 @@
+import { CellPageObject } from '.';
+import BasePage from '../../../Base';
+
+export class DateTimeCellPageObject extends BasePage {
+  readonly cell: CellPageObject;
+
+  constructor(cell: CellPageObject) {
+    super(cell.rootPage);
+    this.cell = cell;
+  }
+
+  get({ index, columnHeader }: { index?: number; columnHeader: string }) {
+    return this.cell.get({ index, columnHeader });
+  }
+
+  async open({ index, columnHeader }: { index: number; columnHeader: string }) {
+    await this.cell.dblclick({
+      index,
+      columnHeader,
+    });
+  }
+
+  async selectDateTime({
+    // date in format `YYYY-MM-DD`
+    // time in format 'HH:mm'
+    dateTime,
+  }: {
+    dateTime: string;
+  }) {
+    await this.rootPage.locator(`td[title="${dateTime}"]`).click();
+  }
+
+  async close() {
+    await this.rootPage.keyboard.press('Escape');
+  }
+}
diff --git a/tests/playwright/pages/Dashboard/common/Cell/index.ts b/tests/playwright/pages/Dashboard/common/Cell/index.ts
index 22052a2ca6..92fdf7a2f2 100644
--- a/tests/playwright/pages/Dashboard/common/Cell/index.ts
+++ b/tests/playwright/pages/Dashboard/common/Cell/index.ts
@@ -7,6 +7,7 @@ import { SharedFormPage } from '../../../SharedForm';
 import { CheckboxCellPageObject } from './CheckboxCell';
 import { RatingCellPageObject } from './RatingCell';
 import { DateCellPageObject } from './DateCell';
+import { DateTimeCellPageObject } from './DateTimeCell';
 
 export class CellPageObject extends BasePage {
   readonly parent: GridPage | SharedFormPage;
@@ -15,6 +16,7 @@ export class CellPageObject extends BasePage {
   readonly checkbox: CheckboxCellPageObject;
   readonly rating: RatingCellPageObject;
   readonly date: DateCellPageObject;
+  readonly dateTime: DateTimeCellPageObject;
 
   constructor(parent: GridPage | SharedFormPage) {
     super(parent.rootPage);
@@ -24,6 +26,7 @@ export class CellPageObject extends BasePage {
     this.checkbox = new CheckboxCellPageObject(this);
     this.rating = new RatingCellPageObject(this);
     this.date = new DateCellPageObject(this);
+    this.dateTime = new DateTimeCellPageObject(this);
   }
 
   get({ index, columnHeader }: { index?: number; columnHeader: string }): Locator {

From beb9c3bbf2e73ed211667e59ca91d9c8a0e07115 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 3 Dec 2022 20:07:01 +0800
Subject: [PATCH 06/14] refactor(nc-gui): add class to select and remove
 unnecessary div

---
 .../smartsheet/column/DateTimeOptions.vue        | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/column/DateTimeOptions.vue b/packages/nc-gui/components/smartsheet/column/DateTimeOptions.vue
index 6b0f8e25e6..152b504fd4 100644
--- a/packages/nc-gui/components/smartsheet/column/DateTimeOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/DateTimeOptions.vue
@@ -22,24 +22,16 @@ if (!vModel.value.meta?.time_format) {
 
 <template>
   <a-form-item label="Date Format">
-    <a-select v-model:value="vModel.meta.date_format" dropdown-class-name="nc-dropdown-date-format">
+    <a-select v-model:value="vModel.meta.date_format" class="nc-date-select" dropdown-class-name="nc-dropdown-date-format">
       <a-select-option v-for="(format, i) of dateFormats" :key="i" :value="format">
-        <div class="flex flex-row items-center">
-          <div class="text-xs">
-            {{ format }}
-          </div>
-        </div>
+        {{ format }}
       </a-select-option>
     </a-select>
   </a-form-item>
   <a-form-item label="Time Format">
-    <a-select v-model:value="vModel.meta.time_format" dropdown-class-name="nc-dropdown-time-format">
+    <a-select v-model:value="vModel.meta.time_format" class="nc-time-select" dropdown-class-name="nc-dropdown-time-format">
       <a-select-option v-for="(format, i) of timeFormats" :key="i" :value="format">
-        <div class="flex flex-row items-center">
-          <div class="text-xs">
-            {{ format }}
-          </div>
-        </div>
+        {{ format }}
       </a-select-option>
     </a-select>
   </a-form-item>

From 8a84ad6838c31fec1dca8354322cf168e386cb7c Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 3 Dec 2022 20:07:28 +0800
Subject: [PATCH 07/14] chore(nc-gui): remove HH:mm:ss.SSS as SSS is not
 configurable in picker

---
 packages/nc-gui/utils/dateTimeUtils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/utils/dateTimeUtils.ts b/packages/nc-gui/utils/dateTimeUtils.ts
index 6f58db18c5..9b28637e9f 100644
--- a/packages/nc-gui/utils/dateTimeUtils.ts
+++ b/packages/nc-gui/utils/dateTimeUtils.ts
@@ -16,7 +16,7 @@ export const dateFormats = [
   'YYYY MM DD',
 ]
 
-export const timeFormats = ['HH:mm', 'HH:mm:ss', 'HH:mm:ss.SSS']
+export const timeFormats = ['HH:mm', 'HH:mm:ss']
 
 export const handleTZ = (val: any) => {
   if (!val) {

From 8d85fe2063cf97518df6994928cdee7b5499e304 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 3 Dec 2022 20:07:57 +0800
Subject: [PATCH 08/14] feat(playwright): add selectDate & selectTime

---
 .../Dashboard/common/Cell/DateTimeCell.ts     | 34 ++++++++++++++++---
 1 file changed, 29 insertions(+), 5 deletions(-)

diff --git a/tests/playwright/pages/Dashboard/common/Cell/DateTimeCell.ts b/tests/playwright/pages/Dashboard/common/Cell/DateTimeCell.ts
index 9d876726cb..0445b7fa60 100644
--- a/tests/playwright/pages/Dashboard/common/Cell/DateTimeCell.ts
+++ b/tests/playwright/pages/Dashboard/common/Cell/DateTimeCell.ts
@@ -20,14 +20,38 @@ export class DateTimeCellPageObject extends BasePage {
     });
   }
 
-  async selectDateTime({
+  async selectDate({
     // date in format `YYYY-MM-DD`
-    // time in format 'HH:mm'
-    dateTime,
+    date,
   }: {
-    dateTime: string;
+    date: string;
   }) {
-    await this.rootPage.locator(`td[title="${dateTime}"]`).click();
+    await this.rootPage.locator(`td[title="${date}"]`).click();
+  }
+
+  async selectTime({
+    // hour: 0 - 23
+    // minute: 0 - 59
+    // second: 0 - 59
+    hour,
+    minute,
+    second,
+  }: {
+    hour: string;
+    minute: string;
+    second?: string;
+  }) {
+    await this.rootPage
+      .locator(`.ant-picker-time-panel-column:nth-child(1) > ant-picker-time-panel-cell:nth-child(${hour})`)
+      .click();
+    await this.rootPage
+      .locator(`.ant-picker-time-panel-column:nth-child(2) > ant-picker-time-panel-cell:nth-child(${minute})`)
+      .click();
+    if (second != null) {
+      await this.rootPage
+        .locator(`.ant-picker-time-panel-column:nth-child(3) > ant-picker-time-panel-cell:nth-child(${second})`)
+        .click();
+    }
   }
 
   async close() {

From a290876657dd66421f162d6c83d92b9aef20266b Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 3 Dec 2022 20:09:00 +0800
Subject: [PATCH 09/14] feat(playwright): add tests for datetime

---
 .../pages/Dashboard/Grid/Column/index.ts      | 24 +++++++
 tests/playwright/tests/columnDateTime.spec.ts | 69 +++++++++++++++++++
 2 files changed, 93 insertions(+)
 create mode 100644 tests/playwright/tests/columnDateTime.spec.ts

diff --git a/tests/playwright/pages/Dashboard/Grid/Column/index.ts b/tests/playwright/pages/Dashboard/Grid/Column/index.ts
index 48107c7800..1a35a7655a 100644
--- a/tests/playwright/pages/Dashboard/Grid/Column/index.ts
+++ b/tests/playwright/pages/Dashboard/Grid/Column/index.ts
@@ -35,6 +35,8 @@ export class ColumnPageObject extends BasePage {
     relationType = '',
     rollupType = '',
     format = '',
+    dateFormat = '',
+    timeFormat = '',
     insertAfterColumnTitle,
     insertBeforeColumnTitle,
   }: {
@@ -47,6 +49,8 @@ export class ColumnPageObject extends BasePage {
     relationType?: string;
     rollupType?: string;
     format?: string;
+    dateFormat?: string;
+    timeFormat?: string;
     insertBeforeColumnTitle?: string;
     insertAfterColumnTitle?: string;
   }) {
@@ -88,6 +92,14 @@ export class ColumnPageObject extends BasePage {
           })
           .click();
         break;
+      case 'DateTime':
+        // Date Format
+        await this.get().locator('.nc-date-select').click();
+        await this.rootPage.locator('.ant-select-item').locator(`text="${dateFormat}"`).click();
+        // Time Format
+        await this.get().locator('.nc-time-select').click();
+        await this.rootPage.locator('.ant-select-item').locator(`text="${timeFormat}"`).click();
+        break;
       case 'Formula':
         await this.get().locator('.nc-formula-input').fill(formula);
         break;
@@ -220,11 +232,15 @@ export class ColumnPageObject extends BasePage {
     type = 'SingleLineText',
     formula = '',
     format,
+    dateFormat = '',
+    timeFormat = '',
   }: {
     title: string;
     type?: string;
     formula?: string;
     format?: string;
+    dateFormat?: string;
+    timeFormat?: string;
   }) {
     await this.getColumnHeader(title).locator('.nc-ui-dt-dropdown').click();
     await this.rootPage.locator('li[role="menuitem"]:has-text("Edit")').click();
@@ -243,6 +259,14 @@ export class ColumnPageObject extends BasePage {
           })
           .click();
         break;
+      case 'DateTime':
+        // Date Format
+        await this.get().locator('.nc-date-select').click();
+        await this.rootPage.locator('.ant-select-item').locator(`text="${dateFormat}"`).click();
+        // Time Format
+        await this.get().locator('.nc-time-select').click();
+        await this.rootPage.locator('.ant-select-item').locator(`text="${timeFormat}"`).click();
+        break;
       default:
         break;
     }
diff --git a/tests/playwright/tests/columnDateTime.spec.ts b/tests/playwright/tests/columnDateTime.spec.ts
new file mode 100644
index 0000000000..faf81b627d
--- /dev/null
+++ b/tests/playwright/tests/columnDateTime.spec.ts
@@ -0,0 +1,69 @@
+import { test } from '@playwright/test';
+import { DashboardPage } from '../pages/Dashboard';
+import setup from '../setup';
+
+// Storing one additional dummy value "10" at end of every input array
+// this will trigger update to previously committed data
+const dateTimeData = [
+  {
+    dateFormat: 'YYYY-MM-DD',
+    timeFormat: 'HH:mm',
+    date: '2022-12-12',
+    hour: '10',
+    minute: '20',
+  },
+  {
+    dateFormat: 'YYYY-MM-DD',
+    timeFormat: 'HH:mm:ss',
+    date: '2022-12-12',
+    hour: '10',
+    minute: '20',
+    second: '30',
+  },
+];
+
+test.describe('DateTime Column', () => {
+  let dashboard: DashboardPage;
+  let context: any;
+
+  test.beforeEach(async ({ page }) => {
+    context = await setup({ page });
+    dashboard = new DashboardPage(page, context.project);
+  });
+
+  test.only('Create DateTime Column', async () => {
+    await dashboard.treeView.createTable({ title: 'test_datetime' });
+    // Create DateTime column
+    await dashboard.grid.column.create({
+      title: 'NC_DATETIME_0',
+      type: 'DateTime',
+      dateFormat: dateTimeData[0].dateFormat,
+      timeFormat: dateTimeData[0].timeFormat,
+    });
+
+    await dashboard.grid.cell.dateTime.open({
+      index: 0,
+      columnHeader: 'NC_DATETIME_0',
+    });
+
+    await dashboard.grid.cell.dateTime.selectDate({
+      date: dateTimeData[0],
+    });
+    await dashboard.grid.cell.dateTime.selectTime({
+      hour: dateTimeData[0].hour,
+      minute: dateTimeData[0].minute,
+    });
+    await dashboard.grid.cell.dateTime.close();
+
+    for (let i = 0; i < dateTimeData.length; i++) {
+      // Edit DateTime column
+      await dashboard.grid.column.openEdit({
+        title: 'NC_DATETIME_0',
+        type: 'DateTime',
+        dateFormat: dateTimeData[i].dateFormat,
+        timeFormat: dateTimeData[i].timeFormat,
+      });
+      // TODO: ...
+    }
+  });
+});

From a5331b9cecb9c908facfb25c9194fdbbd8052eab Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 3 Dec 2022 20:20:37 +0800
Subject: [PATCH 10/14] wip(playwright): DateTime tests

---
 tests/playwright/tests/columnDateTime.spec.ts | 73 +++++++++++++++----
 1 file changed, 57 insertions(+), 16 deletions(-)

diff --git a/tests/playwright/tests/columnDateTime.spec.ts b/tests/playwright/tests/columnDateTime.spec.ts
index faf81b627d..bb6990be6b 100644
--- a/tests/playwright/tests/columnDateTime.spec.ts
+++ b/tests/playwright/tests/columnDateTime.spec.ts
@@ -11,14 +11,50 @@ const dateTimeData = [
     date: '2022-12-12',
     hour: '10',
     minute: '20',
+    output: '2022-12-12 10:20',
   },
   {
     dateFormat: 'YYYY-MM-DD',
     timeFormat: 'HH:mm:ss',
     date: '2022-12-12',
+    hour: '20',
+    minute: '30',
+    second: '40',
+    output: '2022-12-12 20:30:40',
+  },
+  {
+    dateFormat: 'YYYY/MM/DD',
+    timeFormat: 'HH:mm',
+    date: '2022/12/12',
     hour: '10',
     minute: '20',
-    second: '30',
+    output: '2022/12/12 10:20',
+  },
+  {
+    dateFormat: 'YYYY/MM/DD',
+    timeFormat: 'HH:mm:ss',
+    date: '2022/12/12',
+    hour: '5',
+    minute: '30',
+    second: '40',
+    output: '2022/12/12 05:30:40',
+  },
+  {
+    dateFormat: 'DD-MM-YYYY',
+    timeFormat: 'HH:mm',
+    date: '25-11-2022',
+    hour: '3',
+    minute: '20',
+    output: '12-12-2022 03:20',
+  },
+  {
+    dateFormat: 'DD-MM-YYYY',
+    timeFormat: 'HH:mm:ss',
+    date: '25-11-2022',
+    hour: '2',
+    minute: '30',
+    second: '40',
+    output: '25-11-2022 02:30:40',
   },
 ];
 
@@ -41,20 +77,6 @@ test.describe('DateTime Column', () => {
       timeFormat: dateTimeData[0].timeFormat,
     });
 
-    await dashboard.grid.cell.dateTime.open({
-      index: 0,
-      columnHeader: 'NC_DATETIME_0',
-    });
-
-    await dashboard.grid.cell.dateTime.selectDate({
-      date: dateTimeData[0],
-    });
-    await dashboard.grid.cell.dateTime.selectTime({
-      hour: dateTimeData[0].hour,
-      minute: dateTimeData[0].minute,
-    });
-    await dashboard.grid.cell.dateTime.close();
-
     for (let i = 0; i < dateTimeData.length; i++) {
       // Edit DateTime column
       await dashboard.grid.column.openEdit({
@@ -63,7 +85,26 @@ test.describe('DateTime Column', () => {
         dateFormat: dateTimeData[i].dateFormat,
         timeFormat: dateTimeData[i].timeFormat,
       });
-      // TODO: ...
+
+      await dashboard.grid.cell.dateTime.open({
+        index: 0,
+        columnHeader: 'NC_DATETIME_0',
+      });
+
+      await dashboard.grid.cell.dateTime.selectDate({
+        date: dateTimeData[i].date,
+      });
+      await dashboard.grid.cell.dateTime.selectTime({
+        hour: dateTimeData[i].hour,
+        minute: dateTimeData[i].minute,
+      });
+      await dashboard.grid.cell.dateTime.close();
+
+      await dashboard.grid.cell.verify({
+        index: 0,
+        columnHeader: 'NC_DATETIME_0',
+        value: dateTimeData[i].output,
+      });
     }
   });
 });

From eab412504a8cbb43cc15398590082f6de25669fe Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 5 Dec 2022 13:22:25 +0800
Subject: [PATCH 11/14] feat(playwright): add verifyDateCell

---
 .../pages/Dashboard/common/Cell/index.ts         | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/tests/playwright/pages/Dashboard/common/Cell/index.ts b/tests/playwright/pages/Dashboard/common/Cell/index.ts
index 92fdf7a2f2..bb32f48fa7 100644
--- a/tests/playwright/pages/Dashboard/common/Cell/index.ts
+++ b/tests/playwright/pages/Dashboard/common/Cell/index.ts
@@ -101,6 +101,22 @@ export class CellPageObject extends BasePage {
     }
   }
 
+  async verifyDateCell({ index, columnHeader, value }: { index: number; columnHeader: string; value: string }) {
+    const _verify = async expectedValue => {
+      await expect
+        .poll(async () => {
+          const cell = await this.get({
+            index,
+            columnHeader,
+          }).locator('input');
+          return await cell.getAttribute('title');
+        })
+        .toEqual(expectedValue);
+    };
+
+    await _verify(value);
+  }
+
   async verifyQrCodeCell({
     index,
     columnHeader,

From 5291dc6c201fa93e8d4bb0a402f1e4df32031b89 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 5 Dec 2022 13:23:13 +0800
Subject: [PATCH 12/14] fix(nc-gui): use YYYY-MM-DD HH:mm:ss instead

---
 packages/nc-gui/components/cell/DateTimePicker.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/cell/DateTimePicker.vue b/packages/nc-gui/components/cell/DateTimePicker.vue
index ffd88acc0c..200943245c 100644
--- a/packages/nc-gui/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui/components/cell/DateTimePicker.vue
@@ -61,7 +61,7 @@ let localState = $computed({
     }
 
     if (val.isValid()) {
-      emit('update:modelValue', val?.format(dateTimeFormat))
+      emit('update:modelValue', val?.format('YYYY-MM-DD HH:mm:ss'))
     }
   },
 })

From 34ffcd5215e92c26cd2ea7ae9fb3b89992befdbd Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 5 Dec 2022 13:23:56 +0800
Subject: [PATCH 13/14] feat(playwright): datetime tests

---
 .../Dashboard/common/Cell/DateTimeCell.ts     | 21 ++++---
 tests/playwright/tests/columnDateTime.spec.ts | 61 ++++++++++---------
 2 files changed, 46 insertions(+), 36 deletions(-)

diff --git a/tests/playwright/pages/Dashboard/common/Cell/DateTimeCell.ts b/tests/playwright/pages/Dashboard/common/Cell/DateTimeCell.ts
index 0445b7fa60..50b762b618 100644
--- a/tests/playwright/pages/Dashboard/common/Cell/DateTimeCell.ts
+++ b/tests/playwright/pages/Dashboard/common/Cell/DateTimeCell.ts
@@ -14,18 +14,25 @@ export class DateTimeCellPageObject extends BasePage {
   }
 
   async open({ index, columnHeader }: { index: number; columnHeader: string }) {
+    await this.rootPage.locator('.nc-grid-add-new-cell').click();
+
     await this.cell.dblclick({
       index,
       columnHeader,
     });
   }
 
+  async save() {
+    await this.rootPage.locator('button:has-text("Ok")').click();
+  }
+
   async selectDate({
-    // date in format `YYYY-MM-DD`
+    // date formats in `YYYY-MM-DD`
     date,
   }: {
     date: string;
   }) {
+    // title date format needs to be YYYY-MM-DD
     await this.rootPage.locator(`td[title="${date}"]`).click();
   }
 
@@ -37,19 +44,19 @@ export class DateTimeCellPageObject extends BasePage {
     minute,
     second,
   }: {
-    hour: string;
-    minute: string;
-    second?: string;
+    hour: number;
+    minute: number;
+    second?: number | null;
   }) {
     await this.rootPage
-      .locator(`.ant-picker-time-panel-column:nth-child(1) > ant-picker-time-panel-cell:nth-child(${hour})`)
+      .locator(`.ant-picker-time-panel-column:nth-child(1) > .ant-picker-time-panel-cell:nth-child(${hour + 1})`)
       .click();
     await this.rootPage
-      .locator(`.ant-picker-time-panel-column:nth-child(2) > ant-picker-time-panel-cell:nth-child(${minute})`)
+      .locator(`.ant-picker-time-panel-column:nth-child(2) > .ant-picker-time-panel-cell:nth-child(${minute + 1})`)
       .click();
     if (second != null) {
       await this.rootPage
-        .locator(`.ant-picker-time-panel-column:nth-child(3) > ant-picker-time-panel-cell:nth-child(${second})`)
+        .locator(`.ant-picker-time-panel-column:nth-child(3) > .ant-picker-time-panel-cell:nth-child(${second + 1})`)
         .click();
     }
   }
diff --git a/tests/playwright/tests/columnDateTime.spec.ts b/tests/playwright/tests/columnDateTime.spec.ts
index bb6990be6b..e30e4837d1 100644
--- a/tests/playwright/tests/columnDateTime.spec.ts
+++ b/tests/playwright/tests/columnDateTime.spec.ts
@@ -2,59 +2,57 @@ import { test } from '@playwright/test';
 import { DashboardPage } from '../pages/Dashboard';
 import setup from '../setup';
 
-// Storing one additional dummy value "10" at end of every input array
-// this will trigger update to previously committed data
 const dateTimeData = [
   {
     dateFormat: 'YYYY-MM-DD',
     timeFormat: 'HH:mm',
     date: '2022-12-12',
-    hour: '10',
-    minute: '20',
+    hour: 10,
+    minute: 20,
     output: '2022-12-12 10:20',
   },
   {
     dateFormat: 'YYYY-MM-DD',
     timeFormat: 'HH:mm:ss',
-    date: '2022-12-12',
-    hour: '20',
-    minute: '30',
-    second: '40',
-    output: '2022-12-12 20:30:40',
+    date: '2022-12-11',
+    hour: 20,
+    minute: 30,
+    second: 40,
+    output: '2022-12-11 20:30:40',
   },
   {
     dateFormat: 'YYYY/MM/DD',
     timeFormat: 'HH:mm',
-    date: '2022/12/12',
-    hour: '10',
-    minute: '20',
-    output: '2022/12/12 10:20',
+    date: '2022-12-13',
+    hour: 10,
+    minute: 20,
+    output: '2022/12/13 10:20',
   },
   {
     dateFormat: 'YYYY/MM/DD',
     timeFormat: 'HH:mm:ss',
-    date: '2022/12/12',
-    hour: '5',
-    minute: '30',
-    second: '40',
-    output: '2022/12/12 05:30:40',
+    date: '2022-12-14',
+    hour: 5,
+    minute: 30,
+    second: 40,
+    output: '2022/12/14 05:30:40',
   },
   {
     dateFormat: 'DD-MM-YYYY',
     timeFormat: 'HH:mm',
-    date: '25-11-2022',
-    hour: '3',
-    minute: '20',
-    output: '12-12-2022 03:20',
+    date: '2022-12-10',
+    hour: 4,
+    minute: 30,
+    output: '10-12-2022 04:30',
   },
   {
     dateFormat: 'DD-MM-YYYY',
     timeFormat: 'HH:mm:ss',
-    date: '25-11-2022',
-    hour: '2',
-    minute: '30',
-    second: '40',
-    output: '25-11-2022 02:30:40',
+    date: '2022-12-26',
+    hour: 2,
+    minute: 30,
+    second: 40,
+    output: '26-12-2022 02:30:40',
   },
 ];
 
@@ -86,6 +84,8 @@ test.describe('DateTime Column', () => {
         timeFormat: dateTimeData[i].timeFormat,
       });
 
+      await dashboard.grid.column.save({ isUpdated: true });
+
       await dashboard.grid.cell.dateTime.open({
         index: 0,
         columnHeader: 'NC_DATETIME_0',
@@ -94,13 +94,16 @@ test.describe('DateTime Column', () => {
       await dashboard.grid.cell.dateTime.selectDate({
         date: dateTimeData[i].date,
       });
+
       await dashboard.grid.cell.dateTime.selectTime({
         hour: dateTimeData[i].hour,
         minute: dateTimeData[i].minute,
+        second: dateTimeData[i].second,
       });
-      await dashboard.grid.cell.dateTime.close();
 
-      await dashboard.grid.cell.verify({
+      await dashboard.grid.cell.dateTime.save();
+
+      await dashboard.grid.cell.verifyDateCell({
         index: 0,
         columnHeader: 'NC_DATETIME_0',
         value: dateTimeData[i].output,

From b425adea9a6dc45334949b599f3db796f4ca53ff Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 5 Dec 2022 14:07:59 +0800
Subject: [PATCH 14/14] chore(playwright): remove `.only` for date time test

---
 tests/playwright/tests/columnDateTime.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/playwright/tests/columnDateTime.spec.ts b/tests/playwright/tests/columnDateTime.spec.ts
index e30e4837d1..c5349a9a98 100644
--- a/tests/playwright/tests/columnDateTime.spec.ts
+++ b/tests/playwright/tests/columnDateTime.spec.ts
@@ -65,7 +65,7 @@ test.describe('DateTime Column', () => {
     dashboard = new DashboardPage(page, context.project);
   });
 
-  test.only('Create DateTime Column', async () => {
+  test('Create DateTime Column', async () => {
     await dashboard.treeView.createTable({ title: 'test_datetime' });
     // Create DateTime column
     await dashboard.grid.column.create({