Fix min/max clamping not showing in time fields

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## Next
+- Fix time field sometimes showing a value outside `min`/`max`
+
 ## 2.10.1 - 2023 Dec 6
 - Fix view not updating when value changes externally with `browseWithoutSelecting`
 

src/lib/DatePicker.svelte

@@ -31,6 +31,14 @@
 		}
 	}
 
+	function setTime(d: Date) {
+		browseDate = clamp(d, min, max)
+		if (value) {
+			setValue(browseDate)
+		}
+		return browseDate
+	}
+
 	const todayDate = new Date()
 
 	/** Default Date to use */
@@ -330,7 +338,7 @@
 			</div>
 		{/each}
 
-		<TimePicker {timePrecision} {browseDate} {browse} />
+		<TimePicker {timePrecision} bind:browseDate {setTime} />
 	</div>
 </div>
 

src/lib/TimePicker.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	export let browseDate: Date
 	export let timePrecision: 'minute' | 'second' | 'millisecond' | null
-	export let browse: (d: Date) => void
+	export let setTime: (d: Date) => Date
 
 	let fields: (HTMLSpanElement | undefined | null)[] = []
 
@@ -63,8 +63,30 @@
 			return { label, len: 2, max: 59 } as const
 		} else if (label === 'Seconds') {
 			return { label, len: 2, max: 59 } as const
-		} else {
+		} else if (label === 'Milliseconds') {
 			return { label, len: 3, max: 999 } as const
+		} else {
+			throw new Error('Invalid label ' + label)
+		}
+	}
+
+	$: setText(browseDate)
+	function setText(d: Date) {
+		const hours = ('00' + d.getHours()).slice(-2)
+		const minutes = ('00' + d.getMinutes()).slice(-2)
+		const seconds = ('00' + d.getSeconds()).slice(-2)
+		const milliseconds = ('000' + d.getMilliseconds()).slice(-3)
+		if (fields[0] && fields[0].innerText !== hours) {
+			fields[0].innerText = hours
+		}
+		if (fields[1] && fields[1].innerText !== minutes) {
+			fields[1].innerText = minutes
+		}
+		if (fields[2] && fields[2].innerText !== seconds) {
+			fields[2].innerText = seconds
+		}
+		if (fields[3] && fields[3].innerText !== milliseconds) {
+			fields[3].innerText = milliseconds
 		}
 	}
 
@@ -79,16 +101,10 @@
 			browseDate.setSeconds(value)
 		} else if (field.label === 'Milliseconds') {
 			browseDate.setMilliseconds(value)
-		} else {
-			throw new Error('Invalid label ' + field.label)
 		}
 
-		const length = field.label === 'Milliseconds' ? 3 : 2
-		const text_value = ('000' + value).slice(-length)
-		if (text_value !== node.innerText) {
-			node.innerText = text_value
-		}
-		browse(browseDate)
+		browseDate = setTime(browseDate)
+		setText(browseDate)
 	}
 
 	function parse(text: string, length: number) {

src/routes/bug/+page.svelte

@@ -1,34 +1,10 @@
 <script lang="ts">
 	import DatePicker from '$lib/DatePicker.svelte'
 
-	let date: Date | null = new Date()
-	// 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)
-	}
+	let min = new Date(2024, 1, 26, 17, 30)
+	let value: Date | undefined
 </script>
 
-<button
-	type="button"
-	on:click={() => {
-		date?.setMonth(date.getMonth() - 1)
-		date = date
-	}}>Subtract 1 month</button
->
-<!-- <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} browseWithoutSelecting={true} />
+<DatePicker timePrecision="minute" {min} bind:value />
+
+{value}