updated datepicker dependency

This commit is contained in:
2025-12-11 11:00:02 -05:00
parent 92c0d657ea
commit dd472a5283
17 changed files with 275 additions and 31 deletions

View File

@@ -10,8 +10,9 @@ import {
fromDate,
getLocalTimeZone,
parseDate,
today,
} from "@internationalized/date"
import type { DateRange } from "reka-ui"
import type { DateRange, DateValue } from "reka-ui"
import type { Ref } from "vue"
import Popover from "@/components/ui/popover/Popover.vue";
import PopoverTrigger from "@/components/ui/popover/PopoverTrigger.vue";
@@ -84,6 +85,11 @@ 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')
</script>
@@ -175,7 +181,7 @@ onMounted(async () => {
</PopoverTrigger>
<PopoverContent class="w-auto p-0">
<Calendar
:model-value="field.value ? fromDate(field.value, getLocalTimeZone()) : null"
:model-value="field.value ? fromDate(field.value, getLocalTimeZone()) : null"
@update:model-value="(val: CalendarDate) => field.onChange(val.toDate(getLocalTimeZone()))"
layout="month-and-year" />
</PopoverContent>
@@ -204,7 +210,8 @@ onMounted(async () => {
<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()))"
layout="month-and-year" />
:default-placeholder="defaultPlaceholder" layout="month-and-year">
</Calendar>
</PopoverContent>
</Popover>
<div class="h-4">
@@ -233,5 +240,11 @@ onMounted(async () => {
</div>
</form>
</div>
<div class="flex flex-col gap-4 w-min">
<Calendar v-model="date" :default-placeholder="defaultPlaceholder" class="rounded-md border shadow-sm"
layout="month-and-year" disable-days-outside-current-view />
</div>
</div>
</template>