fix datetime display issues (again) (#324)

frontend/components/Form/DatePicker.vue

@@ -35,18 +35,38 @@
   const selected = computed({
     get() {
       // return modelValue as string as YYYY-MM-DD or null
-      if (validDate(props.modelValue)) {
-        if (typeof props.modelValue === "string") {
-          return props.modelValue;
+
+      // String
+      if (typeof props.modelValue === "string") {
+        // Empty string
+        if (props.modelValue === "") {
+          return null;
         }
 
-        return props.modelValue ? props.modelValue.toISOString().split("T")[0] : null;
+        // Invalid Date string
+        if (props.modelValue === "Invalid Date") {
+          return null;
+        }
+
+        // Valid Date string
+        return props.modelValue;
+      }
+
+      // Date
+      if (props.modelValue instanceof Date) {
+        if (isNaN(props.modelValue.getTime())) {
+          return null;
+        }
+
+        // Valid Date
+        return props.modelValue.toISOString().split("T")[0];
       }
 
       return null;
     },
     set(value: string | null) {
       // emit update:modelValue with a Date object or null
+      console.log("SET", value);
       emit("update:modelValue", value ? new Date(value) : null);
     },
   });

frontend/components/global/DateTime.vue

@@ -3,16 +3,18 @@
 </template>
 
 <script setup lang="ts">
-  type DateTimeFormat = "relative" | "long" | "short" | "human";
+  import { DateTimeFormat, DateTimeType } from "~~/composables/use-formatters";
 
   type Props = {
     date?: Date | string;
     format?: DateTimeFormat;
+    datetimeType?: DateTimeType;
   };
 
   const props = withDefaults(defineProps<Props>(), {
     date: undefined,
     format: "relative",
+    datetimeType: "date",
   });
 
   const value = computed(() => {
@@ -20,6 +22,6 @@
       return "";
     }
 
-    return fmtDate(props.date, props.format);
+    return fmtDate(props.date, props.format, props.datetimeType);
   });
 </script>

frontend/components/global/DetailsSection/DetailsSection.vue

@@ -7,7 +7,11 @@
         </dt>
         <dd class="text-sm text-base-content text-start sm:col-span-2">
           <slot :name="detail.slot || detail.name" v-bind="{ detail }">
-            <DateTime v-if="detail.type == 'date'" :date="detail.text" />
+            <DateTime
+              v-if="detail.type == 'date'"
+              :date="detail.text"
+              :datetime-type="detail.date ? 'date' : 'datetime'"
+            />
             <Currency v-else-if="detail.type == 'currency'" :amount="detail.text" />
             <template v-else-if="detail.type === 'link'">
               <div class="tooltip tooltip-primary tooltip-right" :data-tip="detail.href">

frontend/components/global/DetailsSection/types.ts

@@ -8,6 +8,7 @@ type BaseDetail = {
 type DateDetail = BaseDetail & {
   type: "date";
   text: Date | string;
+  date: boolean;
 };
 
 type CurrencyDetail = BaseDetail & {