Fix: blank date picker

Closes #41

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## Next
+- Fix blank date picker when no date is selected and current date is outside min/max range
+
 ## 2.4.1 - 2023 Apr 29
 - Fix browsing not working with `browseWithoutSelecting` when a date is selected
 

src/lib/DatePicker.svelte

@@ -33,12 +33,6 @@
   /** Default Date to use */
   const defaultDate = new Date()
 
-  /** The date shown in the popup when none is selected */
-  let browseDate = value ? cloneDate(value) : cloneDate(defaultDate)
-  $: if (browseDate.getTime() !== value?.getTime() && !browseWithoutSelecting) {
-    browseDate = value ? cloneDate(value) : browseDate
-  }
-
   /** The earliest year the user can select */
   export let min = new Date(defaultDate.getFullYear() - 20, 0, 1)
   /** The latest year the user can select */
@@ -58,6 +52,12 @@
     }
   }
 
+  /** The date shown in the popup when none is selected */
+  let browseDate = value ? cloneDate(value) : cloneDate(clamp(defaultDate, min, max))
+  $: if (browseDate.getTime() !== value?.getTime() && !browseWithoutSelecting) {
+    browseDate = value ? cloneDate(value) : browseDate
+  }
+
   let years = getYears(min, max)
   $: years = getYears(min, max)
   function getYears(min: Date, max: Date) {

src/routes/bug/+page.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import DatePicker from '$lib/DatePicker.svelte'
+
+  let date: Date | null = null
+  // let date_string: string | undefined
+  let is_date_valid: boolean
+  let max_date = new Date()
+
+  // Atleast 14 years old
+  max_date.setDate(max_date.getDate() - 5110)
+
+  $: if (date && is_date_valid) {
+    date.setHours(12, 0, 0, 0)
+    date.toISOString()
+    // date_string = date.toISOString().slice(0, 10)
+  }
+</script>
+
+<!-- <input bind:value={date_string} type="date" class="hidden" id="id_birth_date" name="birth_date" /> -->
+<!-- <DateInput
+  bind:value={date}
+  bind:valid={is_date_valid}
+  max={max_date}
+  format="yyyy-MM-dd"
+  placeholder="Select a date"
+/> -->
+<DatePicker bind:value={date} max={max_date} />