WIP - fix date picker

frontend/components/ui/date-picker/DatePicker.vue

@@ -5,6 +5,7 @@ import { Button } from '@/components/ui/button'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import { CalendarIcon } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
+import { CalendarDate, type DateValue } from '@internationalized/date'
 
 interface Props {
   modelValue?: Date | string | null
@@ -22,18 +23,27 @@ const emit = defineEmits<{
   'update:modelValue': [value: Date | null]
 }>()
 
-const value = computed({
+const placeholder = ref<DateValue>(new CalendarDate(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()))
+
+const value = computed<DateValue | undefined>({
   get: () => {
     if (!props.modelValue) return undefined
-    return props.modelValue instanceof Date ? props.modelValue : new Date(props.modelValue)
+    const date = props.modelValue instanceof Date ? props.modelValue : new Date(props.modelValue)
+    return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate())
   },
-  set: (date) => {
-    emit('update:modelValue', date || null)
+  set: (dateValue) => {
+    if (!dateValue) {
+      emit('update:modelValue', null)
+      return
+    }
+    const jsDate = new Date(dateValue.year, dateValue.month - 1, dateValue.day)
+    emit('update:modelValue', jsDate)
   },
 })
 
-const formatDate = (date: Date | undefined) => {
-  if (!date) return props.placeholder
+const formatDate = (dateValue: DateValue | undefined) => {
+  if (!dateValue) return props.placeholder
+  const date = new Date(dateValue.year, dateValue.month - 1, dateValue.day)
   return date.toLocaleDateString('en-US', {
     year: 'numeric',
     month: 'long',
@@ -58,7 +68,7 @@ const formatDate = (date: Date | undefined) => {
       </Button>
     </PopoverTrigger>
     <PopoverContent class="w-auto p-0">
-      <Calendar v-model="value" initial-focus />
+      <Calendar v-model="value" :placeholder="placeholder" />
     </PopoverContent>
   </Popover>
 </template>