Merge pull request #2534 from elvus/develop

Add date format option to DatePickerCell

packages/nc-gui/components/project/spreadsheet/components/EditColumn.vue

@@ -145,7 +145,13 @@
                     there are multiple values associated with a cell
                   </v-alert>
                 </v-col>
-
+                <v-col v-if="isDate" cols="12">
+                  <date-options
+                    v-model="newColumn.meta"
+                    :column="newColumn"
+                    :meta="meta"
+                  />
+                </v-col>
                 <v-col v-if="isSelect" cols="12">
                   <custom-select-options
                     v-model="newColumn.dtxp"
@@ -581,6 +587,7 @@ import RatingOptions from '~/components/project/spreadsheet/components/editColum
 import CheckboxOptions from '~/components/project/spreadsheet/components/editColumn/CheckboxOptions'
 import CurrencyOptions from '@/components/project/spreadsheet/components/editColumn/CurrencyOptions'
 import DurationOptions from '@/components/project/spreadsheet/components/editColumn/DurationOptions'
+import DateOptions from '@/components/project/spreadsheet/components/editColumn/DateOptions'
 
 const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber]
 
@@ -597,7 +604,8 @@ export default {
     RelationOptions,
     CustomSelectOptions,
     CurrencyOptions,
-    DurationOptions
+    DurationOptions,
+    DateOptions
   },
   props: {
     nodes: Object,
@@ -693,6 +701,9 @@ export default {
     },
     isCurrency() {
       return this.newColumn && this.newColumn.uidt === UITypes.Currency
+    },
+    isDate() {
+      return this.newColumn && this.newColumn.uidt === UITypes.Date
     }
   },
   watch: {

packages/nc-gui/components/project/spreadsheet/components/EditableCell.vue

@@ -68,6 +68,7 @@
     <date-picker-cell
       v-else-if="isDate"
       v-model="localState"
+      :column="column"
       v-on="parentListeners"
     />
 

packages/nc-gui/components/project/spreadsheet/components/editColumn/DateOptions.vue

@@ -0,0 +1,38 @@
+<template>
+  <v-autocomplete
+    v-model="colMeta.date_format"
+    label="Date Format"
+    class="caption nc-column-name-input"
+    :rules="[isValidDateFormat]"
+    :items="dateFormatList"
+    dense
+    outlined
+  />
+</template>
+<script>
+import { dateFormat, validateDateFormat } from '~/helpers/dateFormatHelper'
+export default {
+  name: 'DateOptions',
+  props: ['column', 'meta', 'value'],
+  data: () => ({
+    colMeta: {
+      date_format: 'YYYY-MM-DD'
+    },
+    dateFormatList: dateFormat,
+    isValidDateFormat: (value) => {
+      return validateDateFormat(value) || 'Invalid Date Format'
+    }
+  }),
+  watch: {
+    value() {
+      this.colMeta = this.value || {}
+    },
+    colMeta(v) {
+      this.$emit('input', v)
+    }
+  },
+  created() {
+    this.colMeta = this.value ? { ...this.value } : { ...this.colMeta }
+  }
+}
+</script>

packages/nc-gui/components/project/spreadsheet/components/editableCell/DatePickerCell.vue

@@ -18,6 +18,7 @@ import dayjs from 'dayjs'
 export default {
   name: 'DatePickerCell',
   props: {
+    column: Object,
     value: [String, Date]
   },
   computed: {
@@ -35,10 +36,18 @@ export default {
     },
     date() {
       if (!this.value || this.localState) {
-        return this.localState
+        return this.localState ? dayjs(this.localState).format(this.datepickerMeta.date_format || 'YYYY-MM-DD') : this.localState
       }
       return 'Invalid Date'
     },
+    datepickerMeta() {
+      return {
+        date_format: 'YYYY-MM-DD',
+        ...(this.column && this.column.meta
+          ? this.column.meta
+          : {})
+      }
+    },
     parentListeners() {
       const $listeners = {}
 

packages/nc-gui/helpers/dateFormatHelper.js

@@ -0,0 +1,9 @@
+export const dateFormat = [
+    '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 function validateDateFormat(v) {
+    return dateFormat.includes(v)
+}