Fix Export Date Select

frontend/pages/export/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, computed } from "vue"
 import dayjs from "dayjs"
+import { CalendarDate, parseDate } from "@internationalized/date"
 
 // --- Helper für Schnellauswahl ---
 
@@ -78,6 +79,40 @@ const createExportData = ref({
   mandantennr: null
 })
 
+const toCalendarDate = (value: Date | string | null) => {
+  if (!value) return null
+
+  const parsed = dayjs(value)
+  if (!parsed.isValid()) return null
+
+  try {
+    return parseDate(parsed.format("YYYY-MM-DD"))
+  } catch {
+    return null
+  }
+}
+
+const fromCalendarDate = (value: CalendarDate | null, boundary: "start" | "end") => {
+  if (!value) return null
+
+  const date = dayjs(value.toString())
+  return boundary === "start" ? date.startOf("day").toDate() : date.endOf("day").toDate()
+}
+
+const startDateValue = computed({
+  get: () => toCalendarDate(createExportData.value.start_date),
+  set: (value) => {
+    createExportData.value.start_date = fromCalendarDate(value, "start")
+  }
+})
+
+const endDateValue = computed({
+  get: () => toCalendarDate(createExportData.value.end_date),
+  set: (value) => {
+    createExportData.value.end_date = fromCalendarDate(value, "end")
+  }
+})
+
 const createExport = async () => {
   const res = await useNuxtApp().$api("/api/exports/datev",{
     method: "POST",
@@ -182,29 +217,45 @@ const createExport = async () => {
       </div>
       <div class="flex gap-4">
         <UFormField label="Start:" class="flex-1">
-          <UPopover :popper="{ placement: 'bottom-start' }">
+          <UPopover>
             <UButton
                 icon="i-heroicons-calendar-days-20-solid"
                 :label="createExportData.start_date ? dayjs(createExportData.start_date).format('DD.MM.YYYY') : 'Datum auswählen'"
                 variant="outline"
+                color="neutral"
                 class="w-full justify-start"
             />
-            <template #panel="{ close }">
-              <LazyDatePicker v-model="createExportData.start_date" @close="close" />
+            <template #content>
+              <div class="p-2">
+                <UCalendar v-model="startDateValue" />
+                <div class="flex justify-end border-t border-default pt-2">
+                  <UButton color="neutral" variant="ghost" size="sm" @click="createExportData.start_date = dayjs().startOf('day').toDate()">
+                    Heute
+                  </UButton>
+                </div>
+              </div>
             </template>
           </UPopover>
         </UFormField>
 
         <UFormField label="Ende:" class="flex-1">
-          <UPopover :popper="{ placement: 'bottom-start' }">
+          <UPopover>
             <UButton
                 icon="i-heroicons-calendar-days-20-solid"
                 :label="createExportData.end_date ? dayjs(createExportData.end_date).format('DD.MM.YYYY') : 'Datum auswählen'"
                 variant="outline"
+                color="neutral"
                 class="w-full justify-start"
             />
-            <template #panel="{ close }">
-              <LazyDatePicker v-model="createExportData.end_date" @close="close" />
+            <template #content>
+              <div class="p-2">
+                <UCalendar v-model="endDateValue" />
+                <div class="flex justify-end border-t border-default pt-2">
+                  <UButton color="neutral" variant="ghost" size="sm" @click="createExportData.end_date = dayjs().endOf('day').toDate()">
+                    Heute
+                  </UButton>
+                </div>
+              </div>
             </template>
           </UPopover>
         </UFormField>