WIP В процессе создания BaseInputDate

src/components/TheHeader.vue

@@ -10,6 +10,7 @@
     .flex.ml-auto
       q-btn.mr-9(
         color="primary",
+        outline,
         dense,
         padding="4px 22px",
         @click="openForm"

src/components/base/BaseInputDate.vue

@@ -0,0 +1,38 @@
+<template lang="pug">
+  base-input.w-full(v-bind="$props", v-model="value")
+    .flex.items-center
+      q-icon(name="app:calendar" class="cursor-pointer" size="18px")
+        q-popup-proxy(cover transition-show="scale" transition-hide="scale")
+          q-date(v-model="value")
+            div(class="row items-center justify-end")
+              q-btn(v-close-popup label="Close" color="primary" flat)
+</template>
+
+<script>
+import BaseInput from "@/components/base/BaseInput.vue";
+import * as moment from "moment/moment";
+
+export default {
+  name: "BaseInputDate",
+  components: { BaseInput },
+  props: {
+    modelValue: {
+      type: Date,
+      default: () => new Date(),
+    },
+  },
+  emits: ["update:modelValue"],
+  computed: {
+    value: {
+      get() {
+        return moment(this.modelValue).format("D MMMM YYYY");
+      },
+      set(value) {
+        this.$emit("update:modelValue", value ? new Date(value) : null);
+      },
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped></style>