diff --git a/packages/nc-gui/components/smartsheet/column/DateOptions.vue b/packages/nc-gui/components/smartsheet/column/DateOptions.vue
index d54bd9e3c0..b1cba50511 100644
--- a/packages/nc-gui/components/smartsheet/column/DateOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/DateOptions.vue
@@ -18,7 +18,7 @@ if (!vModel.value.meta?.date_format) {
 
 <template>
   <a-form-item :label="$t('labels.dateFormat')">
-    <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">
diff --git a/tests/playwright/pages/Dashboard/Grid/Column/index.ts b/tests/playwright/pages/Dashboard/Grid/Column/index.ts
index 5c98201847..7094a79f11 100644
--- a/tests/playwright/pages/Dashboard/Grid/Column/index.ts
+++ b/tests/playwright/pages/Dashboard/Grid/Column/index.ts
@@ -104,6 +104,11 @@ export class ColumnPageObject extends BasePage {
             .click();
         }
         break;
+      case 'Date':
+        // Date Format
+        await this.get().locator('.nc-date-select').click();
+        await this.rootPage.locator('.ant-select-item').locator(`text="${dateFormat}"`).click();
+        break;
       case 'DateTime':
         // Date Format
         await this.get().locator('.nc-date-select').click();
@@ -310,6 +315,11 @@ export class ColumnPageObject extends BasePage {
         await this.get().locator('.nc-time-select').click();
         await this.rootPage.locator('.ant-select-item').locator(`text="${timeFormat}"`).click();
         break;
+      case 'Date':
+        // Date Format
+        await this.get().locator('.nc-date-select').click();
+        await this.rootPage.locator('.ant-select-item').locator(`text="${dateFormat}"`).click();
+        break;
       default:
         break;
     }
diff --git a/tests/playwright/pages/Dashboard/common/Cell/DateTimeCell.ts b/tests/playwright/pages/Dashboard/common/Cell/DateTimeCell.ts
index 227c939384..65eface407 100644
--- a/tests/playwright/pages/Dashboard/common/Cell/DateTimeCell.ts
+++ b/tests/playwright/pages/Dashboard/common/Cell/DateTimeCell.ts
@@ -29,8 +29,10 @@ export class DateTimeCellPageObject extends BasePage {
   async selectDate({
     // date formats in `YYYY-MM-DD`
     date,
+    skipDate = false,
   }: {
     date: string;
+    skipDate?: boolean;
   }) {
     // title date format needs to be YYYY-MM-DD
     const [year, month, day] = date.split('-');
@@ -40,6 +42,11 @@ export class DateTimeCellPageObject extends BasePage {
     await this.rootPage.locator('.ant-picker-year-btn:visible').click();
     await this.rootPage.locator(`td[title="${year}"]`).click();
 
+    if (skipDate) {
+      await this.rootPage.locator(`td[title="${year}-${month}"]`).click();
+      return;
+    }
+
     // configure month
     await this.rootPage.locator('.ant-picker-month-btn:visible').click();
     await this.rootPage.locator(`td[title="${year}-${month}"]`).click();
diff --git a/tests/playwright/tests/db/columns/columnDateTime.spec.ts b/tests/playwright/tests/db/columns/columnDateTime.spec.ts
index c7cee86483..67f14c91b0 100644
--- a/tests/playwright/tests/db/columns/columnDateTime.spec.ts
+++ b/tests/playwright/tests/db/columns/columnDateTime.spec.ts
@@ -57,6 +57,29 @@ const dateTimeData = [
   },
 ];
 
+const dateData = [
+  {
+    dateFormat: 'YYYY-MM-DD',
+    date: '2022-12-12',
+    output: '2022-12-12',
+  },
+  {
+    dateFormat: 'YYYY/MM/DD',
+    date: '2022-12-13',
+    output: '2022/12/13',
+  },
+  {
+    dateFormat: 'DD-MM-YYYY',
+    date: '2022-12-10',
+    output: '10-12-2022',
+  },
+  {
+    dateFormat: 'YYYY-MM',
+    date: '2022-12-26',
+    output: '2022-12',
+  },
+];
+
 test.describe('DateTime Column', () => {
   if (enableQuickRun()) test.skip();
   let dashboard: DashboardPage;
@@ -117,3 +140,55 @@ test.describe('DateTime Column', () => {
     }
   });
 });
+
+test.describe('Date Column', () => {
+  // if (enableQuickRun()) test.skip();
+  let dashboard: DashboardPage;
+  let context: NcContext;
+
+  test.beforeEach(async ({ page }) => {
+    context = await setup({ page, isEmptyProject: true });
+    dashboard = new DashboardPage(page, context.base);
+  });
+
+  test.afterEach(async () => {
+    await unsetup(context);
+  });
+
+  test('Create Date Column', async () => {
+    await dashboard.treeView.createTable({ title: 'test_date', baseTitle: context.base.title });
+    // Create DateTime column
+    await dashboard.grid.column.create({
+      title: 'NC_DATE_0',
+      type: 'Date',
+      dateFormat: dateData[0].dateFormat,
+    });
+
+    for (let i = 0; i < dateData.length; i++) {
+      // Edit DateTime column
+      await dashboard.grid.column.openEdit({
+        title: 'NC_DATE_0',
+        type: 'Date',
+        dateFormat: dateData[i].dateFormat,
+      });
+
+      await dashboard.grid.column.save({ isUpdated: true });
+
+      await dashboard.grid.cell.dateTime.open({
+        index: 0,
+        columnHeader: 'NC_DATE_0',
+      });
+
+      await dashboard.grid.cell.dateTime.selectDate({
+        date: dateData[i].date,
+        skipDate: dateData[i].dateFormat === 'YYYY-MM',
+      });
+
+      await dashboard.grid.cell.verifyDateCell({
+        index: 0,
+        columnHeader: 'NC_DATE_0',
+        value: dateData[i].output,
+      });
+    }
+  });
+});