feat(ui5-date-picker, ui5-daterange-picket, ui5-datetime-picker): introduce show-clear-icon property

Introduces a new show-clear-icon property to the DatePicker, DateRangePicker and DateTimePicker components that displays a clear icon inside the input field. When clicked, the icon clears the input value.

Changes:

Added boolean property (default: false, since: 2.20.0)
Clear icon automatically shows when there's a value and hides when empty, readonly, or disabled
Clicking the clear icon clears the value, focuses the input, and fires change events

Author: GDamyanov

packages/main/cypress/specs/DatePicker.cy.tsx

@@ -201,7 +201,38 @@ describe("Date Picker Tests", () => {
 			.should("have.attr", "placeholder", "test placeholder");
 	});
 
+	it("clear icon", () => {
+		cy.mount(<DatePicker showClearIcon={true} value="Jan 1, 2020" formatPattern="MMM d, y"></DatePicker>);
 
+		cy.get("[ui5-date-picker]")
+			.as("datePicker");
+
+		cy.get<DatePicker>("@datePicker")
+			.shadow()
+			.find("ui5-datetime-input")
+			.shadow()
+			.find(".ui5-input-clear-icon")
+			.should("exist");
+
+		cy.get<DatePicker>("@datePicker")
+			.shadow()
+			.find("ui5-datetime-input")
+			.shadow()
+			.find(".ui5-input-clear-icon-wrapper")
+			.click();
+
+		cy.get<DatePicker>("@datePicker")
+			.shadow()
+			.find("ui5-datetime-input")
+			.shadow()
+			.find(".ui5-input-clear-icon")
+			.should("not.exist");
+
+		cy.realPress("Tab");
+
+		cy.get<DatePicker>("@datePicker")
+			.should("have.value", "");
+	});
 
 	it("Selected date from daypicker is the same as datepicker date", () => {
 		cy.mount(<DatePicker value="Jan 29, 2019" formatPattern="MMM d, y"></DatePicker>);

packages/main/src/DatePicker.ts

@@ -367,6 +367,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 2.20.0
+	 */
+	@property({ type: Boolean })
+	showClearIcon = false;
+
 	@property({ type: Object })
 	_respPopoverConfig?: object;
 

packages/main/src/DatePickerInputTemplate.tsx

@@ -28,6 +28,7 @@ export default function DatePickerInputTemplate(this: DatePicker) {
 				onInput={this._onInputInput}
 				onui5-_request-submit={this._onInputRequestSubmit}
 				onKeyDown={this._onkeydown}
+				showClearIcon={this.showClearIcon}
 			>
 
 				{!this.open && this.valueStateMessage.length > 0 &&

packages/main/src/themes/DatePicker.css

@@ -41,7 +41,6 @@
 }
 
 :host .ui5-date-picker-input {
-	width: 100%;
 	color: inherit;
 	background-color: inherit;
 	border-radius: inherit;
@@ -63,4 +62,5 @@
 
 .ui5-date-picker-popover::part(header) {
 	padding: 0;
-}
+}
+

packages/main/src/themes/DateTimePicker.css

@@ -5,7 +5,9 @@
 }
 
 :host .ui5-date-picker-input {
+	width: 100%;
 	min-width: inherit;
 	color: inherit;
 	background-color: inherit;
+	
 }