17th-Ranger-Battalion-ORG/milsim-site-v4
8
1
Fork 0
Code Issues 30 Pull Requests Actions 3 Packages Projects Releases 4 Wiki Activity

implemented constraints on datepickers

Browse Source
This commit is contained in:
ajdj100
2025-12-11 11:25:09 -05:00
parent 2821bc62c4
commit 8cdbb99d6f
1 changed files with 23 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
ui/src/components/loa/loaForm.vue
View File

@@ -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>