From 9e9f79abce315284f768a241e88fade144557eba Mon Sep 17 00:00:00 2001 From: tsanislavgatev Date: Wed, 26 Nov 2025 10:22:01 +0200 Subject: [PATCH 1/4] feat(ui5-datepicker): add clear icon --- packages/main/src/DatePickerInputTemplate.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/main/src/DatePickerInputTemplate.tsx b/packages/main/src/DatePickerInputTemplate.tsx index d1cc46e08b54..bf27d8625422 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} onSubmit={this._onInputSubmit} onKeyDown={this._onkeydown} + showClearIcon={true} > {!this.open && this.valueStateMessage.length > 0 && From dafa746e3f7b9aa127d22b06ad6bd70a0c8b47f8 Mon Sep 17 00:00:00 2001 From: tsanislavgatev Date: Wed, 26 Nov 2025 11:29:49 +0200 Subject: [PATCH 2/4] feat(ui5-datepicker): add clear icon --- packages/main/src/DatePicker.ts | 4 ++++ packages/main/src/DatePickerInputTemplate.tsx | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/main/src/DatePicker.ts b/packages/main/src/DatePicker.ts index 9884dbce8ae8..7704f3e1446b 100644 --- a/packages/main/src/DatePicker.ts +++ b/packages/main/src/DatePicker.ts @@ -671,6 +671,10 @@ class DatePicker extends DateComponentBase implements IFormInputElement { return this.isValidValue(value) && this.isInValidRange(value); } + get showClearIcon() { + return 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 bf27d8625422..7864caf60408 100644 --- a/packages/main/src/DatePickerInputTemplate.tsx +++ b/packages/main/src/DatePickerInputTemplate.tsx @@ -28,7 +28,7 @@ export default function DatePickerInputTemplate(this: DatePicker) { onInput={this._onInputInput} onSubmit={this._onInputSubmit} onKeyDown={this._onkeydown} - showClearIcon={true} + showClearIcon={this.showClearIcon} > {!this.open && this.valueStateMessage.length > 0 && From f8442c2006d71e809fa717aa105787c939d3f3aa Mon Sep 17 00:00:00 2001 From: tsanislavgatev Date: Tue, 2 Dec 2025 15:13:52 +0200 Subject: [PATCH 3/4] feat(ui5-date-picker): style clear icon --- packages/main/src/DatePicker.ts | 17 +++++++++++++---- 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/DatePicker.html | 2 +- packages/main/test/pages/DateRangePicker.html | 2 +- packages/main/test/pages/DateTimePicker.html | 2 +- 7 files changed, 33 insertions(+), 7 deletions(-) diff --git a/packages/main/src/DatePicker.ts b/packages/main/src/DatePicker.ts index 7704f3e1446b..28a836b9d175 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 1.16.0 + */ + @property({ type: Boolean }) + showClearIcon = false; + @property({ type: Object }) _respPopoverConfig?: object; @@ -671,10 +680,6 @@ class DatePicker extends DateComponentBase implements IFormInputElement { return this.isValidValue(value) && this.isInValidRange(value); } - get showClearIcon() { - return true; - } - /** * Checks if the provided value is valid and within valid range. * @protected @@ -882,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/themes/DatePicker.css b/packages/main/src/themes/DatePicker.css index 11ceddfe6386..5ade497e9c46 100644 --- 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; } \ 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/DatePicker.html b/packages/main/test/pages/DatePicker.html index 17d3689a3969..8cbc6067fd5f 100644 --- a/packages/main/test/pages/DatePicker.html +++ b/packages/main/test/pages/DatePicker.html @@ -76,7 +76,7 @@

format-pattern - 'short'

format-pattern - 'long'

- +

format-pattern - 'QQQ yyyy, MMM dd'

diff --git a/packages/main/test/pages/DateRangePicker.html b/packages/main/test/pages/DateRangePicker.html index 39475cd3a0c4..dd7af3fb3504 100644 --- a/packages/main/test/pages/DateRangePicker.html +++ b/packages/main/test/pages/DateRangePicker.html @@ -33,7 +33,7 @@ - +

daterange-picker with delimiter @

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

diff --git a/packages/main/test/pages/DateTimePicker.html b/packages/main/test/pages/DateTimePicker.html index 00e870f463e8..3848b8a8afdc 100644 --- a/packages/main/test/pages/DateTimePicker.html +++ b/packages/main/test/pages/DateTimePicker.html @@ -20,7 +20,7 @@ Deadline - +
DateTimePicker
From e66fffb87bdc991ee4a454bd42f739b2d6fead00 Mon Sep 17 00:00:00 2001 From: tsanislavgatev Date: Tue, 16 Dec 2025 11:22:35 +0200 Subject: [PATCH 4/4] feat(ui5-date-picker): add playground sample --- .../_components_pages/main/DatePicker.mdx | 6 ++++++ .../main/DatePicker/ClearIcon/ClearIcon.md | 4 ++++ .../main/DatePicker/ClearIcon/main.js | 2 ++ .../main/DatePicker/ClearIcon/sample.html | 21 +++++++++++++++++++ 4 files changed, 33 insertions(+) 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/website/docs/_components_pages/main/DatePicker.mdx b/packages/website/docs/_components_pages/main/DatePicker.mdx index 18f6059ca834..7b06bd321519 100644 --- 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. + + ### States 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..d93393a603cc --- /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"; 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 + + + + + + + + + + + + +