fix labels, date field, enable

src/app/components/Form/DateField.vue

@@ -7,19 +7,38 @@
       <IconsInfo class="size-4" />
     </BaseTooltip>
   </div>
-  <BaseInput :id="id" v-model="data" :name="id" type="date" />
+  <BaseInput
+    :id="id"
+    :model-value="formattedDate"
+    :name="id"
+    type="date"
+    max="9999-12-31"
+    @update:model-value="updateDate"
+  />
 </template>
 
 <script lang="ts" setup>
 defineProps<{ id: string; label: string; description?: string }>();
 
-const data = defineModel<string | null>({
-  set(value) {
-    const temp = value?.trim() ?? null;
-    if (temp === '') {
-      return null;
-    }
-    return temp;
-  },
+const data = defineModel<string | null>();
+
+const date = ref(data);
+
+const formattedDate = computed(() => {
+  return date.value ? date.value.split('T')[0] : '';
 });
+
+const updateDate = (value: unknown) => {
+  if (typeof value !== 'string' && value !== null) {
+    return;
+  }
+
+  const temp = value?.trim() ?? null;
+
+  if (temp === '' || temp === null) {
+    date.value = null;
+  } else {
+    date.value = new Date(temp).toISOString();
+  }
+};
 </script>