fix(Calendar): ensure time set outside persists when new day is set (#1359)

Author: huntabyte

.changeset/early-maps-wash.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix(Calendar): ensure time set outside persists when new day is selected

packages/bits-ui/src/lib/bits/calendar/calendar.svelte.ts

@@ -32,6 +32,7 @@ import {
 	createMonths,
 	getCalendarElementProps,
 	getCalendarHeadingValue,
+	getDateWithPreviousTime,
 	getIsNextButtonDisabled,
 	getIsPrevButtonDisabled,
 	getWeekdays,
@@ -343,9 +344,8 @@ export class CalendarRootState {
 			return value.some((d) => isSameDay(d, date));
 		} else if (!value) {
 			return false;
-		} else {
-			return isSameDay(value, date);
 		}
+		return isSameDay(value, date);
 	}
 
 	shiftFocus(node: HTMLElement, add: number) {
@@ -362,33 +362,33 @@ export class CalendarRootState {
 	}
 
 	handleCellClick(_: Event, date: DateValue) {
-		const readonly = this.opts.readonly.current;
-		if (readonly) return;
-		const isDateDisabled = this.opts.isDateDisabled.current;
-		const isDateUnavailable = this.opts.isDateUnavailable.current;
-		if (isDateDisabled?.(date) || isDateUnavailable?.(date)) return;
+		if (this.opts.readonly.current) return;
+		if (
+			this.opts.isDateDisabled.current?.(date) ||
+			this.opts.isDateUnavailable.current?.(date)
+		) {
+			return;
+		}
 
 		const prev = this.opts.value.current;
 		const multiple = this.opts.type.current === "multiple";
 		if (multiple) {
 			if (Array.isArray(prev) || prev === undefined) {
 				this.opts.value.current = this.handleMultipleUpdate(prev, date);
 			}
-		} else {
-			if (!Array.isArray(prev)) {
-				const next = this.handleSingleUpdate(prev, date);
-				if (!next) {
-					this.announcer.announce("Selected date is now empty.", "polite", 5000);
-				} else {
-					this.announcer.announce(
-						`Selected Date: ${this.formatter.selectedDate(next, false)}`,
-						"polite"
-					);
-				}
-				this.opts.value.current = next;
-				if (next !== undefined) {
-					this.opts.onDateSelect?.current?.();
-				}
+		} else if (!Array.isArray(prev)) {
+			const next = this.handleSingleUpdate(prev, date);
+			if (!next) {
+				this.announcer.announce("Selected date is now empty.", "polite", 5000);
+			} else {
+				this.announcer.announce(
+					`Selected Date: ${this.formatter.selectedDate(next, false)}`,
+					"polite"
+				);
+			}
+			this.opts.value.current = getDateWithPreviousTime(next, prev);
+			if (next !== undefined) {
+				this.opts.onDateSelect?.current?.();
 			}
 		}
 	}

packages/bits-ui/src/lib/internal/date-time/calendar-helpers.svelte.ts

@@ -11,6 +11,7 @@ import {
 	getDaysInMonth,
 	getLastFirstDayOfWeek,
 	getNextLastDayOfWeek,
+	hasTime,
 	isAfter,
 	isBefore,
 	parseAnyDateValue,
@@ -797,3 +798,18 @@ export function useEnsureNonDisabledPlaceholder({
 		}
 	);
 }
+
+export function getDateWithPreviousTime(date: DateValue | undefined, prev: DateValue | undefined) {
+	if (!date || !prev) return date;
+
+	if (hasTime(date) && hasTime(prev)) {
+		return date.set({
+			hour: prev.hour,
+			minute: prev.minute,
+			millisecond: prev.millisecond,
+			second: prev.second,
+		});
+	}
+
+	return date;
+}

packages/bits-ui/src/lib/internal/date-time/utils.ts

@@ -121,7 +121,7 @@ export function isZonedDateTime(dateValue: DateValue): dateValue is ZonedDateTim
 	return dateValue instanceof ZonedDateTime;
 }
 
-export function hasTime(dateValue: DateValue) {
+export function hasTime(dateValue: DateValue): dateValue is CalendarDateTime | ZonedDateTime {
 	return isCalendarDateTime(dateValue) || isZonedDateTime(dateValue);
 }
 

tests/src/tests/calendar/calendar-test.svelte

@@ -1,4 +1,5 @@
 <script lang="ts" module>
+	import { CalendarDateTime, ZonedDateTime } from "@internationalized/date";
 	import { Calendar, type CalendarSingleRootProps } from "bits-ui";
 	export type CalendarSingleTestProps = CalendarSingleRootProps;
 </script>
@@ -70,4 +71,14 @@
 	<button onclick={() => changeValue("day")} data-testid="add-day"> Add Day </button>
 	<button onclick={() => changeValue("month")} data-testid="add-month">Add Month</button>
 	<button onclick={() => changeValue("year")} data-testid="add-year">Add Year</button>
+	<button
+		data-testid="set-time"
+		onclick={() => {
+			if (value instanceof CalendarDateTime || value instanceof ZonedDateTime) {
+				value = value.set({ hour: 15, minute: 15, second: 15, millisecond: 15 });
+			}
+		}}
+	>
+		Set time
+	</button>
 </main>

tests/src/tests/calendar/calendar.test.ts

@@ -118,6 +118,42 @@ describe("type='single'", () => {
 			expect(getSelectedDay(t.calendar)).toHaveTextContent("21");
 			expect(getSelectedDays(t.calendar).length).toBe(1);
 		});
+
+		it("should persist time when selecting a date (CalendarDateTime)", async () => {
+			const t = setup({ value: calendarDateTime });
+			const value = t.getByTestId("value");
+			expect(value).toHaveTextContent(calendarDateTime.toString());
+			await t.user.click(t.getByTestId("set-time"));
+			expect(value).toHaveTextContent(
+				calendarDateTime
+					.set({ hour: 15, minute: 15, second: 15, millisecond: 15 })
+					.toString()
+			);
+			const firstDayInMonth = t.getByTestId("date-1-1");
+			await t.user.click(firstDayInMonth);
+			expect(value).toHaveTextContent(
+				calendarDateTime
+					.set({ day: 1, hour: 15, minute: 15, second: 15, millisecond: 15 })
+					.toString()
+			);
+		});
+
+		it("should persist time when selecting a date (ZonedDateTime)", async () => {
+			const t = setup({ value: zonedDateTime });
+			const value = t.getByTestId("value");
+			expect(value).toHaveTextContent(zonedDateTime.toString());
+			await t.user.click(t.getByTestId("set-time"));
+			expect(value).toHaveTextContent(
+				zonedDateTime.set({ hour: 15, minute: 15, second: 15, millisecond: 15 }).toString()
+			);
+			const firstDayInMonth = t.getByTestId("date-1-1");
+			await t.user.click(firstDayInMonth);
+			expect(value).toHaveTextContent(
+				zonedDateTime
+					.set({ day: 1, hour: 15, minute: 15, second: 15, millisecond: 15 })
+					.toString()
+			);
+		});
 	});
 
 	describe("Navigation", () => {