Date and Time zoom support

packages/main/src/Calendar.ts

@@ -387,7 +387,12 @@ class Calendar extends CalendarPart {
 		this._handleResizeBound = this._handleResize.bind(this);
 	}
 
+	override get _shouldWatchZoom(): boolean {
+		return true;
+	}
+
 	onEnterDOM() {
+		super.onEnterDOM();
 		ResizeHandler.register(document.body, this._handleResizeBound);
 		this._handleResize();
 	}
@@ -421,6 +426,7 @@ class Calendar extends CalendarPart {
 	}
 
 	onExitDOM() {
+		super.onExitDOM();
 		ResizeHandler.deregister(document.body, this._handleResizeBound);
 	}
 
@@ -948,6 +954,21 @@ class Calendar extends CalendarPart {
 		this._selectedItemType = "None";
 	}
 
+	get _hzDatePickerValue(): string {
+		const ts = this._selectedDatesTimestamps[0];
+		if (!ts) { return ""; }
+		return this.getFormat().format(UI5Date.getInstance(ts * 1000), true);
+	}
+
+	_onHzDatePickerChange(e: CustomEvent<{ value: string, valid: boolean }>) {
+		if (!e.detail.valid) { return; }
+		const parsed = this.getFormat().parse(e.detail.value, true) as Date | null;
+		if (!parsed) { return; }
+		const timestamp = CalendarDateComponent.fromLocalJSDate(parsed).valueOf() / 1000;
+		this.timestamp = timestamp;
+		this._fireEventAndUpdateSelectedDates([timestamp]);
+	}
+
 	get _specialDates() {
 		return this.getSlottedNodes<SpecialCalendarDate>("specialDates");
 	}

packages/main/src/CalendarHeaderTemplate.tsx

@@ -1,9 +1,56 @@
-import type Calendar from "./Calendar.js";
 import Icon from "./Icon.js";
 
 import slimArowLeft from "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
 import slimArowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 
+export interface CalendarHeaderHost {
+	_previousButtonDisabled: boolean;
+	_nextButtonDisabled: boolean;
+	_portraitView: boolean;
+	_isHeaderMonthButtonHidden: boolean;
+	_isHeaderYearButtonHidden: boolean;
+	_isHeaderYearRangeButtonHidden: boolean;
+	_headerMonthButtonText?: string;
+	_headerYearButtonText?: string;
+	_headerYearButtonTextSecType?: string;
+	_headerYearRangeButtonText?: string;
+	_headerYearRangeButtonTextSecType?: string;
+	secondMonthButtonText?: string;
+	hasSecondaryCalendarType: boolean;
+	onPrevButtonClick: (e: MouseEvent) => void;
+	onPrevButtonKeyDown: (e: KeyboardEvent) => void;
+	onPrevButtonKeyUp: (e: KeyboardEvent) => void;
+	onNextButtonClick: (e: MouseEvent) => void;
+	onNextButtonKeyDown: (e: KeyboardEvent) => void;
+	onNextButtonKeyUp: (e: KeyboardEvent) => void;
+	onHeaderMonthButtonPress?: (e: Event) => void;
+	onMonthButtonKeyDown?: (e: KeyboardEvent) => void;
+	onMonthButtonKeyUp?: (e: KeyboardEvent) => void;
+	onHeaderYearButtonPress?: (e: Event) => void;
+	onYearButtonKeyDown?: (e: KeyboardEvent) => void;
+	onYearButtonKeyUp?: (e: KeyboardEvent) => void;
+	onHeaderYearRangeButtonPress?: (e: Event) => void;
+	onYearRangeButtonKeyDown?: (e: KeyboardEvent) => void;
+	onYearRangeButtonKeyUp?: (e: KeyboardEvent) => void;
+	accInfo: {
+		ariaLabelMonthButton?: string;
+		ariaLabelYearButton?: string;
+		ariaLabelYearRangeButton?: string;
+		ariaLabelNextButton?: string;
+		ariaLabelPrevButton?: string;
+		keyShortcutMonthButton?: string;
+		keyShortcutYearButton?: string;
+		keyShortcutYearRangeButton?: string;
+		keyShortcutNextButton?: string;
+		keyShortcutPrevButton?: string;
+		tooltipMonthButton?: string;
+		tooltipYearButton?: string;
+		tooltipYearRangeButton?: string;
+		tooltipNextButton?: string;
+		tooltipPrevButton?: string;
+	};
+}
+
 interface CalendarHeaderOptions {
 	headerText?: {
 		monthText: string;
@@ -16,7 +63,7 @@ interface CalendarHeaderOptions {
 	isMultiple?: boolean;
 }
 
-export default function CalendarHeaderTemplate(this: Calendar, options?: CalendarHeaderOptions) {
+export default function CalendarHeaderTemplate(this: CalendarHeaderHost, options?: CalendarHeaderOptions) {
 	const headerText = options?.headerText;
 	const isFirst = options?.isFirst ?? true;
 	const isLast = options?.isLast ?? true;
@@ -41,7 +88,7 @@ export default function CalendarHeaderTemplate(this: Calendar, options?: Calenda
 	);
 }
 
-function renderPrevButton(this: Calendar, isFirst: boolean, isMultiple: boolean) {
+function renderPrevButton(this: CalendarHeaderHost, isFirst: boolean, isMultiple: boolean) {
 	if (!isFirst && isMultiple) {
 		return <div class="ui5-calheader-spacer"></div>;
 	}
@@ -70,7 +117,7 @@ function renderPrevButton(this: Calendar, isFirst: boolean, isMultiple: boolean)
 }
 
 function renderMiddleButtons(
-	this: Calendar,
+	this: CalendarHeaderHost,
 	headerText: {
 		monthText: string;
 		yearText: string;
@@ -146,7 +193,7 @@ function renderMiddleButtons(
 	);
 }
 
-function renderNextButton(this: Calendar, isFirst: boolean, isLast: boolean, isMultiple: boolean) {
+function renderNextButton(this: CalendarHeaderHost, isFirst: boolean, isLast: boolean, isMultiple: boolean) {
 	// In landscape mode, show next button only on last calendar
 	const isVertical = this._portraitView;
 	const shouldShowNextButton = !isMultiple || (isVertical ? isFirst : isLast);

packages/main/src/CalendarTemplate.tsx

@@ -5,8 +5,23 @@ import YearPicker from "./YearPicker.js";
 import YearRangePicker from "./YearRangePicker.js";
 import CalendarHeaderTemplate from "./CalendarHeaderTemplate.js";
 import CalendarSelectionMode from "./types/CalendarSelectionMode.js";
+import DatePicker from "./DatePicker.js";
 
 export default function CalendarTemplate(this: Calendar) {
+	if (this._highZoom && this.selectionMode === "Single") {
+		return (
+			<DatePicker
+				value={this._hzDatePickerValue}
+				formatPattern={this._formatPattern}
+				primaryCalendarType={this.primaryCalendarType}
+				secondaryCalendarType={this.secondaryCalendarType}
+				minDate={this.minDate}
+				maxDate={this.maxDate}
+				onChange={this._onHzDatePickerChange}
+			/>
+		);
+	}
+
 	const showMultipleMonths = this._monthsToShow > 1 && !this._isDayPickerHidden;
 	const shouldRenderSeparateHeaders = this._isDefaultHeaderModeInMultipleMonths && !this._portraitView;
 	const shouldRenderInlineHeaders = this._isDefaultHeaderModeInMultipleMonths && this._portraitView;

packages/main/src/DateComponentBase.ts

@@ -13,6 +13,8 @@ import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDat
 import { getMaxCalendarDate, getMinCalendarDate } from "@ui5/webcomponents-localization/dist/dates/ExtremeDates.js";
 import UI5Date from "@ui5/webcomponents-localization/dist/dates/UI5Date.js";
 import type CalendarWeekNumbering from "./types/CalendarWeekNumbering.js";
+import { isHighZoom, startHighZoomWatch } from "./util/HighZoomWatch.js";
+import type { HighZoomWatcher } from "./util/HighZoomWatch.js";
 
 /**
  * @class
@@ -124,10 +126,63 @@ class DateComponentBase extends UI5Element {
 	_cachedMinDate?: { key: string, value: CalendarDate };
 	_cachedMaxDate?: { key: string, value: CalendarDate };
 
+	/**
+	 * True when the effective viewport width is ≤ 320 px (corresponds to ~200% browser zoom on a phone).
+	 * @private
+	 */
+	@property({ type: Boolean, noAttribute: true })
+	_highZoom = false;
+
+	_zoomWatcher?: HighZoomWatcher;
+
 	constructor() {
 		super();
 	}
 
+	/**
+	 * Whether this component reacts to high-zoom (switches its UI at ≤320px). Only the
+	 * top-level pickers and the standalone Calendar do; the internal sub-pickers
+	 * (day/month/year) inherit this base but never consume _highZoom, so they opt out
+	 * to avoid attaching redundant resize listeners.
+	 */
+	get _shouldWatchZoom(): boolean {
+		return false;
+	}
+
+	onEnterDOM() {
+		if (!this._shouldWatchZoom) { return; }
+		this._highZoom = isHighZoom();
+		this._startZoomWatch();
+	}
+
+	onExitDOM() {
+		this._stopZoomWatch();
+	}
+
+	_isHighZoom(): boolean {
+		return isHighZoom();
+	}
+
+	_startZoomWatch() {
+		this._stopZoomWatch();
+		this._zoomWatcher = startHighZoomWatch(
+			() => this._highZoom,
+			bHighZoom => {
+				// _highZoom is a reactive @property — changing it re-renders the
+				// component and swaps the picker content / input icon accordingly.
+				this._highZoom = bHighZoom;
+			},
+			() => this.isConnected,
+		);
+	}
+
+	_stopZoomWatch() {
+		if (this._zoomWatcher) {
+			this._zoomWatcher.stop();
+			this._zoomWatcher = undefined;
+		}
+	}
+
 	get _primaryCalendarType() {
 		const localeData = getCachedLocaleDataInstance(getLocale());
 		return this.primaryCalendarType || getCalendarType() || localeData.getPreferredCalendarType();