feat(ui5-date/time*): introduce translatable fallback placeholder (#11739)

Previously, when no `placeholder` was provided in our Date/Time components, the default placeholder simply displayed the `formatPattern` string (e.g., `MMM d, y`, `dd/MM/yyyy - dd/MM/yyyy`).

With this change, if no `placeholder` is set, the default placeholder now displays a translatable example value in the correct `formatPattern`/`displayFormat`— using the last value of the relevant period (such as the last day of the year, last hour of the day, etc.).

Examples:

`e.g. 23:59:59`
`e.g. Dec 31, 2025`

Author: hinzzx

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

@@ -849,7 +849,7 @@ describe("Date Picker Tests", () => {
 		cy.get("[ui5-date-picker]")
 			.as("datePicker")
 			.ui5DatePickerGetInnerInput()
-			.should("have.attr", "placeholder", "MMM d, y");
+			.should("have.attr", "placeholder", "e.g. Dec 31, 2025");
 
 		cy.get<DatePicker>("@datePicker")
 			.should("not.have.attr", "placeholder");

packages/main/src/DatePicker.ts

@@ -8,6 +8,7 @@ import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
 import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
+import UI5Date from "@ui5/webcomponents-localization/dist/dates/UI5Date.js";
 import modifyDateBy from "@ui5/webcomponents-localization/dist/dates/modifyDateBy.js";
 import getRoundedTimestamp from "@ui5/webcomponents-localization/dist/dates/getRoundedTimestamp.js";
 import getTodayUTCTimestamp from "@ui5/webcomponents-localization/dist/dates/getTodayUTCTimestamp.js";
@@ -38,6 +39,7 @@ import "@ui5/webcomponents-icons/dist/appointment-2.js";
 import {
 	DATEPICKER_OPEN_ICON_TITLE,
 	DATEPICKER_DATE_DESCRIPTION,
+	DATETIME_COMPONENTS_PLACEHOLDER_PREFIX,
 	INPUT_SUGGESTIONS_TITLE,
 	FORM_TEXTFIELD_REQUIRED,
 	DATEPICKER_POPOVER_ACCESSIBLE_NAME,
@@ -655,11 +657,22 @@ class DatePicker extends DateComponentBase implements IFormInputElement {
 		return this.getFormat().oFormatOptions.pattern as string;
 	}
 
+	get _lastDayOfTheYear() {
+		const currentYear = UI5Date.getInstance().getFullYear();
+		const lastDayOfTheYear = UI5Date.getInstance(currentYear, 11, 31, 23, 59, 59);
+		return this.getFormat().format(lastDayOfTheYear);
+	}
+
 	/**
 	 * @protected
 	 */
 	get _placeholder() {
-		return this.placeholder !== undefined ? this.placeholder : this._displayFormat;
+		if (this.placeholder) {
+			return this.placeholder;
+		}
+
+		// translatable placeholder – for example "e.g. 2025-12-31"
+		return `${DatePicker.i18nBundle.getText(DATETIME_COMPONENTS_PLACEHOLDER_PREFIX)} ${this._lastDayOfTheYear}`;
 	}
 
 	get _headerTitleText() {

packages/main/src/DateRangePicker.ts

@@ -3,11 +3,13 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
 import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
+import UI5Date from "@ui5/webcomponents-localization/dist/dates/UI5Date.js";
 import modifyDateBy from "@ui5/webcomponents-localization/dist/dates/modifyDateBy.js";
 import getTodayUTCTimestamp from "@ui5/webcomponents-localization/dist/dates/getTodayUTCTimestamp.js";
 import {
 	DATERANGE_DESCRIPTION,
 	DATERANGEPICKER_POPOVER_ACCESSIBLE_NAME,
+	DATETIME_COMPONENTS_PLACEHOLDER_PREFIX,
 } from "./generated/i18n/i18n-defaults.js";
 import DateRangePickerTemplate from "./DateRangePickerTemplate.js";
 
@@ -187,11 +189,24 @@ class DateRangePicker extends DatePicker implements IFormInputElement {
 		return this._calendarSelectedDates[1] || "";
 	}
 
+	get _lastDateRangeForTheCurrentYear() {
+		const currentYear = UI5Date.getInstance().getFullYear();
+		const lastDayOfTheYear = UI5Date.getInstance(currentYear, 11, 31, 23, 59, 59);
+		const sevenDaysBeforeLastDayOfYear = UI5Date.getInstance(currentYear, 11, 24, 23, 59, 59);
+
+		return `${this.getFormat().format(sevenDaysBeforeLastDayOfYear)} ${this._effectiveDelimiter} ${this.getFormat().format(lastDayOfTheYear)}`;
+	}
+
 	/**
 	 * @override
 	 */
 	get _placeholder() {
-		return this.placeholder !== undefined ? this.placeholder : `${this._displayFormat} ${this._effectiveDelimiter} ${this._displayFormat}`;
+		if (this.placeholder) {
+			return this.placeholder;
+		}
+
+		// translatable placeholder – for example "e.g. 2025-12-27 - 2025-12-31"
+		return `${DateRangePicker.i18nBundle.getText(DATETIME_COMPONENTS_PLACEHOLDER_PREFIX)} ${this._lastDateRangeForTheCurrentYear}`;
 	}
 
 	/**

packages/main/src/TimePicker.ts

@@ -45,6 +45,7 @@ import {
 	TIMEPICKER_CANCEL_BUTTON,
 	TIMEPICKER_INPUT_DESCRIPTION,
 	TIMEPICKER_POPOVER_ACCESSIBLE_NAME,
+	DATETIME_COMPONENTS_PLACEHOLDER_PREFIX,
 	FORM_TEXTFIELD_REQUIRED,
 	VALUE_STATE_ERROR,
 	VALUE_STATE_INFORMATION,
@@ -374,11 +375,22 @@ class TimePicker extends UI5Element implements IFormInputElement {
 		return this.getFormat().parse(this._effectiveValue) as Date;
 	}
 
+	get _lastAvailableTime() {
+		const date = UI5Date.getInstance();
+		date.setHours(23, 59, 59, 999);
+		return this.getFormat().format(date);
+	}
+
 	/**
 	 * @protected
 	 */
 	get _placeholder() {
-		return this.placeholder !== undefined ? this.placeholder : this._displayFormat;
+		if (this.placeholder) {
+			return this.placeholder;
+		}
+
+		// translatable placeholder – for example "e.g. 23:59:59"
+		return `${TimePicker.i18nBundle.getText(DATETIME_COMPONENTS_PLACEHOLDER_PREFIX)} ${this._lastAvailableTime}`;
 	}
 
 	/**

packages/main/src/i18n/messagebundle.properties

@@ -187,6 +187,9 @@ DATERANGE_DESCRIPTION=Date Range Input
 #XACT: Aria information for the Date Picker popover
 DATEPICKER_POPOVER_ACCESSIBLE_NAME=Choose Date
 
+#XTXT: Date Picker placeholder prefix
+DATETIME_COMPONENTS_PLACEHOLDER_PREFIX=e.g.
+
 #XACT: Aria information for the Date Time Picker popover
 DATETIMEPICKER_POPOVER_ACCESSIBLE_NAME=Choose Date and Time