Date and Time zoom support - #13964
Draft
Todor-ads wants to merge 6 commits into
Draft
Conversation
- DateComponentBase: _highZoom property, _isHighZoom(), zoom watch lifecycle - TimePicker: same zoom detection (standalone, no shared base) - DateHighZoomInputs: new internal component with Year/Month/Day selects, YearPicker dialog, validate(), syncStartDate/EndDate(), full public API - YearPicker: _showHeader, _rowSize, _pageSize properties; CalendarHeader CSS included for standalone use - DatePicker: _highZoom integration — DateHighZoomInputs replaces Calendar in popover content, OK/Cancel footer, input click handling at zoom
…r improvements - DatePicker: _hzOkEnabled (disabled until valid), _hzActiveCalType toggle, secondary calendar type icon button in header, _onHzFocusIn to open picker - DateHighZoomInputs: minDate/maxDate as ISO strings, _parseISO without TZ issues, _gregYear/Month/Day source-of-truth for calendar type conversion, _applyCalendarTypeToDisplay using Intl.DateTimeFormat, Intl-based month names - YearPicker: _rowSize, _pageSize, _showHeader properties; CalendarHeader CSS included; CSS item width driven by --_ui5_yp_item_width custom property
- TimePicker: showHeader includes _highZoom, _togglePicker syncs _highZoom, _handleInputClick opens picker at zoom, _onHzFocusIn handler, _onZoomChange reopens picker on resize - TimePickerTemplate: icon hidden at zoom, onFocusIn uses _onHzFocusIn - TimePickerPopoverTemplate: TimeSelectionInputs with _showLabels at zoom - TimeSelectionInputs: _showLabels property, Hz label getters, Label import - TimeSelectionInputsTemplate: labeled layout with Hours/Minutes/Seconds labels, separators between inputs - TimeSelectionInputs.css: --labeled flex-wrap layout, separator centering - i18n: TIMEPICKER_HZ_HOURS/MINUTES/SECONDS keys
At 200% zoom (viewport ≤ 320px), ui5-calendar renders a DatePicker input instead of the full calendar grid. Zoom watching is wired via super.onEnterDOM/onExitDOM (DateComponentBase infrastructure).
Todor-ads
had a problem deploying
to
netlify-preview
August 21, 2026 09:33 — with 
GitHub Actions
Failure
GitHub Actions
Failure
GDamyanov
reviewed
Aug 21, 2026
GDamyanov
left a comment
GDamyanov
left a comment
Contributor
There was a problem hiding this comment.
Could we also write cypress tests for high zoom?
| @@ -0,0 +1,12 @@ | |||
| enum DateHighZoomInputsMode { | |||
| _hzActiveCalType?: `${CalendarType}`; | ||
|
|
||
| override get _shouldWatchZoom(): boolean { | ||
| return true; |
Contributor
There was a problem hiding this comment.
Do we need this in desktop devices?
|
|
||
| DATEPICKER_RANGE_UNDERFLOW=Enter a date higher than the minimum value of {0}. | ||
|
|
||
| DATEPICKER_HZ_YEAR_LABEL=Year: |
| } | ||
|
|
||
| .ui5-dhzi-root { | ||
| padding: 0.5rem; |
Contributor
There was a problem hiding this comment.
could we think of more descriptive class names?
| width: 100%; | ||
| --_ui5_calendar_width: 100%; | ||
| --_ui5_calendar_height: auto; | ||
| } |
Contributor
There was a problem hiding this comment.
overriding css variables here is not a good practise.
|
|
||
| onExitDOM() { | ||
| super.onExitDOM(); | ||
| ResizeHandler.deregister(document.body, this._handleResizeBound); |
Contributor
There was a problem hiding this comment.
Same logic should be applied also for super.onExitDOM();
| value={this._hzDatePickerValue} | ||
| formatPattern={this._formatPattern} | ||
| primaryCalendarType={this.primaryCalendarType} | ||
| secondaryCalendarType={this.secondaryCalendarType} |
Contributor
There was a problem hiding this comment.
We should use the private getters for calendarTypes which comes from DateComponentBase
| import slimArowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js"; | ||
|
|
||
| export interface CalendarHeaderHost { | ||
| _previousButtonDisabled: boolean; |
Contributor
There was a problem hiding this comment.
Could we extract this interface in other file since it is used in other places. Also it will be good to split all the properties into other interfaces
| } | ||
|
|
||
| _isHighZoom(): boolean { | ||
| return isHighZoom(); |
Contributor
There was a problem hiding this comment.
Do we need this property since we have _highZoom
| function defaultContent(this: DatePicker) { | ||
| if (this._highZoom) { | ||
| const toISO = (cd: CalendarDateLocale) => | ||
| `${String(cd.getYear()).padStart(4, "0")}-${String(cd.getMonth() + 1).padStart(2, "0")}-${String(cd.getDate()).padStart(2, "0")}`; |
Contributor
There was a problem hiding this comment.
toIso is duplicated, could we extract the logic?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.