Resolve "Copying a date field value doesn't respect the formatting"

changelog.md

@@ -13,6 +13,7 @@
 * Replaced the table `order` index with an `order, id` index to improve performance.
 * **breaking change** The API endpoint to rotate a form views slug has been moved to
   `/database/views/${viewId}/rotate-slug/`.
+* Fixed copying/pasting for date field.
 
 ## Released (2021-11-25)
 

web-frontend/modules/database/fieldTypes.js

@@ -1135,7 +1135,7 @@ class BaseDateFieldType extends FieldType {
   }
 
   toHumanReadableString(field, value) {
-    const date = moment.utc(value)
+    const date = moment.tz(value, field.timezone)
 
     if (date.isValid()) {
       const dateFormat = getDateMomentFormat(field.date_format)
@@ -1152,13 +1152,37 @@ class BaseDateFieldType extends FieldType {
     }
   }
 
+  prepareValueForCopy(field, value) {
+    return this.toHumanReadableString(field, value)
+  }
+
   /**
    * Tries to parse the clipboard text value with moment and returns the date in the
    * correct format for the field. If it can't be parsed null is returned.
    */
   prepareValueForPaste(field, clipboardData) {
     const value = clipboardData.getData('text').toUpperCase()
-    const date = moment.utc(value)
+
+    // Formats for ISO dates
+    let formats = [
+      moment.ISO_8601,
+      'YYYY-MM-DD',
+      'YYYY-MM-DD hh:mm A',
+      'YYYY-MM-DD HH:mm',
+    ]
+    // Formats for EU dates
+    const EUFormat = ['DD/MM/YYYY', 'DD/MM/YYYY hh:mm A', 'DD/MM/YYYY HH:mm']
+    // Formats for US dates
+    const USFormat = ['MM/DD/YYYY', 'MM/DD/YYYY hh:mm A', 'MM/DD/YYYY HH:mm']
+
+    // Interpret the pasted date based on the field's current date format
+    if (field.date_format === 'EU') {
+      formats = formats.concat(EUFormat).concat(USFormat)
+    } else if (field.date_format === 'US') {
+      formats = formats.concat(USFormat).concat(EUFormat)
+    }
+
+    const date = moment.utc(value, formats)
 
     if (date.isValid()) {
       return field.date_include_time ? date.format() : date.format('YYYY-MM-DD')
@@ -1250,28 +1274,6 @@ export class CreatedOnLastModifiedBaseFieldType extends BaseDateFieldType {
     return true
   }
 
-  toHumanReadableString(field, value) {
-    const date = moment.tz(value, field.timezone)
-
-    if (date.isValid()) {
-      const dateFormat = getDateMomentFormat(field.date_format)
-      let dateString = date.format(dateFormat)
-
-      if (field.date_include_time) {
-        const timeFormat = getTimeMomentFormat(field.date_time_format)
-        dateString = `${dateString} ${date.format(timeFormat)}`
-      }
-
-      return dateString
-    } else {
-      return ''
-    }
-  }
-
-  prepareValueForCopy(field, value) {
-    return this.toHumanReadableString(field, value)
-  }
-
   getDocsDataType(field) {
     return null
   }

web-frontend/test/unit/database/fieldTypes.spec.js

@@ -1,4 +1,5 @@
 import { TestApp } from '@baserow/test/helpers/testApp'
+import { DateFieldType } from '@baserow/modules/database/fieldTypes'
 
 const mockedFields = {
   text: {
@@ -157,6 +158,125 @@ const mockedFields = {
 
 const valuesToCall = [null, undefined]
 
+const datePrepareValueForCopy = [
+  {
+    fieldValue: '2021-12-04T10:57:22.184611Z',
+    field: {
+      date_format: 'EU',
+      date_include_time: true,
+      date_time_format: '24',
+    },
+    expectedValue: '04/12/2021 10:57',
+  },
+  {
+    fieldValue: '2021-12-07T00:00:00',
+    field: {
+      date_format: 'US',
+      date_include_time: false,
+    },
+    expectedValue: '12/07/2021',
+  },
+  {
+    fieldValue: '2021-12-08T16:06:38.684274Z',
+    field: {
+      date_format: 'ISO',
+      date_include_time: true,
+      date_time_format: '12',
+    },
+    expectedValue: '2021-12-08 04:06 PM',
+  },
+]
+
+const datePrepareValueForPaste = [
+  // Date field with EU format
+  {
+    fieldValue: '04/12/2021',
+    field: {
+      date_format: 'EU',
+    },
+    expectedValue: '2021-12-04',
+  },
+  {
+    fieldValue: '04/12/2021 22:57',
+    field: {
+      date_format: 'EU',
+      date_include_time: true,
+    },
+    expectedValue: '2021-12-04T22:57:00Z',
+  },
+  {
+    fieldValue: '04/12/2021 10:57 PM',
+    field: {
+      date_format: 'EU',
+      date_include_time: true,
+    },
+    expectedValue: '2021-12-04T22:57:00Z',
+  },
+  {
+    fieldValue: '2021-12-04',
+    field: {
+      date_format: 'EU',
+    },
+    expectedValue: '2021-12-04',
+  },
+  {
+    fieldValue: '2021-12-04 22:57',
+    field: {
+      date_format: 'EU',
+      date_include_time: true,
+    },
+    expectedValue: '2021-12-04T22:57:00Z',
+  },
+  {
+    fieldValue: '2021-12-04 10:57 PM',
+    field: {
+      date_format: 'EU',
+      date_include_time: true,
+    },
+    expectedValue: '2021-12-04T22:57:00Z',
+  },
+  {
+    fieldValue: '2021-12-04T22:57:00Z',
+    field: {
+      date_format: 'EU',
+      date_include_time: true,
+    },
+    expectedValue: '2021-12-04T22:57:00Z',
+  },
+  {
+    fieldValue: '04/16/2021', // Explicit US date in EU field
+    field: {
+      date_format: 'EU',
+    },
+    expectedValue: '2021-04-16',
+  },
+
+  // Date field with US format
+  {
+    fieldValue: '04/12/2021',
+    field: {
+      date_format: 'US',
+    },
+    expectedValue: '2021-04-12',
+  },
+  {
+    fieldValue: '04/12/2021 22:57',
+    field: {
+      date_format: 'US',
+      date_include_time: true,
+    },
+    expectedValue: '2021-04-12T22:57:00Z',
+  },
+  {
+    fieldValue: '04/12/2021 10:57 PM',
+    field: {
+      date_format: 'US',
+      date_include_time: true,
+    },
+    expectedValue: '2021-04-12T22:57:00Z',
+  },
+]
+
 describe('FieldType tests', () => {
   let testApp = null
   let fieldRegistry = null
@@ -191,4 +311,32 @@ describe('FieldType tests', () => {
       }
     }
   )
+
+  test.each(datePrepareValueForCopy)(
+    'Verify that prepareValueForCopy for DateFieldType returns the expected output',
+    (value) => {
+      const result = new DateFieldType().prepareValueForCopy(
+        value.field,
+        value.fieldValue
+      )
+      expect(result).toBe(value.expectedValue)
+    }
+  )
+
+  test.each(datePrepareValueForPaste)(
+    'Verify that prepareValueForPaste for DateFieldType returns the expected output',
+    (value) => {
+      const clipboardData = {
+        getData() {
+          return value.fieldValue
+        },
+      }
+
+      const result = new DateFieldType().prepareValueForPaste(
+        value.field,
+        clipboardData
+      )
+      expect(result).toBe(value.expectedValue)
+    }
+  )
 })