69 lines
1.9 KiB
Vue
69 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import type { DateRange } from 'radix-vue'
|
|
import { Button } from '@/lib/registry/new-york/ui/button'
|
|
import {
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
} from '@/lib/registry/new-york/ui/popover'
|
|
|
|
import { RangeCalendar } from '@/lib/registry/new-york/ui/range-calendar'
|
|
import { cn } from '@/lib/utils'
|
|
import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
|
|
import { Calendar as CalendarIcon } from 'lucide-vue-next'
|
|
import { type Ref, ref } from 'vue'
|
|
|
|
const df = new DateFormatter('en-US', {
|
|
dateStyle: 'medium',
|
|
})
|
|
|
|
const calendarDate = new CalendarDate(2023, 0, 20)
|
|
|
|
const value = ref({
|
|
start: calendarDate,
|
|
end: calendarDate.add({ days: 20 }),
|
|
}) as Ref<DateRange>
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="cn('grid gap-2', $attrs.class ?? '')">
|
|
<Popover>
|
|
<PopoverTrigger as-child>
|
|
<Button
|
|
id="date"
|
|
:variant="'outline'"
|
|
:class="cn(
|
|
'w-[300px] justify-start text-left font-normal',
|
|
!value && 'text-muted-foreground',
|
|
)"
|
|
>
|
|
<CalendarIcon class="mr-2 h-4 w-4" />
|
|
|
|
<template v-if="value.start">
|
|
<template v-if="value.end">
|
|
{{ df.format(value.start.toDate(getLocalTimeZone())) }} - {{ df.format(value.end.toDate(getLocalTimeZone())) }}
|
|
</template>
|
|
|
|
<template v-else>
|
|
{{ df.format(value.start.toDate(getLocalTimeZone())) }}
|
|
</template>
|
|
</template>
|
|
<template v-else>
|
|
Pick a date
|
|
</template>
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent class="w-auto p-0" align="end">
|
|
<RangeCalendar
|
|
v-model="value"
|
|
weekday-format="short"
|
|
:number-of-months="2"
|
|
initial-focus
|
|
:placeholder="value.start"
|
|
@update:start-value="(startDate) => value.start = startDate"
|
|
/>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</div>
|
|
</template>
|