58 lines
1.7 KiB
Vue
58 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
// helpers
|
|
import { format, parseISO } from 'date-fns'
|
|
import { id as localeID } from 'date-fns/locale'
|
|
// components
|
|
import { Button } from '~/components/pub/ui/button'
|
|
import Calendar from '~/components/pub/ui/calendar/Calendar.vue'
|
|
import { Popover, PopoverContent, PopoverTrigger } from '~/components/pub/ui/popover'
|
|
|
|
const props = defineProps<{
|
|
placeholder?: string
|
|
modelValue?: Date | string | undefined
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: Date | string | undefined]
|
|
}>()
|
|
|
|
const date = ref<Date | any>(undefined)
|
|
|
|
watch(date, (value) => {
|
|
const newValue = format(value, 'yyyy-MM-dd', { locale: localeID })
|
|
emit('update:modelValue', newValue)
|
|
})
|
|
|
|
onMounted(() => {
|
|
if (props.modelValue) {
|
|
const value = props.modelValue
|
|
if (value instanceof Date) {
|
|
date.value = value
|
|
} else if (typeof value === 'string' && value) {
|
|
date.value = parseISO(value)
|
|
} else {
|
|
date.value = 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', { locale: localeID }) }}</p>
|
|
<p v-else class="text-sm text-black text-opacity-50">{{ props.placeholder || 'Tanggal' }}</p>
|
|
<Icon name="i-lucide-calendar" class="h-5 w-5" />
|
|
</div>
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent class="w-auto p-0">
|
|
<Calendar v-model="date" mode="single" locale="id" />
|
|
</PopoverContent>
|
|
</Popover>
|
|
</div>
|
|
</template>
|