WIP Доделала модалку

src/components/base/BaseInputDate.vue

@@ -12,8 +12,9 @@
       :readonly="readonly",
       :disable="disabled",
       :filled="filled",
+      mask="##.##.####"
       :bg-color="filled || standout ? '' : 'white'",
-      :rules="rule",
+      :rules="[checkInput]",
       :lazy-rules="lazyRule",
       :item-aligned="itemAligned",
       :no-error-icon="noErrorIcon",
@@ -23,7 +24,8 @@
       :standout="standout"
       :accept="accept",
       :debounce="debounce",
-      hide-bottom-space
+      hide-bottom-space,
+      lazy-rules
     )
       template(v-slot:append)
         q-icon(
@@ -32,7 +34,11 @@
           size="16px"
         )
           q-popup-proxy(cover, transition-show="scale", transition-hide="scale")
-            q-date(v-model="value", mask="YYYY-MM-DD")
+            q-date(
+              v-model="value",
+              mask="DD.MM.YYYY",
+              minimal
+            )
               .flex.items-center.justify-end
                 q-btn(
                   v-close-popup,
@@ -45,7 +51,7 @@
 
 <script>
 import BaseInputContainer from "@/components/base/BaseInputContainer.vue";
-
+import * as moment from "moment/moment";
 export default {
   name: "BaseInputDate",
   components: { BaseInputContainer },
@@ -92,7 +98,6 @@ export default {
     maxLength: Number,
     textColor: String,
     borderColor: String,
-    rule: Array,
     lazyRule: [Boolean, String],
     noErrorIcon: Boolean,
     itemAligned: Boolean,
@@ -108,20 +113,35 @@ export default {
   computed: {
     value: {
       get() {
-        return this.modelValue
-          ? this.modelValue
-              ?.toISOString()
-              .split("T")[0]
-              .split("-")
-              .reverse()
-              .join(".")
-          : null;
+        if (
+          moment(this.modelValue).isValid() &&
+          typeof this.modelValue === "object"
+        )
+          return moment(this.modelValue).format("DD.MM.YYYY");
+        if (moment(this.convertFormat(this.modelValue)).isValid())
+          return this.modelValue;
+        return null;
       },
       set(value) {
-        this.$emit("update:modelValue", value ? new Date(value) : null);
+        this.$emit(
+          "update:modelValue",
+          moment(this.convertFormat(value)).isValid()
+            ? new Date(moment(this.convertFormat(value)))
+            : null
+        );
       },
     },
   },
+  methods: {
+    convertFormat(date) {
+      return date && date?.length === 10
+        ? date.split(".").reverse().join("-")
+        : null;
+    },
+    checkInput(val) {
+      return moment(this.convertFormat(val)).isValid();
+    },
+  },
 };
 </script>
 

src/components/base/BaseInputTime.vue

@@ -13,7 +13,7 @@
       :disable="disabled",
       :filled="filled",
       :bg-color="filled || standout ? '' : 'white'",
-      :rules="rule",
+      :rules="[checkTime]",
       :lazy-rules="lazyRule",
       :item-aligned="itemAligned",
       :no-error-icon="noErrorIcon",
@@ -112,10 +112,20 @@ export default {
         return this.modelValue ? this.modelValue : null;
       },
       set(value) {
-        this.$emit("update:modelValue", value);
+        this.$emit("update:modelValue", this.checkTime(value) ? value : null);
       },
     },
   },
+  methods: {
+    checkTime(val) {
+      return (
+        !!val &&
+        val.length === 5 &&
+        val?.slice(0, 2) < 24 &&
+        val?.slice(-2) < 60
+      );
+    },
+  },
 };
 </script>