feat(sep): modify form entry with calendar select

2025-09-10 14:37:54 +07:00
parent 32544e9b0b
commit 582bd67cbe
4 changed files with 68 additions and 12 deletions
@@ -0,0 +1,32 @@
+<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>