UI5 · tsanislavgatev · Nov 26, 2025 · Nov 26, 2025 · Nov 26, 2025 · Dec 2, 2025
diff --git a/packages/main/src/DatePicker.ts b/packages/main/src/DatePicker.ts
@@ -366,6 +366,15 @@ class DatePicker extends DateComponentBase implements IFormInputElement {
 	@property()
 	accessibleDescriptionRef?: string;
 
+	/**
+	 * Defines whether the clear icon of the input will be shown.
+	 * @default false
+	 * @public
+	 * @since 1.16.0
+	 */
+	@property({ type: Boolean })
+	showClearIcon = false;
+
 	@property({ type: Object })
 	_respPopoverConfig?: object;
 
@@ -878,6 +887,10 @@ class DatePicker extends DateComponentBase implements IFormInputElement {
 		return this.getDisplayFormat().format(this.getValueFormat().parse(this.value, true), true);
 	}
 
+	// get hasValue(): boolean {
+	// 	return !!this.value;
+	// }
+
 	get accInfo(): InputAccInfo {
 		return {
 			"ariaRoledescription": this.roleDescription,

diff --git a/packages/main/src/DatePickerInputTemplate.tsx b/packages/main/src/DatePickerInputTemplate.tsx
@@ -28,6 +28,7 @@ export default function DatePickerInputTemplate(this: DatePicker) {
 				onInput={this._onInputInput}
 				onSubmit={this._onInputSubmit}
 				onKeyDown={this._onkeydown}
+				showClearIcon={this.showClearIcon}
 			>
 
 				{!this.open && this.valueStateMessage.length > 0 &&

diff --git a/packages/main/src/themes/DatePicker.css b/packages/main/src/themes/DatePicker.css
@@ -60,6 +60,11 @@
 	background-color: var(--_ui5-datepicker-hover-background);
 }
 
+:host([show-clear-icon]) .ui5-date-picker-input:not([value]),
+:host([show-clear-icon]) .ui5-date-picker-input[value=""] {
+	width: calc(100% + 36px);
+}
+
 .ui5-date-picker-popover::part(header) {
 	padding: 0;
 }
diff --git a/packages/main/src/themes/DateRangePicker.css b/packages/main/src/themes/DateRangePicker.css
@@ -13,4 +13,10 @@
 	min-width:inherit;
 	color: inherit;
 	background-color: inherit;
+}
+
+:host([show-clear-icon]) .ui5-date-picker-input:not([value]),
+:host([show-clear-icon]) .ui5-date-picker-input[value=""] {
+	width: 100%;
+	min-width:inherit;
 }
diff --git a/packages/main/src/themes/DateTimePicker.css b/packages/main/src/themes/DateTimePicker.css
@@ -8,4 +8,10 @@
 	min-width: inherit;
 	color: inherit;
 	background-color: inherit;
+}
+
+:host([show-clear-icon]) .ui5-date-picker-input:not([value]),
+:host([show-clear-icon]) .ui5-date-picker-input[value=""] {
+	width: 100%;
+	min-width:inherit;
 }
diff --git a/packages/main/test/pages/DatePicker.html b/packages/main/test/pages/DatePicker.html
@@ -76,7 +76,7 @@ <h3>format-pattern - 'short'</h3>
 		<ui5-date-picker id='dp6' format-pattern='short'></ui5-date-picker>
 
 		<h3>format-pattern - 'long'</h3>
-		<ui5-date-picker id='dp7' format-pattern='long'></ui5-date-picker>
+		<ui5-date-picker id='dp7' show-clear-icon format-pattern='long'></ui5-date-picker>
 
 		<h3>format-pattern - 'QQQ yyyy, MMM dd'</h3>
 		<ui5-date-picker id='dp8' format-pattern='QQQ yyyy, MMM dd'></ui5-date-picker>

diff --git a/packages/main/test/pages/DateRangePicker.html b/packages/main/test/pages/DateRangePicker.html
@@ -33,7 +33,7 @@
 			<label id='labelChange'>0</label>
 			<label id='labelDate'></label>
 		</div>
-		<ui5-daterange-picker id="daterange-picker1"></ui5-daterange-picker>
+		<ui5-daterange-picker show-clear-icon id="daterange-picker1"></ui5-daterange-picker>
 		<h3>daterange-picker with delimiter @</h3>
 		<ui5-daterange-picker id="daterange-picker2" delimiter="@"></ui5-daterange-picker>
 		<h3>display-fomat='medium' value-fomat='yyyy-MM-dd'</h3>

diff --git a/packages/main/test/pages/DateTimePicker.html b/packages/main/test/pages/DateTimePicker.html
@@ -20,7 +20,7 @@
 <body class="datetimepicker1auto">
 
 	<ui5-label for="dtpLabel">Deadline</ui5-label>
-	<ui5-datetime-picker id="dtpLabel"></ui5-datetime-picker>
+	<ui5-datetime-picker id="dtpLabel" show-clear-icon></ui5-datetime-picker>
 
 	<section>
 		<ui5-title>DateTimePicker</ui5-title><br>

diff --git a/packages/website/docs/_components_pages/main/DatePicker.mdx b/packages/website/docs/_components_pages/main/DatePicker.mdx
@@ -3,6 +3,7 @@ slug: ../DatePicker
 ---
 
 import Basic from "../../_samples/main/DatePicker/Basic/Basic.md";
+import ClearIcon from "../../_samples/main/DatePicker/ClearIcon/ClearIcon.md";
 import State from "../../_samples/main/DatePicker/State/State.md";
 import MinMax from "../../_samples/main/DatePicker/MinMax/MinMax.md";
 import CalendarTypes from "../../_samples/main/DatePicker/CalendarTypes/CalendarTypes.md";
@@ -19,6 +20,11 @@ import CustomFormatting from "../../_samples/main/DatePicker/CustomFormatting/Cu
 
 ## More Samples
 
+# DatePicker with Clear Icon
+
+This sample demonstrates the DatePicker component with the `show-clear-icon` property enabled, which displays a clear button to reset the selected date.
+<ClearIcon />
+
 ### States
 <State />
 

diff --git a/packages/website/docs/_samples/main/DatePicker/ClearIcon/ClearIcon.md b/packages/website/docs/_samples/main/DatePicker/ClearIcon/ClearIcon.md
@@ -0,0 +1,4 @@
+import html from '!!raw-loader!./sample.html';
+import js from '!!raw-loader!./main.js';
+
+<Editor html={html} js={js} />
diff --git a/packages/website/docs/_samples/main/DatePicker/ClearIcon/main.js b/packages/website/docs/_samples/main/DatePicker/ClearIcon/main.js
@@ -0,0 +1,2 @@
+import "@ui5/webcomponents/dist/Assets-fetch.js";
+import "@ui5/webcomponents/dist/DatePicker.js";
diff --git a/packages/website/docs/_samples/main/DatePicker/ClearIcon/sample.html b/packages/website/docs/_samples/main/DatePicker/ClearIcon/sample.html
@@ -0,0 +1,21 @@
+<!-- playground-fold -->
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sample</title>
+</head>
+
+<body style="background-color: var(--sapBackgroundColor); height: 450px;">
+    <!-- playground-fold-end -->
+
+    <ui5-date-picker show-clear-icon>
+    </ui5-date-picker>
+    <!-- playground-fold -->
+    <script type="module" src="main.js"></script>
+</body>
+
+</html>
+<!-- playground-fold-end -->
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		import "@ui5/webcomponents/dist/Assets-fetch.js";
		import "@ui5/webcomponents/dist/DatePicker.js";