Skip to content

fix(ui5-date-picker): correct mobile dialog header styling and text #13100

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hinzzx merged 2 commits into from
Mar 10, 2026
+11 −3
Merged

fix(ui5-date-picker): correct mobile dialog header styling and text #13100

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cb6897f
fix(ui5-date-picker): correct mobile dialog header styling and text
hinzzx Feb 16, 2026
27ebdc0
correct header text according to sepc
hinzzx Feb 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/main/src/DatePicker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ import {
DATEPICKER_OPEN_ICON_TITLE_OPENED,
DATEPICKER_DATE_DESCRIPTION,
DATETIME_COMPONENTS_PLACEHOLDER_PREFIX,
INPUT_SUGGESTIONS_TITLE,
DATEPICKER_MOBILE_HEADER_TITLE,
DATEPICKER_POPOVER_ACCESSIBLE_NAME,
VALUE_STATE_ERROR,
VALUE_STATE_INFORMATION,
Expand Down Expand Up @@ -852,7 +852,7 @@ class DatePicker extends DateComponentBase implements IFormInputElement {
}

get _headerTitleText() {
return this.ariaLabelText || DatePicker.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
return this.ariaLabelText || DatePicker.i18nBundle.getText(DATEPICKER_MOBILE_HEADER_TITLE);
}

get showHeader() {
Expand Down
5 changes: 4 additions & 1 deletion packages/main/src/i18n/messagebundle.properties
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,6 +226,9 @@ DATEPICKER_OPEN_ICON_TITLE_OPENED=Close Picker
#XACT: Aria information for the Date Picker
DATEPICKER_DATE_DESCRIPTION=Date Input

#XFLD: DatePicker dialog header title on mobile
DATEPICKER_MOBILE_HEADER_TITLE=Enter date

DATEPICKER_VALUE_MISSING=Fill in the date value in the format: {0}.

DATEPICKER_PATTERN_MISSMATCH=This format is not supported. Fill in the date and time range values in the format: {0}.
Expand Down Expand Up @@ -257,7 +260,7 @@ DATERANGE_OVERFLOW=Fill in a value that is lower than the set max. value of {0}.
DATERANGE_UNDERFLOW=Fill in a value that is higher than the set min. value of {0}.

#XACT: Aria information for the Date Picker popover
DATEPICKER_POPOVER_ACCESSIBLE_NAME=Choose Date for {0}
DATEPICKER_POPOVER_ACCESSIBLE_NAME=Enter date for {0}

#XTXT: Date Picker placeholder prefix
DATETIME_COMPONENTS_PLACEHOLDER_PREFIX=e.g.
Expand Down
5 changes: 5 additions & 0 deletions packages/main/src/themes/DatePickerPopover.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,3 +37,8 @@
.ui5-dt-picker-action {
margin: 0.25rem;
}

[ui5-responsive-popover]::part(header) {
font-family: var(--_ui5_button_fontFamily);
text-align: left;
}
Loading