mirror of
https://github.com/nuxt/ui.git
synced 2026-09-14 19:51:10 +08:00
Mike Newbon
29 lines
709 B
Vue
29 lines
709 B
Vue
<script setup lang="ts">
|
|
import { CalendarDate } from '@internationalized/date'
|
|
|
|
const inputDate = useTemplateRef('inputDate')
|
|
|
|
const modelValue = shallowRef(new CalendarDate(2022, 1, 10))
|
|
</script>
|
|
|
|
<template>
|
|
<UInputDate ref="inputDate" v-model="modelValue">
|
|
<template #trailing>
|
|
<UPopover :reference="inputDate?.inputsRef[3]?.$el">
|
|
<UButton
|
|
color="neutral"
|
|
variant="link"
|
|
size="sm"
|
|
icon="i-lucide-calendar"
|
|
aria-label="Select a date"
|
|
class="px-0"
|
|
/>
|
|
|
|
<template #content>
|
|
<UCalendar v-model="modelValue" class="p-2" />
|
|
</template>
|
|
</UPopover>
|
|
</template>
|
|
</UInputDate>
|
|
</template>
|