feat: add today shortcut for Date related fields (#9425)

* fix: document today's date shortcut

* fix: update keyboard bindings

* fix: update keybinding

* fix: date time cell copypaste

packages/nc-gui/components/cell/DatePicker.vue

@@ -242,31 +242,24 @@ useEventListener(document, 'keydown', (e: KeyboardEvent) => {
   // To prevent event listener on non active cell
   if (!active.value) return
 
-  if (
+  if (e.altKey || e.shiftKey || !isGrid.value || isExpandedForm.value || isEditColumn.value || isExpandedFormOpenExist()) {
-    e.altKey ||
-    e.ctrlKey ||
-    e.shiftKey ||
-    e.metaKey ||
-    !isGrid.value ||
-    isExpandedForm.value ||
-    isEditColumn.value ||
-    isExpandedFormOpenExist()
-  ) {
     return
   }
 
-  switch (e.key) {
+  if (e.metaKey || e.ctrlKey) {
-    case ';':
+    if (e.key === ';') {
-      localState.value = dayjs(new Date())
+      if (isGrid.value && !isExpandedForm.value && !isEditColumn.value) {
-      e.preventDefault()
+        localState.value = dayjs(new Date())
-      break
+        e.preventDefault()
-    default:
-      if (!isOpen.value && datePickerRef.value && /^[0-9a-z]$/i.test(e.key)) {
-        isClearedInputMode.value = true
-        datePickerRef.value.focus()
-        editable.value = true
-        open.value = true
       }
+    } else return
+  }
+
+  if (!isOpen.value && datePickerRef.value && /^[0-9a-z]$/i.test(e.key)) {
+    isClearedInputMode.value = true
+    datePickerRef.value.focus()
+    editable.value = true
+    open.value = true
   }
 })
 

packages/nc-gui/components/cell/DateTimePicker.vue

@@ -296,31 +296,24 @@ useEventListener(document, 'keydown', (e: KeyboardEvent) => {
   // To prevent event listener on non active cell
   if (!active.value) return
 
-  if (
+  if (e.altKey || e.shiftKey || !isGrid.value || isExpandedForm.value || isEditColumn.value || isExpandedFormOpenExist()) {
-    e.altKey ||
-    e.ctrlKey ||
-    e.shiftKey ||
-    e.metaKey ||
-    !isGrid.value ||
-    isExpandedForm.value ||
-    isEditColumn.value ||
-    isExpandedFormOpenExist()
-  ) {
     return
   }
 
-  switch (e.key) {
+  if (e.metaKey || e.ctrlKey) {
-    case ';':
+    if (e.key === ';') {
-      localState.value = dayjs(new Date())
+      if (isGrid.value && !isExpandedForm.value && !isEditColumn.value) {
-      e.preventDefault()
+        localState.value = dayjs(new Date())
-      break
+        e.preventDefault()
-    default:
-      if (!isOpen.value && (datePickerRef.value || timePickerRef.value) && /^[0-9a-z]$/i.test(e.key)) {
-        isClearedInputMode.value = true
-        isDatePicker.value ? datePickerRef.value?.focus() : timePickerRef.value?.focus()
-        editable.value = true
-        open.value = true
       }
+    } else return
+  }
+
+  if (!isOpen.value && (datePickerRef.value || timePickerRef.value) && /^[0-9a-z]$/i.test(e.key)) {
+    isClearedInputMode.value = true
+    isDatePicker.value ? datePickerRef.value?.focus() : timePickerRef.value?.focus()
+    editable.value = true
+    open.value = true
   }
 })
 

packages/nc-gui/components/cell/TimePicker.vue

@@ -225,31 +225,24 @@ useEventListener(document, 'keydown', (e: KeyboardEvent) => {
   // To prevent event listener on non active cell
   if (!active.value) return
 
-  if (
+  if (e.altKey || e.shiftKey || !isGrid.value || isExpandedForm.value || isEditColumn.value || isExpandedFormOpenExist()) {
-    e.altKey ||
-    e.ctrlKey ||
-    e.shiftKey ||
-    e.metaKey ||
-    !isGrid.value ||
-    isExpandedForm.value ||
-    isEditColumn.value ||
-    isExpandedFormOpenExist()
-  ) {
     return
   }
 
-  switch (e.key) {
+  if (e.metaKey || e.ctrlKey) {
-    case ';':
+    if (e.key === ';') {
-      localState.value = dayjs(new Date())
+      if (isGrid.value && !isExpandedForm.value && !isEditColumn.value) {
-      e.preventDefault()
+        localState.value = dayjs(new Date())
-      break
+        e.preventDefault()
-    default:
-      if (!isOpen.value && datePickerRef.value && /^[0-9a-z]$/i.test(e.key)) {
-        isClearedInputMode.value = true
-        datePickerRef.value.focus()
-        editable.value = true
-        open.value = true
       }
+    } else return
+  }
+
+  if (!isOpen.value && datePickerRef.value && /^[0-9a-z]$/i.test(e.key)) {
+    isClearedInputMode.value = true
+    datePickerRef.value.focus()
+    editable.value = true
+    open.value = true
   }
 })
 

packages/nc-gui/components/cell/YearPicker.vue

@@ -206,31 +206,24 @@ useEventListener(document, 'keydown', (e: KeyboardEvent) => {
   // To prevent event listener on non active cell
   if (!active.value) return
 
-  if (
+  if (e.altKey || e.shiftKey || !isGrid.value || isExpandedForm.value || isEditColumn.value || isExpandedFormOpenExist()) {
-    e.altKey ||
-    e.ctrlKey ||
-    e.shiftKey ||
-    e.metaKey ||
-    !isGrid.value ||
-    isExpandedForm.value ||
-    isEditColumn.value ||
-    isExpandedFormOpenExist()
-  ) {
     return
   }
 
-  switch (e.key) {
+  if (e.metaKey || e.ctrlKey) {
-    case ';':
+    if (e.key === ';') {
-      localState.value = dayjs(new Date())
+      if (isGrid.value && !isExpandedForm.value && !isEditColumn.value) {
-      e.preventDefault()
+        localState.value = dayjs(new Date())
-      break
+        e.preventDefault()
-    default:
-      if (!isOpen.value && datePickerRef.value && /^[0-9a-z]$/i.test(e.key)) {
-        isClearedInputMode.value = true
-        datePickerRef.value.focus()
-        editable.value = true
-        open.value = true
       }
+    } else return
+  }
+
+  if (!isOpen.value && datePickerRef.value && /^[0-9a-z]$/i.test(e.key)) {
+    isClearedInputMode.value = true
+    datePickerRef.value.focus()
+    editable.value = true
+    open.value = true
   }
 })
 

packages/noco-docs/docs/020.getting-started/040.keyboard-shortcuts.md

@@ -91,18 +91,19 @@ To navigate within ⌘+J menu,
 
 
 ## Field type specific shortcuts
-|        Datatype        |         Key | Behaviour                          |
+|           Datatype            |         Key | Behaviour                          |
-|:----------------------:|------------:|:-----------------------------------|
+|:-----------------------------:|------------:|:-----------------------------------|
-| Text & Numerical cells |     `←` `→` | Move cursor to the left / right    |
+|    Text & Numerical cells     |     `←` `→` | Move cursor to the left / right    |
-|                        |     `↑` `↓` | Move cursor to the beginning / end |
+|                               |     `↑` `↓` | Move cursor to the beginning / end |
-|     Single Select      |     `↑` `↓` | Move between options               |
+|         Single Select         |     `↑` `↓` | Move between options               |
-|                        |     `Enter` | Select option                      |
+|                               |     `Enter` | Select option                      |
-|      Multi Select      |     `↑` `↓` | Move between options               |
+|         Multi Select          |     `↑` `↓` | Move between options               |
-|                        |     `Enter` | Select / deselect option           |
+|                               |     `Enter` | Select / deselect option           |
-|          Link          |     `↑` `↓` | Move between options               |
+|             Link              |     `↑` `↓` | Move between options               |
-|                        |     `Enter` | Link current selection             |
+|                               |     `Enter` | Link current selection             |
-|        Checkbox        |     `Enter` | Toggle                             |
+|           Checkbox            |     `Enter` | Toggle                             |
-|         Rating         | `<0 ~ Max>` | Enter number to toggle rating      |
+|            Rating             | `<0 ~ Max>` | Enter number to toggle rating      |
+| Date / Time / DateTime / Year |   `⌘` + `;` | Select today's date                |
 
 
 ## Expanded form shortcuts