feat: Date Field add data-placeholder attribute and delete improv

packages/bits-ui/src/lib/bits/date-field/date-field.svelte.ts

@@ -894,20 +894,30 @@ class DateFieldDaySegmentState {
 			}
 		}
 
-		if (isBackspace(e.key)) {
+		if (isBackspace(e.key) || isDelete(e.key)) {
+			this.#root.states.day.hasLeftFocus = false;
 			let moveToPrev = false;
 			this.#updateSegment("day", (prev) => {
-				this.#root.states.day.hasLeftFocus = false;
 				if (prev === null) {
+					this.#announcer.announce(null);
 					moveToPrev = true;
 					return null;
 				}
-				if (prev.length === 2 && prev.startsWith("0")) {
+
+				// Handle CTRL+A+Backspace or full selection + Backspace
+				if (document.getSelection()?.toString() === prev) {
+					this.#announcer.announce("Empty");
 					return null;
 				}
+
 				const str = prev.toString();
-				if (str.length === 1) return null;
-				return str.slice(0, -1);
+				if (str.length === 1) {
+					this.#announcer.announce(null);
+					return null;
+				}
+				const next = Number.parseInt(str.slice(0, -1));
+				this.#announcer.announce(next);
+				return `${next}`;
 			});
 
 			if (moveToPrev) {
@@ -945,6 +955,7 @@ class DateFieldDaySegmentState {
 			"aria-valuemax": getDaysInMonth(toDate(date)),
 			"aria-valuenow": date.day,
 			"aria-valuetext": this.#root.segmentValues.day === null ? "Empty" : `${date.day}`,
+			"data-placeholder": this.#root.segmentValues.day == null ? "true" : undefined,
 			onkeydown: this.#onkeydown,
 			onfocusout: this.#onfocusout,
 			onclick: this.#root.handleSegmentClick,
@@ -1149,7 +1160,7 @@ class DateFieldMonthSegmentState {
 			}
 		}
 
-		if (isBackspace(e.key)) {
+		if (isBackspace(e.key) || isDelete(e.key)) {
 			this.#root.states.month.hasLeftFocus = false;
 			let moveToPrev = false;
 			this.#updateSegment("month", (prev) => {
@@ -1159,8 +1170,9 @@ class DateFieldMonthSegmentState {
 					return null;
 				}
 
-				if (prev.length === 2 && prev.startsWith("0")) {
-					this.#announcer.announce(null);
+				// Handle CTRL+A+Backspace or full selection + Backspace
+				if (document.getSelection()?.toString() === prev) {
+					this.#announcer.announce("Empty");
 					return null;
 				}
 
@@ -1213,6 +1225,7 @@ class DateFieldMonthSegmentState {
 				this.#root.segmentValues.month === null
 					? "Empty"
 					: `${date.month} - ${this.#root.formatter.fullMonth(toDate(date))}`,
+			"data-placeholder": this.#root.segmentValues.month === null ? "true" : undefined,
 			onkeydown: this.#onkeydown,
 			onfocusout: this.#onfocusout,
 			onclick: this.#root.handleSegmentClick,
@@ -1383,7 +1396,7 @@ class DateFieldYearSegmentState {
 			}
 		}
 
-		if (isBackspace(e.key)) {
+		if (isBackspace(e.key) || isDelete(e.key)) {
 			this.#pressedKeys = [];
 			this.#incrementBackspaceCount();
 			let moveToPrev = false;
@@ -1394,6 +1407,15 @@ class DateFieldYearSegmentState {
 					this.#announcer.announce(null);
 					return null;
 				}
+
+				// Handle CTRL+A+Backspace
+
+				if (document.getSelection()?.toString() !== "") {
+					this.#root.states.year.hasLeftFocus = false;
+					this.#announcer.announce("Empty");
+					return null;
+				}
+
 				const str = prev.toString();
 				if (str.length === 1) {
 					this.#announcer.announce(null);
@@ -1450,6 +1472,7 @@ class DateFieldYearSegmentState {
 			onkeydown: this.#onkeydown,
 			onclick: this.#root.handleSegmentClick,
 			onfocusout: this.#onfocusout,
+			"data-placeholder": isEmpty ? "true" : undefined,
 			...this.#root.getBaseSegmentAttrs("year", this.#id.current),
 		};
 	});
@@ -1658,7 +1681,7 @@ class DateFieldHourSegmentState {
 			}
 		}
 
-		if (isBackspace(e.key)) {
+		if (isBackspace(e.key) || isDelete(e.key)) {
 			this.#root.states.hour.hasLeftFocus = false;
 			let moveToPrev = false;
 			this.#updateSegment("hour", (prev) => {
@@ -1667,6 +1690,13 @@ class DateFieldHourSegmentState {
 					moveToPrev = true;
 					return null;
 				}
+
+				// Handle CTRL+A+Backspace or full selection + Backspace
+				if (document.getSelection()?.toString() === prev) {
+					this.#announcer.announce("Empty");
+					return null;
+				}
+
 				const str = prev.toString();
 				if (str.length === 1) {
 					this.#announcer.announce(null);
@@ -1716,6 +1746,7 @@ class DateFieldHourSegmentState {
 			onkeydown: this.#onkeydown,
 			onfocusout: this.#onfocusout,
 			onclick: this.#root.handleSegmentClick,
+			"data-placeholder": isEmpty ? "true" : undefined,
 			...this.#root.getBaseSegmentAttrs("hour", this.#id.current),
 		};
 	});
@@ -1902,7 +1933,7 @@ class DateFieldMinuteSegmentState {
 			return;
 		}
 
-		if (isBackspace(e.key)) {
+		if (isBackspace(e.key) || isDelete(e.key)) {
 			this.#root.states.minute.hasLeftFocus = false;
 			let moveToPrev = false;
 			this.#updateSegment("minute", (prev) => {
@@ -1911,6 +1942,13 @@ class DateFieldMinuteSegmentState {
 					this.#announcer.announce("Empty");
 					return null;
 				}
+
+				// Handle CTRL+A+Backspace or full selection + Backspace
+				if (document.getSelection()?.toString() === prev) {
+					this.#announcer.announce("Empty");
+					return null;
+				}
+
 				const str = prev.toString();
 				if (str.length === 1) {
 					this.#announcer.announce("Empty");
@@ -1961,6 +1999,7 @@ class DateFieldMinuteSegmentState {
 			onkeydown: this.#onkeydown,
 			onfocusout: this.#onfocusout,
 			onclick: this.#root.handleSegmentClick,
+			"data-placeholder": isEmpty ? "true" : undefined,
 			...this.#root.getBaseSegmentAttrs("minute", this.#id.current),
 		};
 	});
@@ -2146,7 +2185,7 @@ class DateFieldSecondSegmentState {
 			}
 		}
 
-		if (isBackspace(e.key)) {
+		if (isBackspace(e.key) || isDelete(e.key)) {
 			this.#root.states.second.hasLeftFocus = false;
 			let moveToPrev = false;
 			this.#updateSegment("second", (prev) => {
@@ -2155,6 +2194,13 @@ class DateFieldSecondSegmentState {
 					this.#announcer.announce(null);
 					return null;
 				}
+
+				// Handle CTRL+A+Backspace or full selection + Backspace
+				if (document.getSelection()?.toString() === prev) {
+					this.#announcer.announce("Empty");
+					return null;
+				}
+
 				const str = prev.toString();
 				if (str.length === 1) {
 					this.#announcer.announce(null);
@@ -2203,6 +2249,7 @@ class DateFieldSecondSegmentState {
 			onkeydown: this.#onkeydown,
 			onfocusout: this.#onfocusout,
 			onclick: this.#root.handleSegmentClick,
+			"data-placeholder": isEmpty ? "true" : undefined,
 			...this.#root.getBaseSegmentAttrs("second", this.#id.current),
 		};
 	});
@@ -2253,7 +2300,7 @@ class DateFieldDayPeriodSegmentState {
 			return;
 		}
 
-		if (isBackspace(e.key)) {
+		if (isBackspace(e.key) || isDelete(e.key)) {
 			this.#root.states.dayPeriod.hasLeftFocus = false;
 			this.#updateSegment("dayPeriod", () => {
 				const next = "AM";
@@ -2395,6 +2442,10 @@ function isBackspace(key: string) {
 	return key === kbd.BACKSPACE;
 }
 
+function isDelete(key: string) {
+	return key === kbd.DELETE;
+}
+
 const [setDateFieldRootContext, getDateFieldRootContext] =
 	createContext<DateFieldRootState>("DateField.Root");
 

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

@@ -383,6 +383,7 @@ export function isAcceptableSegmentKey(key: string) {
 		kbd.ARROW_LEFT,
 		kbd.ARROW_RIGHT,
 		kbd.BACKSPACE,
+		kbd.DELETE,
 		kbd.SPACE,
 	];
 	if (acceptableSegmentKeys.includes(key)) return true;

packages/tests/src/tests/date-field/date-field.test.ts

@@ -892,6 +892,76 @@ describe("date field", () => {
 		await user.keyboard(kbd.ARROW_UP);
 		expect(input).toHaveValue(value.add({ years: 1 }).toString());
 	});
+
+	it("should clear date segments when fully selected with Backspace or Delete", async () => {
+		const { user, day, month, year, getByTestId } = setup({
+			value: new CalendarDateTime(2023, 10, 12, 12, 30, 30, 0),
+			granularity: "second",
+		});
+
+		const { getHour, getMinute, getSecond } = getTimeSegments(getByTestId);
+		const segments = [month, day, year, getHour(), getMinute(), getSecond()];
+
+		// Test Backspace
+		for (const segment of segments.slice(0, 3)) {
+			await user.click(segment);
+			await user.keyboard("{Control>}a{/Control}");
+			await user.keyboard("{Backspace}");
+		}
+
+		// Test Delete
+		for (const segment of segments.slice(3)) {
+			await user.click(segment);
+			await user.keyboard("{Control>}a{/Control}");
+			await user.keyboard("{Delete}");
+		}
+
+		// Verify all segments are cleared
+		expect(day).toHaveTextContent("dd");
+		expect(month).toHaveTextContent("mm");
+		expect(year).toHaveTextContent("yyyy");
+		expect(getHour()).toHaveTextContent(TIME_PLACEHOLDER);
+		expect(getMinute()).toHaveTextContent(TIME_PLACEHOLDER);
+		expect(getSecond()).toHaveTextContent(TIME_PLACEHOLDER);
+	});
+
+	it("should apply data-placeholder attribute to empty segments", async () => {
+		const { user, day, year, month, getByTestId } = setup({
+			value: undefined,
+			granularity: "second",
+		});
+
+		const { getHour, getMinute, getSecond } = getTimeSegments(getByTestId);
+		const segments = [month, day, year, getHour(), getMinute(), getSecond()];
+
+		// Check initial state
+		segments.forEach((segment) => {
+			expect(segment).toHaveAttribute("data-placeholder", "true");
+		});
+
+		// Fill in date and time
+		const fillSequence = ["12", "15", "2023", "12", "30", "30"];
+		for (let i = 0; i < fillSequence.length; i++) {
+			await user.click(segments[i]);
+			await user.keyboard(fillSequence[i]);
+			expect(segments[i]).not.toHaveAttribute("data-placeholder");
+		}
+
+		// Clear and check each segment
+		for (const segment of segments) {
+			await user.click(segment);
+			await user.keyboard("{Control>}a{/Control}{Backspace}");
+			expect(segment).toHaveAttribute("data-placeholder", "true");
+		}
+
+		// Test partial fill
+		await user.click(year);
+		await user.keyboard("20");
+		expect(year).not.toHaveAttribute("data-placeholder");
+		await user.keyboard("{Control>}a{/Control}");
+		await user.keyboard("{Backspace}");
+		expect(year).toHaveAttribute("data-placeholder", "true");
+	});
 });
 
 /**

sites/docs/src/lib/components/demos/date-field-demo-custom.svelte

@@ -25,7 +25,7 @@
 						{:else}
 							<DateField.Segment
 								{part}
-								class="rounded-5px px-1 py-1 hover:bg-muted focus:bg-muted focus:text-foreground focus-visible:!ring-0 focus-visible:!ring-offset-0 aria-[valuetext=Empty]:text-muted-foreground data-[invalid]:text-destructive"
+								class="rounded-5px px-1 py-1 hover:bg-muted focus:bg-muted focus:text-foreground focus-visible:!ring-0 focus-visible:!ring-offset-0 data-[invalid]:text-destructive data-[placeholder]:text-muted-foreground"
 							>
 								{value}
 							</DateField.Segment>

sites/docs/src/lib/components/demos/date-field-demo.svelte

@@ -18,7 +18,7 @@
 						{:else}
 							<DateField.Segment
 								{part}
-								class="rounded-5px px-1 py-1 hover:bg-muted focus:bg-muted focus:text-foreground focus-visible:!ring-0 focus-visible:!ring-offset-0 aria-[valuetext=Empty]:text-muted-foreground data-[invalid]:text-destructive"
+								class="rounded-5px px-1 py-1 hover:bg-muted focus:bg-muted focus:text-foreground focus-visible:!ring-0 focus-visible:!ring-offset-0 data-[invalid]:text-destructive data-[placeholder]:text-muted-foreground"
 							>
 								{value}
 							</DateField.Segment>

sites/docs/src/lib/components/demos/date-picker-demo.svelte

@@ -21,7 +21,7 @@
 						{:else}
 							<DatePicker.Segment
 								{part}
-								class="rounded-5px px-1 py-1 hover:bg-muted focus:bg-muted focus:text-foreground focus-visible:!ring-0 focus-visible:!ring-offset-0 aria-[valuetext=Empty]:text-muted-foreground"
+								class="rounded-5px px-1 py-1 hover:bg-muted focus:bg-muted focus:text-foreground focus-visible:!ring-0 focus-visible:!ring-offset-0 data-[placeholder]:text-muted-foreground"
 							>
 								{value}
 							</DatePicker.Segment>

sites/docs/src/lib/components/demos/date-range-field-demo.svelte

@@ -21,7 +21,7 @@
 							{:else}
 								<DateRangeField.Segment
 									{part}
-									class="rounded-5px px-1 py-1 hover:bg-muted focus:bg-muted focus:text-foreground focus-visible:!ring-0 focus-visible:!ring-offset-0 aria-[valuetext=Empty]:text-muted-foreground"
+									class="rounded-5px px-1 py-1 hover:bg-muted focus:bg-muted focus:text-foreground focus-visible:!ring-0 focus-visible:!ring-offset-0 data-[placeholder]:text-muted-foreground"
 								>
 									{value}
 								</DateRangeField.Segment>

sites/docs/src/lib/components/demos/date-range-picker-demo.svelte

@@ -32,7 +32,7 @@
 							{:else}
 								<DateRangePicker.Segment
 									{part}
-									class="rounded-5px px-1 py-1 hover:bg-muted focus:bg-muted focus:text-foreground focus-visible:!ring-0 focus-visible:!ring-offset-0 aria-[valuetext=Empty]:text-muted-foreground"
+									class="rounded-5px px-1 py-1 hover:bg-muted focus:bg-muted focus:text-foreground focus-visible:!ring-0 focus-visible:!ring-offset-0 data-[placeholder]:text-muted-foreground"
 								>
 									{value}
 								</DateRangePicker.Segment>