use native date picker

frontend/components/Form/DatePicker.vue

@@ -1,38 +1,15 @@
 <template>
-  <div ref="label" class="dropdown dropdown-end dropdown-top w-full">
+  <div v-if="!inline" class="form-control w-full">
-    <FormTextField v-model="dateText" tabindex="0" label="Date" :inline="inline" readonly />
+    <label class="label">
-    <div tabindex="0" class="card compact dropdown-content shadow bg-base-100 rounded-box w-64" @blur="resetTime">
+      <span class="label-text"> Date </span>
-      <div class="card-body">
+    </label>
-        <div class="grid grid-cols-7 gap-2">
+    <input ref="input" v-model="selected" type="date" class="input input-bordered w-full" pattern="yyyy-MM-dd" />
-          <div v-for="d in daysIdx" :key="d">
+  </div>
-            <p class="text-center">
+  <div v-else class="sm:grid sm:grid-cols-4 sm:items-start sm:gap-4">
-              {{ d }}
+    <label class="label">
-            </p>
+      <span class="label-text"> Date </span>
-          </div>
+    </label>
-          <template v-for="day in days">
+    <input v-model="selected" type="date" class="input input-bordered col-span-3 w-full mt-2" pattern="yyyy-MM-dd" />
-            <button
-              v-if="day.number != ''"
-              :key="day.number"
-              type="button"
-              class="text-center btn-xs btn btn-outline"
-              @click="select($event, day.date)"
-            >
-              {{ day.number }}
-            </button>
-            <div v-else :key="`${day.number}-empty`"></div>
-          </template>
-        </div>
-        <div class="flex justify-between mt-1 items-center">
-          <button type="button" class="btn btn-xs" @click="prevMonth">
-            <Icon class="h-5 w-5" name="mdi-arrow-left"></Icon>
-          </button>
-          <p class="text-center">{{ month }} {{ year }}</p>
-          <button type="button" class="btn btn-xs" @click="nextMonth">
-            <Icon class="h-5 w-5" name="mdi-arrow-right"></Icon>
-          </button>
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 
@@ -51,88 +28,20 @@
     },
   });
 
-  const selected = useVModel(props, "modelValue", emit);
+  const selected = computed({
-  const dateText = computed(() => {
+    get() {
-    if (!validDate(selected.value)) {
+      // return modelValue as string as YYYY-MM-DD or null
-      return "";
+      return props.modelValue ? props.modelValue.toISOString().split("T")[0] : null;
-    }
+    },
-
+    set(value: string | null) {
-    if (selected.value) {
+      // emit update:modelValue with a Date object or null
-      return selected.value.toLocaleDateString();
+      emit("update:modelValue", value ? new Date(value) : null);
-    }
+    },
-
-    return "";
-  });
-
-  const time = ref(new Date());
-  function resetTime() {
-    time.value = new Date();
-  }
-
-  const label = ref<HTMLElement>();
-  onClickOutside(label, () => {
-    resetTime();
-  });
-
-  const month = computed(() => {
-    return time.value.toLocaleString("default", { month: "long" });
-  });
-
-  const year = computed(() => {
-    return time.value.getFullYear();
-  });
-
-  function nextMonth() {
-    time.value.setMonth(time.value.getMonth() + 1);
-    time.value = new Date(time.value);
-  }
-
-  function prevMonth() {
-    time.value.setMonth(time.value.getMonth() - 1);
-    time.value = new Date(time.value);
-  }
-
-  const daysIdx = computed(() => {
-    return ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
-  });
-
-  function select(e: MouseEvent, day: Date) {
-    selected.value = day;
-    // @ts-ignore - this is a vue3 bug
-    e.target.blur();
-    resetTime();
-  }
-
-  type DayEntry = {
-    number: number | string;
-    date: Date;
-  };
-
-  function daysInMonth(month: number, year: number) {
-    return new Date(year, month, 0).getDate();
-  }
-
-  const days = computed<DayEntry[]>(() => {
-    const days = [];
-
-    const totalDays = daysInMonth(time.value.getMonth() + 1, time.value.getFullYear());
-
-    const firstDay = new Date(time.value.getFullYear(), time.value.getMonth(), 1).getDay();
-
-    for (let i = 0; i < firstDay; i++) {
-      days.push({
-        number: "",
-        date: new Date(),
-      });
-    }
-
-    for (let i = 1; i <= totalDays; i++) {
-      days.push({
-        number: i,
-        date: new Date(time.value.getFullYear(), time.value.getMonth(), i),
-      });
-    }
-
-    return days;
   });
 </script>
+
+<style class="scoped">
+  ::-webkit-calendar-picker-indicator {
+    filter: invert(1);
+  }
+</style>