Some date magic 🪄

src/lib/Datepicker.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
    export let label: string = 'Select a date please';
-   export let date: Date;
+   export let date: string;
 </script>
 
 <div>

src/routes/calendar/components/DateSelector.svelte

@@ -2,18 +2,34 @@
    import Datepicker from '../../../lib/Datepicker.svelte';
 
    export let selecedDate: Date | undefined;
-   let pickedDate: Date;
+   let pickedDate: string;
 
    $: selecedDate = !!pickedDate ? new Date(pickedDate) : undefined;
+
+   const nextDay = () => {
+      if (!selecedDate) {
+         selecedDate = new Date();
+      }
+      selecedDate.addDays(1);
+      pickedDate = selecedDate.toShortISOString();
+   };
+
+   const previousDay = () => {
+      if (!selecedDate) {
+         selecedDate = new Date();
+      }
+      selecedDate.addDays(-1);
+      pickedDate = selecedDate.toShortISOString();
+   };
 </script>
 
 <div class="date-selector-container">
-   <button>Previous day</button>
+   <button on:click={previousDay}>Previous day</button>
    <Datepicker
       bind:date={pickedDate}
       label="On which day would you like to do laundry?"
    />
-   <button>Next day</button>
+   <button on:click={nextDay}>Next day</button>
 </div>
 
 <style>

src/utils/date.extenstions.ts

@@ -2,7 +2,8 @@ export {};
 
 declare global {
    interface Date {
-      addHours(days: number): Date;
+      addHours(hours: number): Date;
+      addDays(days: number): Date;
       isSameDay(otherDate: Date): boolean;
       toWeekdayString(): string;
       toTime(): string;
@@ -17,6 +18,11 @@ Date.prototype.addHours = function (hours: number) {
    return this;
 };
 
+Date.prototype.addDays = function (days: number) {
+   this.setDate(this.getDate() + days);
+   return this;
+};
+
 Date.prototype.isSameDay = function (otherDate: Date): boolean {
    var thisDateStr = this.toISOString().slice(0, 10);
    var otherDateStr = otherDate.toISOString().slice(0, 10);