fixing typescript errors. using window.setInterval to be specific with the function, using dateInput with display-format so user can technically type in the date if they wish to do so. Adding in placeholder so users know what format to input the date in

Author: SoLetsDev

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/Snackbar.vue

@@ -114,7 +114,7 @@ export default {
       }
     },
     timeoutCounter() {
-      this.polling = setInterval(() => {
+      this.polling = window.setInterval(() => {
         if (this.pause) {
           this.timeout += 1;
         }

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceDateInput.vue

@@ -2,20 +2,19 @@
   <label>
     {{ label }}
     <v-date-input
-      :model-value="value"
-      :value="formattedDate"
+      :model-value="modelValue"
       :aria-label="label"
       prepend-icon=""
       label=""
       v-bind="$attrs"
-      @update:model-value="(value: string) => updateModelValue(value)"
+      @update:model-value="(value: any) => updateModelValue(value)"
+      :display-format="format"
       :class="['pt-2', $attrs.class]"
     />
   </label>
 </template>
 
 <script lang="ts">
-import { formatDate } from "@/utils/format";
 import { DateTime } from "luxon";
 import { defineComponent, type PropType } from "vue";
 
@@ -30,34 +29,23 @@ export default defineComponent({
       type: String,
       default: "Select Date",
     },
+    format: {
+      type: String,
+      default: "fullDate",
+      required: false,
+    },
   },
   emits: ["update:model-value"],
   methods: {
     /**
      * Update the model value with string formatted as "yyyy-MM-dd"
      * @param value - JS date value as a string
      */
-    updateModelValue(value: string) {
+    updateModelValue(value: Date) {
       const luxonDate = DateTime.fromJSDate(new Date(value));
       const formattedDate = luxonDate.toFormat("yyyy-MM-dd");
       this.$emit("update:model-value", formattedDate);
     },
   },
-  computed: {
-    /**
-     * Format the date as "LLLL d, yyyy" to display in the input field
-     */
-    formattedDate() {
-      return formatDate(this.modelValue ?? "", "LLLL d, yyyy");
-    },
-    value() {
-      if (!this.modelValue) {
-        return; // Return current date as default Date object
-      }
-      // Convert modelValue to a Date object for date picker consistency
-      const [year, month, day] = this.modelValue.split("-").map(Number);
-      return new Date(year, month - 1, day); // No UTC to keep in local time
-    },
-  },
 });
 </script>

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceEducation.vue

@@ -141,7 +141,6 @@
               ]"
               label="Start date of program or course"
               maxlength="50"
-              placeholder=""
               :max="today"
             ></EceDateInput>
           </v-col>
@@ -162,7 +161,6 @@
               ]"
               label="End date of program or course"
               maxlength="50"
-              placeholder=""
               :max="today"
             ></EceDateInput>
           </v-col>

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/NewUser.vue

@@ -58,7 +58,6 @@
                 :rules="[Rules.required(), Rules.futureDateNotAllowedRule()]"
                 :max="today"
                 label="Date of birth"
-                placeholder=""
               ></EceDateInput>
             </v-col>
           </v-row>