mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
22 lines
575 B
Vue
22 lines
575 B
Vue
<script setup lang="ts">
|
|
import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
|
|
|
|
const df = new DateFormatter('en-US', {
|
|
dateStyle: 'medium'
|
|
})
|
|
|
|
const modelValue = shallowRef(new CalendarDate(2022, 1, 10))
|
|
</script>
|
|
|
|
<template>
|
|
<UPopover>
|
|
<UButton color="neutral" variant="subtle" icon="i-lucide-calendar">
|
|
{{ modelValue ? df.format(modelValue.toDate(getLocalTimeZone())) : 'Select a date' }}
|
|
</UButton>
|
|
|
|
<template #content>
|
|
<UCalendar v-model="modelValue" class="p-2" />
|
|
</template>
|
|
</UPopover>
|
|
</template>
|