created date input

ui/src/components/application/ApplicationForm.vue

@@ -15,9 +15,15 @@ import { toTypedSchema } from '@vee-validate/zod';
 import { Form } from 'vee-validate';
 import { onMounted, ref } from 'vue';
 import * as z from 'zod';
+import Popover from '../ui/popover/Popover.vue';
+import PopoverTrigger from '../ui/popover/PopoverTrigger.vue';
+import { CalculatorIcon } from 'lucide-vue-next';
+import PopoverContent from '../ui/popover/PopoverContent.vue';
+import Calendar from '../ui/calendar/Calendar.vue';
+import DateInput from '../form/DateInput.vue';
 
 const formSchema = toTypedSchema(z.object({
-  age: z.coerce.number({ invalid_type_error: "Must be a number" }).min(0, "Cannot be less than 0"),
+  dob: z.string().refine(v => v, { message: "A date of birth is required." }),
   name: z.string(),
   playtime: z.coerce.number({ invalid_type_error: "Must be a number", }).min(0, "Cannot be less than 0"),
   hobbies: z.string(),
@@ -62,6 +68,8 @@ onMounted(() => {
     initialValues.value = { ...fallbackInitials }
   }
 })
+
+
 </script>
 
 <template>
@@ -70,9 +78,10 @@ onMounted(() => {
     <!-- Age -->
     <FormField name="age" v-slot="{ value, handleChange }">
       <FormItem>
-        <FormLabel>What is your age?</FormLabel>
+        <FormLabel>What is your date of birth?</FormLabel>
         <FormControl>
-          <Input :model-value="value" @update:model-value="handleChange" :disabled="readOnly" />
+          <DateInput :model-value="(value as string) ?? ''" :disabled="readOnly"
+            @update:model-value="handleChange" />
         </FormControl>
         <FormMessage />
       </FormItem>