updated datepicker dependency
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user