implemented constraints on datepickers

ui/src/components/loa/loaForm.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Check, Search } from "lucide-vue-next"
 import { ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList } from "@/components/ui/combobox"
-import { onMounted, ref, watch } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 import { Member, getMembers } from "@/api/member";
 import Button from "@/components/ui/button/Button.vue";
 import {
@@ -63,6 +63,7 @@ const df = new Intl.DateTimeFormat('en-US', {
 import { loaSchema } from '@shared/schemas/loaSchema'
 import { toTypedSchema } from "@vee-validate/zod";
 import Calendar from "../ui/calendar/Calendar.vue";
+import { el } from "@fullcalendar/core/internal-common";
 
 const { handleSubmit, values, resetForm } = useForm({
     validationSchema: toTypedSchema(loaSchema),
@@ -85,12 +86,24 @@ onMounted(async () => {
     console.log(currentMember.value);
     resetForm({ values: { member_id: currentMember.value?.member_id } });
 });
-import type { LayoutTypes } from '@/components/ui/calendar'
-
 const defaultPlaceholder = today(getLocalTimeZone())
-const date = ref(today(getLocalTimeZone())) as Ref<DateValue>
-const layout = ref<LayoutTypes>('month-and-year')
 
+const minEndDate = computed(() => {
+    if (values.start_date) {
+        return new CalendarDate(values.start_date.getFullYear(), values.start_date.getMonth() + 1, values.start_date.getDate())
+    } else {
+        return null;
+    }
+})
+
+const maxEndDate = computed(() => {
+    if (values.type && values.start_date) {
+        let endDateObj = new Date(values.start_date.getTime() + values.type.max_length_days * 24 * 60 * 60 * 1000);
+        return new CalendarDate(endDateObj.getFullYear(), endDateObj.getMonth() + 1, endDateObj.getDate())
+    } else {
+        return null;
+    }
+})
 </script>
 
 <template>
@@ -181,9 +194,10 @@ const layout = ref<LayoutTypes>('month-and-year')
                                     </PopoverTrigger>
                                     <PopoverContent class="w-auto p-0">
                                         <Calendar
-                                            :model-value="field.value ? fromDate(field.value, getLocalTimeZone()) : null"
+                                            :model-value="field.value
+                                                ? new CalendarDate(field.value.getFullYear(), field.value.getMonth() + 1, field.value.getDate()) : null"
                                             @update:model-value="(val: CalendarDate) => field.onChange(val.toDate(getLocalTimeZone()))"
-                                            layout="month-and-year" />
+                                            layout="month-and-year" :min-value="today(getLocalTimeZone())" />
                                     </PopoverContent>
                                 </Popover>
                                 <div class="h-4">
@@ -210,7 +224,8 @@ const layout = ref<LayoutTypes>('month-and-year')
                                         <Calendar
                                             :model-value="field.value ? new CalendarDate(field.value.getFullYear(), field.value.getMonth() + 1, field.value.getDate()) : null"
                                             @update:model-value="(val: CalendarDate) => field.onChange(val.toDate(getLocalTimeZone()))"
-                                            :default-placeholder="defaultPlaceholder" layout="month-and-year">
+                                            :default-placeholder="defaultPlaceholder" :min-value="minEndDate"
+                                            :max-value="maxEndDate" layout="month-and-year">
                                         </Calendar>
                                     </PopoverContent>
                                 </Popover>