From 6b2a75057cd93dee59beb519a5ccf20ad74f8096 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 14 Jun 2022 15:19:24 +0800
Subject: [PATCH 1/2] fix: show err message when input cannot be parsed

---
 .../editableCell/DateTimePickerCell.vue       | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell/DateTimePickerCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/DateTimePickerCell.vue
index 07abd59972..56f9496edb 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editableCell/DateTimePickerCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editableCell/DateTimePickerCell.vue
@@ -3,6 +3,7 @@
     <v-datetime-picker
       ref="picker"
       v-model="localState"
+      v-if="!showMessage"
       class="caption xc-date-time-picker"
       :text-field-props="{
         class:'caption mt-0 pt-0',
@@ -16,6 +17,10 @@
       }"
       v-on="parentListeners"
     />
+    <div v-if="showMessage" class="edit-warning">
+      <!-- TODO: i18n -->
+      ERR: Couldn't parse {{ this.value }}
+    </div>
   </div>
 </template>
 
@@ -31,6 +36,9 @@ export default {
   props: {
     value: [String, Date, Number], ignoreFocus: Boolean
   },
+  data: () => ({
+    showMessage: false
+  }),
   computed: {
     isMysql() {
       return ['mysql', 'mysql2'].indexOf(this.$store.getters['project/GtrClientType'])
@@ -40,8 +48,12 @@ export default {
         if (!this.value) {
           return this.value
         }
-        return (/^\d+$/.test(this.value) ? dayjs(+this.value) : dayjs(this.value))
-          .format('YYYY-MM-DD HH:mm')
+        const d = (/^\d+$/.test(this.value) ? dayjs(+this.value) : dayjs(this.value))
+        if (d.isValid()) {
+          return d.format('YYYY-MM-DD HH:mm')
+        } else {
+          this.showMessage = true
+        }
       },
       set(value) {
         if (this.isMysql) {
@@ -78,6 +90,12 @@ export default {
   padding-top: 0 !important;
   font-size: inherit !important;
 }
+
+.edit-warning {
+  padding: 10px;
+  text-align: left;
+  color: #E65100;
+}
 </style>
 <!--
 /**

From 58f6bfada9fa0b51c1fb5b6990184cd4f87c6076 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 14 Jun 2022 15:59:14 +0800
Subject: [PATCH 2/2] fix: trigger dtp to change value

---
 .../editableCell/DateTimePickerCell.vue       | 38 ++++++++++---------
 1 file changed, 20 insertions(+), 18 deletions(-)

diff --git a/packages/nc-gui/components/project/spreadsheet/components/editableCell/DateTimePickerCell.vue b/packages/nc-gui/components/project/spreadsheet/components/editableCell/DateTimePickerCell.vue
index 56f9496edb..2e3755b686 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editableCell/DateTimePickerCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editableCell/DateTimePickerCell.vue
@@ -1,23 +1,24 @@
 <template>
   <div>
-    <v-datetime-picker
-      ref="picker"
-      v-model="localState"
-      v-if="!showMessage"
-      class="caption xc-date-time-picker"
-      :text-field-props="{
-        class:'caption mt-0 pt-0',
-        flat:true,
-        solo:true,
-        dense:true,
-        hideDetails:true
-      }"
-      :time-picker-props="{
-        format:'24hr'
-      }"
-      v-on="parentListeners"
-    />
-    <div v-if="showMessage" class="edit-warning">
+    <div v-show="!showMessage">
+      <v-datetime-picker
+        ref="picker"
+        v-model="localState"
+        class="caption xc-date-time-picker"
+        :text-field-props="{
+          class:'caption mt-0 pt-0',
+          flat:true,
+          solo:true,
+          dense:true,
+          hideDetails:true
+        }"
+        :time-picker-props="{
+          format:'24hr'
+        }"
+        v-on="parentListeners"
+      />
+    </div>
+    <div v-show="showMessage" class="edit-warning" @dblclick="$refs.picker.display = true">
       <!-- TODO: i18n -->
       ERR: Couldn't parse {{ this.value }}
     </div>
@@ -50,6 +51,7 @@ export default {
         }
         const d = (/^\d+$/.test(this.value) ? dayjs(+this.value) : dayjs(this.value))
         if (d.isValid()) {
+          this.showMessage = false
           return d.format('YYYY-MM-DD HH:mm')
         } else {
           this.showMessage = true