fixed date input range, cleaned up extra day implementation

evidence-dev · Jan 7, 2025 · 239ebcd · 239ebcd
1 parent acef0cf
commit 239ebcd
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 76 deletions.
diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.svelte b/packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.svelte
@@ -61,6 +61,14 @@
 
 	let currentDate = dateToYYYYMMDD(new Date());
 
+	let extraDayEndString;
+
+	$: if (endString) {
+		extraDayEndString = new Date(endString);
+		extraDayEndString.setDate(extraDayEndString.getDate() + 1);
+		extraDayEndString = formatDateString(extraDayEndString);
+	}
+
 	function onSelectedDateInputChange(selectedDateInput) {
 		if (selectedDateInput && (selectedDateInput.start || selectedDateInput.end) && range) {
 			$inputs[name] = {
@@ -101,6 +109,7 @@
 					{onSelectedDateInputChange}
 					start={startString}
 					end={endString}
+					{extraDayEndString}
 					loaded={loaded?.ready ?? true}
 					{presetRanges}
 					{defaultValue}

diff --git a/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte b/packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
@@ -49,7 +49,7 @@
 	export let range = false;
 	/** @type {string} */
 	export let title;
-	export let extraDayEndString;
+	export let extraDayEndString = undefined;
 
 	/** @type { { label: string, group: string, range: import('bits-ui').DateRange }[] } */
 	$: presets = [

diff --git a/packages/ui/core-components/src/lib/atoms/shadcn/range-calendar/range-calendar-day.svelte b/packages/ui/core-components/src/lib/atoms/shadcn/range-calendar/range-calendar-day.svelte
@@ -16,80 +16,40 @@
 
 	export let maxValue = undefined;
 
-	let hideDate = false;
-
-	$: if (
-		maxValue.day === date.day &&
-		maxValue.month === date.month &&
-		maxValue.year === date.year
-	) {
-		hideDate = true;
-	} else {
-		hideDate = false;
-	}
+	$: hideExtraDay =
+		date.year >= maxValue.year && date.month >= maxValue.month && date.day >= maxValue.day
+			? true
+			: false;
 </script>
 
-{#if hideDate}
-	<RangeCalendarPrimitive.Day
-		on:click
-		{date}
-		{month}
-		data-disabled
-		class={cn(
-			buttonVariants({ variant: 'ghost' }),
-			'h-8 w-8 p-0 font-normal data-[selected]:opacity-100',
-			// Today
-			'[&[data-today]:not([data-selected])]:border [&[data-today]:not([data-selected])]:border-dashed [&[data-today]:not([data-selected])]:border-base-300 [&[data-today]:not([data-selected])]:text-base-content',
-			// Selection Start
-			'data-[selection-start]:bg-base-content data-[selection-start]:text-base-100 data-[selection-start]:hover:bg-base-content data-[selection-start]:hover:text-base-100 data-[selection-start]:focus:bg-base-content data-[selection-start]:focus:text-base-100',
-			// Selection End
-			'data-[selection-end]:bg-base-content data-[selection-end]:text-base-100 data-[selection-end]:hover:bg-base-content data-[selection-end]:hover:text-base-100 data-[selection-end]:focus:bg-base-content data-[selection-end]:focus:text-base-100',
-			// Outside months
-			'data-[outside-month]:pointer-events-none data-[outside-month]:text-base-content-muted data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:bg-base-200/50 [&[data-outside-month][data-selected]]:text-base-content-muted [&[data-outside-month][data-selected]]:opacity-30',
-			// Disabled
-			'data-[disabled]:text-base-content-muted data-[disabled]:opacity-50',
-			// Unavailable
-			'data-[unavailable]:text-negative/20 data-[unavailable]:line-through',
-
-			className
-		)}
-		let:disabled
-		let:unavailable
-		let:builder
-	>
-		<slot {disabled} {unavailable} {builder}>
-			{date.day}
-		</slot>
-	</RangeCalendarPrimitive.Day>
-{:else}
-	<RangeCalendarPrimitive.Day
-		on:click
-		{date}
-		{month}
-		class={cn(
-			buttonVariants({ variant: 'ghost' }),
-			'h-8 w-8 p-0 font-normal data-[selected]:opacity-100',
-			// Today
-			'[&[data-today]:not([data-selected])]:border [&[data-today]:not([data-selected])]:border-dashed [&[data-today]:not([data-selected])]:border-base-300 [&[data-today]:not([data-selected])]:text-base-content',
-			// Selection Start
-			'data-[selection-start]:bg-base-content data-[selection-start]:text-base-100 data-[selection-start]:hover:bg-base-content data-[selection-start]:hover:text-base-100 data-[selection-start]:focus:bg-base-content data-[selection-start]:focus:text-base-100',
-			// Selection End
-			'data-[selection-end]:bg-base-content data-[selection-end]:text-base-100 data-[selection-end]:hover:bg-base-content data-[selection-end]:hover:text-base-100 data-[selection-end]:focus:bg-base-content data-[selection-end]:focus:text-base-100',
-			// Outside months
-			'data-[outside-month]:pointer-events-none data-[outside-month]:text-base-content-muted data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:bg-base-200/50 [&[data-outside-month][data-selected]]:text-base-content-muted [&[data-outside-month][data-selected]]:opacity-30',
-			// Disabled
-			'data-[disabled]:text-base-content-muted data-[disabled]:opacity-50',
-			// Unavailable
-			'data-[unavailable]:text-negative/20 data-[unavailable]:line-through',
-
-			className
-		)}
-		let:disabled
-		let:unavailable
-		let:builder
-	>
-		<slot {disabled} {unavailable} {builder}>
-			{date.day}
-		</slot>
-	</RangeCalendarPrimitive.Day>
-{/if}
+<RangeCalendarPrimitive.Day
+	on:click
+	{date}
+	data-disabled={hideExtraDay ? true : undefined}
+	{month}
+	class={cn(
+		buttonVariants({ variant: 'ghost' }),
+		'h-8 w-8 p-0 font-normal data-[selected]:opacity-100',
+		// Today
+		'[&[data-today]:not([data-selected])]:border [&[data-today]:not([data-selected])]:border-dashed [&[data-today]:not([data-selected])]:border-base-300 [&[data-today]:not([data-selected])]:text-base-content',
+		// Selection Start
+		'data-[selection-start]:bg-base-content data-[selection-start]:text-base-100 data-[selection-start]:hover:bg-base-content data-[selection-start]:hover:text-base-100 data-[selection-start]:focus:bg-base-content data-[selection-start]:focus:text-base-100',
+		// Selection End
+		'data-[selection-end]:bg-base-content data-[selection-end]:text-base-100 data-[selection-end]:hover:bg-base-content data-[selection-end]:hover:text-base-100 data-[selection-end]:focus:bg-base-content data-[selection-end]:focus:text-base-100',
+		// Outside months
+		'data-[outside-month]:pointer-events-none data-[outside-month]:text-base-content-muted data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:bg-base-200/50 [&[data-outside-month][data-selected]]:text-base-content-muted [&[data-outside-month][data-selected]]:opacity-30',
+		// Disabled
+		'data-[disabled]:text-base-content-muted data-[disabled]:opacity-50',
+		// Unavailable
+		'data-[unavailable]:text-negative/20 data-[unavailable]:line-through',
+
+		className
+	)}
+	let:disabled
+	let:unavailable
+	let:builder
+>
+	<slot {disabled} {unavailable} {builder}>
+		{date.day}
+	</slot>
+</RangeCalendarPrimitive.Day>