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