riefive
33 lines
1.1 KiB
Vue
33 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
// helpers
|
|
import { format } from 'date-fns'
|
|
// icons
|
|
import { Calendar as CalendarIcon } from 'lucide-vue-next'
|
|
// components
|
|
import { Button } from '~/components/pub/ui/button'
|
|
import { Calendar } from '~/components/pub/ui/calendar'
|
|
import { Popover, PopoverContent, PopoverTrigger } from '~/components/pub/ui/popover'
|
|
|
|
const date = ref<Date | undefined>(undefined)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col space-y-2">
|
|
<Popover>
|
|
<PopoverTrigger as-child>
|
|
<Button variant="outline" class="bg-white border-gray-400 font-normal text-right h-[40px] w-full">
|
|
<div class="flex justify-between items-center w-full">
|
|
<p v-if="date">{{ format(date, 'PPP') }}</p>
|
|
<p v-else class="text-sm text-black text-opacity-80">Tanggal</p>
|
|
<CalendarIcon class="h-4 w-4 ml-2" />
|
|
</div>
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent class="w-auto p-0">
|
|
<Calendar mode="single" />
|
|
</PopoverContent>
|
|
</Popover>
|
|
<p v-if="date" class="text-sm text-black text-opacity-80">{{ format(date, 'PPP') }}</p>
|
|
</div>
|
|
</template>
|