fix wrong datetime display + improved datepicker

frontend/components/Form/DatePicker.vue

@@ -17,6 +17,7 @@
   // @ts-ignore
   import VueDatePicker from "@vuepic/vue-datepicker";
   import "@vuepic/vue-datepicker/dist/main.css";
+  import * as datelib from "~/lib/datelib/datelib";
   const emit = defineEmits(["update:modelValue", "update:text"]);
 
   const props = defineProps({
@@ -37,10 +38,8 @@
 
   const isDark = useIsDark();
 
-  const selected = computed({
+  const selected = computed<Date | null>({
     get() {
-      // return modelValue as string as YYYY-MM-DD or null
-
       // String
       if (typeof props.modelValue === "string") {
         // Empty string
@@ -53,8 +52,7 @@
           return null;
         }
 
-        // Valid Date string
-        return props.modelValue;
+        return datelib.parse(props.modelValue);
       }
 
       // Date
@@ -73,9 +71,9 @@
 
       return null;
     },
-    set(value: string | null) {
+    set(value: Date | null) {
       // emit update:modelValue with a Date object or null
-      console.log("SET", value);
+      console.debug("DatePicker: SET", value);
       emit("update:modelValue", value ? new Date(value) : null);
     },
   });

frontend/composables/use-formatters.ts

@@ -37,7 +37,7 @@ function ordinalIndicator(num: number) {
   }
 }
 
-export function fmtDate(value: string | Date, fmt: DateTimeFormat = "human", fmtType: DateTimeType): string {
+export function fmtDate(value: string | Date, fmt: DateTimeFormat = "human"): string {
   const months = [
     "January",
     "February",
@@ -62,11 +62,6 @@ export function fmtDate(value: string | Date, fmt: DateTimeFormat = "human", fmt
     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/lib/datelib/datelib.test.ts

@@ -0,0 +1,43 @@
+import { describe, test, expect } from "vitest";
+import { format, zeroTime, factorRange, parse } from "./datelib";
+
+describe("format", () => {
+  test("should format a date as a string", () => {
+    const date = new Date(2020, 1, 1);
+    expect(format(date)).toBe("2020-02-01");
+  });
+
+  test("should return the string if a string is passed in", () => {
+    expect(format("2020-02-01")).toBe("2020-02-01");
+  });
+});
+
+describe("zeroTime", () => {
+  test("should zero out the time", () => {
+    const date = new Date(2020, 1, 1, 12, 30, 30);
+    const zeroed = zeroTime(date);
+    expect(zeroed.getHours()).toBe(0);
+    expect(zeroed.getMinutes()).toBe(0);
+    expect(zeroed.getSeconds()).toBe(0);
+  });
+});
+
+describe("factorRange", () => {
+  test("should return a range of dates", () => {
+    const [start, end] = factorRange(10);
+    // Start should be today
+    expect(start).toBeInstanceOf(Date);
+    expect(start.getFullYear()).toBe(new Date().getFullYear());
+
+    // End should be 10 days from now
+    expect(end).toBeInstanceOf(Date);
+    expect(end.getFullYear()).toBe(new Date().getFullYear());
+  });
+});
+
+describe("parse", () => {
+  test("should parse a date string", () => {
+    const date = parse("2020-02-01");
+    expect(date).toBeInstanceOf(Date);
+  });
+});

frontend/lib/datelib/datelib.ts

@@ -0,0 +1,34 @@
+import { addDays } from "date-fns";
+
+/*
+ * Formats a date as a string
+ * */
+export function format(date: Date | string): string {
+  if (typeof date === "string") {
+    return date;
+  }
+  return date.toISOString().split("T")[0];
+}
+
+export function zeroTime(date: Date): Date {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+
+export function factorRange(offset: number = 7): [Date, Date] {
+  const date = zeroTime(new Date());
+
+  return [date, addDays(date, offset)];
+}
+
+export function factory(offset = 0): Date {
+  if (offset) {
+    return addDays(zeroTime(new Date()), offset);
+  }
+
+  return zeroTime(new Date());
+}
+
+export function parse(yyyyMMdd: string): Date {
+  const parts = yyyyMMdd.split("-");
+  return new Date(parseInt(parts[0]), parseInt(parts[1]) - 1, parseInt(parts[2]));
+}