Set unused time precision to 0 (#112)

* added functiinality to set unused time precision to 0

* Apply time precision on setValue/setBrowseDate

* Update CHANGELOG.md

---------

Co-authored-by: Kasper <[email protected]>

Author: stinger567

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## Next
+- Fix `timePrecision` not always setting unused values to 0 (@stinger567)
+
 ## 2.15.1 - 2024 Nov 29
 - Remove leftover logging statements
 

src/lib/DatePicker.svelte

@@ -1,6 +1,11 @@
 <script lang="ts">
 	import TimePicker from './TimePicker.svelte'
-	import { getMonthLength, getCalendarDays, type CalendarDay } from './date-utils.js'
+	import {
+		getMonthLength,
+		getCalendarDays,
+		type CalendarDay,
+		applyTimePrecision,
+	} from './date-utils.js'
 	import { getInnerLocale, type Locale } from './locale.js'
 	import { createEventDispatcher } from 'svelte'
 
@@ -19,6 +24,7 @@
 	function setValue(d: Date) {
 		if (d.getTime() !== value?.getTime()) {
 			browseDate = clamp(d, min, max)
+			applyTimePrecision(browseDate, timePrecision)
 			value = cloneDate(browseDate)
 		}
 	}
@@ -94,6 +100,8 @@
 	function setBrowseDate(value: Date | null) {
 		if (browseDate.getTime() !== value?.getTime()) {
 			browseDate = value ? cloneDate(value) : browseDate
+			// If the value was updated externally, this fixes the time precision
+			applyTimePrecision(browseDate, timePrecision)
 		}
 	}
 

src/lib/TimePicker.svelte

@@ -4,7 +4,6 @@
 	export let setTime: (d: Date) => Date
 
 	let fields: (HTMLSpanElement | undefined | null)[] = []
-
 	function select(node: Node) {
 		const selection = window.getSelection()
 		const range = document.createRange()

src/lib/date-utils.ts

@@ -74,3 +74,17 @@ export function getCalendarDays(value: Date, weekStartsOn: number): CalendarDay[
 
 	return days
 }
+
+export function applyTimePrecision(
+	date: Date,
+	timePrecision: 'minute' | 'second' | 'millisecond' | null,
+) {
+	// Set unused time components to 0
+	if (timePrecision === null) {
+		date.setHours(0, 0, 0, 0)
+	} else if (timePrecision === 'minute') {
+		date.setSeconds(0, 0)
+	} else if (timePrecision === 'second') {
+		date.setMilliseconds(0)
+	}
+}

src/routes/bug/+page.svelte

@@ -1,10 +1,15 @@
 <script lang="ts">
 	import DatePicker from '$lib/DatePicker.svelte'
 
-	let min = new Date(2024, 1, 26, 17, 30)
 	let value: Date | undefined
 </script>
 
-<DatePicker timePrecision="minute" {min} bind:value />
+<button
+	on:click={() => {
+		value = new Date(2025, 3, 19, 11, 11, 11, 111)
+	}}>Set to precise value</button
+>
 
-{value}
+<DatePicker timePrecision="minute" bind:value />
+
+{value?.toISOString() ?? 'null'}

src/routes/bug/timeprecision/+page.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import DatePicker from '$lib/DatePicker.svelte'
+
+	let value: Date | undefined
+</script>
+
+<button
+	on:click={() => {
+		value = new Date(2025, 3, 19, 11, 11, 11, 111)
+	}}>chhh</button
+>
+
+<DatePicker timePrecision="minute" bind:value />
+
+{value?.toISOString()}