From c95d1a2166afcbe10927226d55548337f8eb01d3 Mon Sep 17 00:00:00 2001 From: Georgi Damyanov Date: Tue, 10 Feb 2026 11:42:37 +0200 Subject: [PATCH 1/3] feat: introduce show-clear-icon property --- packages/main/cypress/specs/DatePicker.cy.tsx | 30 ++ packages/main/src/DatePicker.ts | 27 +- packages/main/src/DatePickerInputTemplate.tsx | 1 + packages/main/src/themes/DatePicker.css | 5 + packages/main/src/themes/DateRangePicker.css | 6 + packages/main/src/themes/DateTimePicker.css | 6 + packages/main/test/pages/Button.html | 397 +----------------- packages/main/test/pages/DatePicker.html | 3 + packages/main/test/pages/DateRangePicker.html | 3 + packages/main/test/pages/DateTimePicker.html | 8 + .../_components_pages/main/DatePicker.mdx | 8 +- .../main/DatePicker/ClearIcon/ClearIcon.md | 4 + .../main/DatePicker/ClearIcon/main.js | 2 + .../main/DatePicker/ClearIcon/sample.html | 21 + 14 files changed, 124 insertions(+), 397 deletions(-) create mode 100644 packages/website/docs/_samples/main/DatePicker/ClearIcon/ClearIcon.md create mode 100644 packages/website/docs/_samples/main/DatePicker/ClearIcon/main.js create mode 100644 packages/website/docs/_samples/main/DatePicker/ClearIcon/sample.html diff --git a/packages/main/cypress/specs/DatePicker.cy.tsx b/packages/main/cypress/specs/DatePicker.cy.tsx index 9c3f660b80a9..0aa73bc34cb6 100644 --- a/packages/main/cypress/specs/DatePicker.cy.tsx +++ b/packages/main/cypress/specs/DatePicker.cy.tsx @@ -184,7 +184,37 @@ describe("Date Picker Tests", () => { .should("have.attr", "placeholder", "test placeholder"); }); + it("clear icon", () => { + cy.mount(); + cy.get("[ui5-date-picker]") + .as("datePicker"); + + cy.get("@datePicker") + .shadow() + .find("ui5-datetime-input") + .shadow() + .find(".ui5-input-clear-icon") + .should("exist"); + + + cy.get("@datePicker") + .shadow() + .find("ui5-datetime-input") + .shadow() + .find(".ui5-input-clear-icon-wrapper") + .click(); + + cy.get("@datePicker") + .shadow() + .find("ui5-datetime-input") + .shadow() + .find(".ui5-input-clear-icon") + .should("not.exist"); + + cy.get("@datePicker") + .should("have.value", ""); + }); it("Selected date from daypicker is the same as datepicker date", () => { cy.mount(); diff --git a/packages/main/src/DatePicker.ts b/packages/main/src/DatePicker.ts index 867122db92b0..ab77011069d8 100644 --- 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 2.16.0 + */ + @property({ type: Boolean }) + showClearIcon = false; + @property({ type: Object }) _respPopoverConfig?: object; @@ -655,10 +664,26 @@ class DatePicker extends DateComponentBase implements IFormInputElement { * The ui5-input "input" event handler - fire input even when the user types * @protected */ - _onInputInput(e: Event) { + _onInputInput(e: CustomEvent) { + const inputValue = (e.target as DatePicker).value; + if (this.showClearIcon && inputValue === "" && e.detail.inputType === "") { + this._handleClearIconClick(); + + return; + } + this._updateValueAndFireEvents((e.target as DatePicker).value, false, ["input"], false); } + _handleClearIconClick() { + this.value = ""; + this._dateTimeInput.value = ""; + this._updateValueState(); + this._dateTimeInput.focus(); + this.fireDecoratorEvent("change", { value: this.value, valid: true }); + this.fireDecoratorEvent("value-changed", { value: this.value, valid: true }); + } + /** * Checks if the provided value is valid and within valid range. * @protected diff --git a/packages/main/src/DatePickerInputTemplate.tsx b/packages/main/src/DatePickerInputTemplate.tsx index 1d830c4e149e..dce19b92138b 100644 --- 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} onui5-_request-submit={this._onInputRequestSubmit} 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 index b55aaa304c09..c320ccf4a391 100644 --- a/packages/main/src/themes/DatePicker.css +++ b/packages/main/src/themes/DatePicker.css @@ -63,4 +63,9 @@ .ui5-date-picker-popover::part(header) { padding: 0; +} + +:host([show-clear-icon]) .ui5-date-picker-input:not([value]), +:host([show-clear-icon]) .ui5-date-picker-input[value=""] { + width: calc(100% + 36px); } \ No newline at end of file diff --git a/packages/main/src/themes/DateRangePicker.css b/packages/main/src/themes/DateRangePicker.css index 876c30c6a13e..d519390decef 100644 --- 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; } \ No newline at end of file diff --git a/packages/main/src/themes/DateTimePicker.css b/packages/main/src/themes/DateTimePicker.css index 3eb355628e84..f059755a01e5 100644 --- 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; } \ No newline at end of file diff --git a/packages/main/test/pages/Button.html b/packages/main/test/pages/Button.html index c7ccc8104f15..062679431bce 100644 --- a/packages/main/test/pages/Button.html +++ b/packages/main/test/pages/Button.html @@ -19,401 +19,8 @@ - Reject - Add - - - Navigation Button - - - - - - - Press - - - Action Bar Button - Primary
button - Secondary button - Inactive - Accept - Decline - -
-
- -
- - -
- -
-
- - - - Action
Bar
- Button - Primary button - Secondary button - Inactive - Agree - Decline - Warning - Warning - -
-
-
- - - Action Bar Button - - - Action Bar Button - Action Bar Button - - Button with accessibleDescription: - Scan - -
-
- - Download Application - From This Button - - Action Bar Button - - - Action Bar Button - - - - -
-
-
- - Default - Default -
-
- - Agree - Agree -
-
- - Decline - Decline -
-
- - Transparent - Transparent - -
-
- - Cozy - - Emphasized - - - - Emphasized - - - Emphasized - - - -

- - Compact - -
- Emphasized - - - - Emphasized - - - Emphasized - - -
- -
- Cozy - - Emphasized - - - - Emphasized - - - Emphasized - - - -

- - Compact - -
- Emphasized - - - - Emphasized - - - Emphasized - - -
-
- -

- - Emphasized - -
-
-
-
-
- - Icon last - - Disabled Buton - - - - - -
- "This is a label, this is a label" - -
-
-
-
-
- - Action Bar Button - Primary button - Secondary button - Inactive - Agree - Decline - -
-
-
- - Action Bar Button - - - -
-
-
- - Default - Default -
-
- - Agree - Agree -
-
- - Decline - Decline -
-
- - Transparent - Transparent -
-
- - Emphasized - Emphasized - -
-
- Download - Download - Download - -
-
- Buttons with tooltip -
- - - - - - - -
-
- Buttons with busy indicator -
- - Busy Indicator - Busy Indicator - Busy Indicator - Busy Indicator - Busy Indicator - Busy Indicator - -
-
- Menu Buttons -
- Menu Button - - Menu Button - - - - - - - -
-
- Menu Buttons with fixed width -
- Menu Button - - Menu Button -
-
- -
- - - Submit - Reset -
- - Show Registration Dialog - - - - -
-
- Register -
- - - - Submit - - + Delete + \ No newline at end of file diff --git a/packages/main/test/pages/DatePicker.html b/packages/main/test/pages/DatePicker.html index 17d3689a3969..ad9ece2e2722 100644 --- a/packages/main/test/pages/DatePicker.html +++ b/packages/main/test/pages/DatePicker.html @@ -133,6 +133,9 @@

3 months range

1 year range

+

Date picker with clear icon

+ +

Test accessibleName and accessibleNameRef

diff --git a/packages/main/test/pages/DateRangePicker.html b/packages/main/test/pages/DateRangePicker.html index 39475cd3a0c4..4da0dc7d30bd 100644 --- a/packages/main/test/pages/DateRangePicker.html +++ b/packages/main/test/pages/DateRangePicker.html @@ -81,6 +81,9 @@

daterange-picker with value state

Information message. This is a Link. Extra long text used as an information message. Extra long text used as an information message - 2. Extra long text used as an information message - 3.
+

DateRangePicker with clear icon

+ +
Form validation
diff --git a/packages/main/test/pages/DateTimePicker.html b/packages/main/test/pages/DateTimePicker.html index 671958485d9a..9a0fe2c33c4d 100644 --- a/packages/main/test/pages/DateTimePicker.html +++ b/packages/main/test/pages/DateTimePicker.html @@ -200,6 +200,14 @@

display-fomat='medium' value-fomat='yyyy-MM-dd'

+
+ DateTimePicker with clear icon + +
+
Form validation diff --git a/packages/website/docs/_components_pages/main/DatePicker.mdx b/packages/website/docs/_components_pages/main/DatePicker.mdx index 18f6059ca834..d63129ae2e35 100644 --- a/packages/website/docs/_components_pages/main/DatePicker.mdx +++ b/packages/website/docs/_components_pages/main/DatePicker.mdx @@ -9,6 +9,7 @@ import CalendarTypes from "../../_samples/main/DatePicker/CalendarTypes/Calendar import CalendarWeekNumbering from "../../_samples/main/DatePicker/CalendarWeekNumbering/CalendarWeekNumbering.md"; import DatePickerInDifferentTimezone from "../../_samples/main/DatePicker/DatePickerInDifferentTimezone/DatePickerInDifferentTimezone.md"; import CustomFormatting from "../../_samples/main/DatePicker/CustomFormatting/CustomFormatting.md"; +import ClearIcon from "../../_samples/main/DatePicker/ClearIcon/ClearIcon.md"; <%COMPONENT_OVERVIEW%> @@ -43,4 +44,9 @@ You can use the component, the preferred week numbering and first day of week. You can have custom formatting for the display value and the value property. Supported format options are pattern-based on Unicode LDML Date Format notation. For more information, see UTS #35: Unicode Locale Data Markup Language. - \ No newline at end of file + + +### 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. + \ No newline at end of file diff --git a/packages/website/docs/_samples/main/DatePicker/ClearIcon/ClearIcon.md b/packages/website/docs/_samples/main/DatePicker/ClearIcon/ClearIcon.md new file mode 100644 index 000000000000..17798ecc59ab --- /dev/null +++ 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'; + + diff --git a/packages/website/docs/_samples/main/DatePicker/ClearIcon/main.js b/packages/website/docs/_samples/main/DatePicker/ClearIcon/main.js new file mode 100644 index 000000000000..c53f2f7385e7 --- /dev/null +++ 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"; \ No newline at end of file diff --git a/packages/website/docs/_samples/main/DatePicker/ClearIcon/sample.html b/packages/website/docs/_samples/main/DatePicker/ClearIcon/sample.html new file mode 100644 index 000000000000..f274b3c2f941 --- /dev/null +++ b/packages/website/docs/_samples/main/DatePicker/ClearIcon/sample.html @@ -0,0 +1,21 @@ + + + + + + + + Sample + + + + + + + + + + + + + From 2d3348a7237565d43d158dbc39682e0efd1f02bb Mon Sep 17 00:00:00 2001 From: Georgi Damyanov Date: Tue, 10 Feb 2026 12:40:52 +0200 Subject: [PATCH 2/3] refactor: clear code --- packages/main/cypress/specs/DatePicker.cy.tsx | 5 ++--- packages/main/test/pages/DatePicker.html | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/main/cypress/specs/DatePicker.cy.tsx b/packages/main/cypress/specs/DatePicker.cy.tsx index 0aa73bc34cb6..92f92b82710b 100644 --- a/packages/main/cypress/specs/DatePicker.cy.tsx +++ b/packages/main/cypress/specs/DatePicker.cy.tsx @@ -197,21 +197,20 @@ describe("Date Picker Tests", () => { .find(".ui5-input-clear-icon") .should("exist"); - cy.get("@datePicker") .shadow() .find("ui5-datetime-input") .shadow() .find(".ui5-input-clear-icon-wrapper") .click(); - + cy.get("@datePicker") .shadow() .find("ui5-datetime-input") .shadow() .find(".ui5-input-clear-icon") .should("not.exist"); - + cy.get("@datePicker") .should("have.value", ""); }); diff --git a/packages/main/test/pages/DatePicker.html b/packages/main/test/pages/DatePicker.html index ad9ece2e2722..077ee35b8392 100644 --- a/packages/main/test/pages/DatePicker.html +++ b/packages/main/test/pages/DatePicker.html @@ -134,7 +134,7 @@

1 year range

Date picker with clear icon

- +

Test accessibleName and accessibleNameRef

From c45212a08727b971823011685b420f873e8609db Mon Sep 17 00:00:00 2001 From: Georgi Damyanov Date: Mon, 16 Feb 2026 16:31:19 +0200 Subject: [PATCH 3/3] refactor: remove the logic for clear icon click --- packages/main/src/DatePicker.ts | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/packages/main/src/DatePicker.ts b/packages/main/src/DatePicker.ts index ab77011069d8..4422e1d8ab35 100644 --- a/packages/main/src/DatePicker.ts +++ b/packages/main/src/DatePicker.ts @@ -370,7 +370,7 @@ class DatePicker extends DateComponentBase implements IFormInputElement { * Defines whether the clear icon of the input will be shown. * @default false * @public - * @since 2.16.0 + * @since 2.20.0 */ @property({ type: Boolean }) showClearIcon = false; @@ -664,14 +664,7 @@ class DatePicker extends DateComponentBase implements IFormInputElement { * The ui5-input "input" event handler - fire input even when the user types * @protected */ - _onInputInput(e: CustomEvent) { - const inputValue = (e.target as DatePicker).value; - if (this.showClearIcon && inputValue === "" && e.detail.inputType === "") { - this._handleClearIconClick(); - - return; - } - + _onInputInput(e: Event) { this._updateValueAndFireEvents((e.target as DatePicker).value, false, ["input"], false); }