Datepicker export selected date

src/lib/modules/AppontmentConfirmDialog.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+
+
+</script>
+
+<dialog class="max">
+    <h5>Fullscreen</h5>
+    <div>Some text here</div>
+    <nav class="right-align">
+      <button class="border">Cancel</button>
+      <button>Confirm</button>
+    </nav>
+  </dialog>
+  

src/lib/modules/DatePicker.svelte

@@ -4,6 +4,8 @@
     let currentDate: Date = new Date();
     let days: Array<{ day: number; isActive: boolean, isAvailable: boolean }> = [];
     let currentMonth: string = '';
+
+    export let selectedDate: Date;
   
     /**
      * Updates the calendar display by calculating the days of the current month.
@@ -51,6 +53,8 @@
      */
     const selectDay = (selectedDay: number): void => {
       days = days.map((d) => ({ ...d, isActive: d.day === selectedDay}));
+      const selectedDateValue = new Date(currentDate.getFullYear(), currentDate.getMonth(), selectedDay);
+      selectedDate = selectedDateValue;
     };
   </script>
   
@@ -117,12 +121,12 @@
 
         <!-- Render days -->
         {#each days as { day, isActive, isAvailable }, index}
-        <div
-            class="date-picker-cell {isAvailable && !isActive ? 'secondary': ''} {isActive ? 'active' : ''} {day === 0 ? 'empty' : ''}"
-            on:click={() => day && selectDay(day)}
-        >
-            {day || ''}
-        </div>
+            <div
+                class="date-picker-cell {isAvailable && !isActive ? 'secondary': ''} {isActive ? 'active' : ''} {day === 0 ? 'empty' : ''}"
+                on:click={() => day && selectDay(day)}
+            >
+                {day || ''}
+            </div>
         {/each}
     </div>
 </div>

src/routes/appointment/+page.svelte

@@ -8,11 +8,24 @@
     let location: string = "Somewhere";
     let description: string = "Description ...";
 
+    let selectedDate: Date = new Date();
+
     let appointmentDateTimes: AppointmentDateTimes[] = [
         {date: new Date(), startTime: "16:00"},
         {date: new Date(), startTime: "17:00"},
         {date: new Date(), startTime: "18:00"}
     ];
+
+    $: {
+        updateSelectedDate(selectedDate);
+    }
+
+    function updateSelectedDate(date: Date) {
+        // request appointment date times from backend
+        console.log("updating");
+        console.log(date);
+    }
+
 </script>
   
 <style>
@@ -25,9 +38,10 @@
     }
 </style>
 
-<DatePicker />
+<DatePicker bind:selectedDate />
 
 <div class="top-margin w-80 inline-margin"> 
     <AppointmentInfo bind:title bind:description bind:location />
     <DateTimes bind:availableTimes={appointmentDateTimes} />
 </div>
+

src/routes/creator/+page.svelte

@@ -14,34 +14,34 @@
 
 <fieldset>
     <div class="field border">
-        <input placeholder="Thema">
-        <label>Thema</label>
+        <input id="topic" placeholder="Thema">
+        <label for="topic">Thema</label>
     </div>
 
     <div class="field border">
-        <input placeholder="Ort">
-        <label>Ort</label>
+        <input id="location" placeholder="Ort">
+        <label for="location">Ort</label>
     </div>
 
     <div class="field label border">
-        <select>
+        <select id="week">
             <option>01 KW (01.01.2024 - 05.01.2024)</option>
             <option>02 KW (06.01.2024 - 12.01.2024)</option>
             <option>03 KW (13.01.2024 - 19.01.2024)</option>
             <option>04 KW (20.01.2024 - 26.01.2024)</option>
         </select>
-        <label>Woche</label>
+        <label for="week">Woche</label>
     </div>
 
     <div class="field border label">
-        <select>
+        <select id="duration">
             <option>15 Minuten</option>
             <option>20 Minuten</option>
             <option>30 Minuten</option>
             <option>45 Minuten</option>
             <option>1 Stunde</option>
         </select>
-        <label>Dauer</label>
+        <label for="duration">Dauer</label>
     </div>
 
     <fieldset>
@@ -113,16 +113,16 @@
     </button>  
     <div class="row bottom-margin">
         <div class="max field border">
-            <input>
-            <label>Eingabefeld</label>
+            <input id="custom-input">
+            <label for="custom-input">Eingabefeld</label>
         </div>
         <div class="max field border">
-            <select>
+            <select id="custom-type">
                 <option>Texteingabe</option>
                 <option>E-Mail</option>
                 <option>Telefonnummer</option>
             </select>
-            <label>Eingabeart</label>
+            <label for="custom-type">Eingabeart</label>
         </div>
         <button class="circle error medium m1">
             <i>delete</i>