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 & {

frontend/composables/use-formatters.ts

@@ -21,6 +21,7 @@ export async function useFormatCurrency() {
 }
 
 export type DateTimeFormat = "relative" | "long" | "short" | "human";
+export type DateTimeType = "date" | "time" | "datetime";
 
 function ordinalIndicator(num: number) {
   if (num > 3 && num < 21) return "th";
@@ -36,7 +37,7 @@ function ordinalIndicator(num: number) {
   }
 }
 
-export function fmtDate(value: string | Date, fmt: DateTimeFormat = "human"): string {
+export function fmtDate(value: string | Date, fmt: DateTimeFormat = "human", fmtType: DateTimeType): string {
   const months = [
     "January",
     "February",
@@ -61,6 +62,11 @@ export function fmtDate(value: string | Date, fmt: DateTimeFormat = "human"): st
     return "";
   }
 
+  if (fmtType === "date") {
+    // Offset local time
+    dt.setHours(dt.getHours() + dt.getTimezoneOffset() / 60);
+  }
+
   switch (fmt) {
     case "relative":
       return useTimeAgo(dt).value + useDateFormat(dt, " (YYYY-MM-DD)").value;

frontend/pages/item/[id]/index.vue

@@ -246,6 +246,7 @@
         name: "Warranty Expires",
         text: item.value?.warrantyExpires || "",
         type: "date",
+        date: true,
       });
     }
 
@@ -280,6 +281,7 @@
         name: "Purchase Date",
         text: item.value?.purchaseTime || "",
         type: "date",
+        date: true,
       },
     ];
   });
@@ -306,6 +308,7 @@
         name: "Sold At",
         text: item.value?.soldTime || "",
         type: "date",
+        date: true,
       },
     ];
   });

frontend/pages/item/[id]/index/maintenance.vue

@@ -217,11 +217,11 @@
               <div class="flex flex-wrap gap-2">
                 <div v-if="validDate(e.completedDate)" class="badge p-3">
                   <Icon name="mdi-check" class="mr-2" />
-                  <DateTime :date="e.completedDate" format="human" />
+                  <DateTime :date="e.completedDate" format="human" datetime-type="date" />
                 </div>
                 <div v-else-if="validDate(e.scheduledDate)" class="badge p-3">
                   <Icon name="mdi-calendar" class="mr-2" />
-                  <DateTime :date="e.scheduledDate" format="human" />
+                  <DateTime :date="e.scheduledDate" format="human" datetime-type="date" />
                 </div>
                 <div class="tooltip tooltip-primary" data-tip="Cost">
                   <div class="badge badge-primary p-3">