New Date input (#368)

Co-authored-by: Julien Nahum <julien@nahum.net>

client/components/open/tables/components/OpenDate.vue

@@ -1,17 +1,23 @@
 <template>
   <span v-if="valueIsObject">
-    <template v-if="value[0]">{{ value[0] }}</template>
-    <template v-if="value[1]"><b>to</b> {{ value[1] }}</template>
+    <template v-if="value[0]">{{ formattedDate(value[0]) }}</template>
+    <template v-if="value[1]"><b class="mx-2">to</b>{{ formattedDate(value[1]) }}</template>
   </span>
   <span v-else>
-    {{ value }}
+    {{ formattedDate(value) }}
   </span>
 </template>
 
 <script>
+import { format } from 'date-fns'
+import { default as _has } from 'lodash/has'
+
 export default {
   components: {},
   props: {
+    property: {
+      required: true
+    },
     value: {
       required: true
     }
@@ -30,6 +36,22 @@ export default {
   mounted () {
   },
   methods: {
+    formattedDate(val) {
+      if (!val) return ''
+      const dateFormat = _has(this.property, 'date_format') ? this.property.date_format : 'dd/MM/yyyy'
+      if (this.property?.with_time) {
+        try {
+          return format(new Date(val), dateFormat + ' HH:mm')
+        } catch (e) {
+          return ''
+        }
+      }
+      try {
+        return format(new Date(val), dateFormat)
+      } catch (e) {
+        return ''
+      }
+    }
   }
 }
 </script>