You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The ui5-calendar component (and its sub-components DayPicker, YearPicker, YearRangePicker) creates a large number of DateFormat
instances on every render cycle without caching or reusing them. This leads to high memory consumption and noticeable page lag when
multiple calendar instances are present on the same page.
A single Calendar render cycle can create 8–15+ fresh DateFormat instances depending on which picker is visible and whether a
secondary calendar type is configured. With multiple calendars on the page this compounds quickly, causing visible lag when interacting
with the calendar.
Screen.Recording.2026-04-14.at.16.01.10.mov
Steps to Reproduce
Observe instance creation for a single calendar
Edit packages/main/test/pages/Calendar.html to contain only one <ui5-calendar>:
<body><ui5-calendar></ui5-calendar></body>
In packages/localization/src/DateFormat.ts, add a console.log inside getDateInstance() to log each created instance:
<body><ui5-calendar></ui5-calendar><ui5-calendar></ui5-calendar><!-- repeat until 20 --></body>
Reload the page and observe the console — the instance count grows proportionally.
Interact with any calendar and notice the lag — each interaction triggers a new batch of DateFormat instances across all visible
sub-components.
Expected Behavior
DateFormat instances with identical configuration (same format pattern and calendar type) should be created once and reused across
renders — consistent with the existing caching pattern in DateComponentBase.getISOFormat().
Affected Component
ui5-calendar
Isolated Example
No response
Steps to Reproduce
...
Log Output, Stack Trace or Screenshots
No response
Priority
None
UI5 Web Components Version
nightly
Browser
Chrome
Operating System
No response
Additional Context
No response
Organization
No response
Declaration
I’m not disclosing any internal or sensitive information.
Bug Description
Description
The
ui5-calendarcomponent (and its sub-componentsDayPicker,YearPicker,YearRangePicker) creates a large number ofDateFormatinstances on every render cycle without caching or reusing them. This leads to high memory consumption and noticeable page lag when
multiple calendar instances are present on the same page.
A single Calendar render cycle can create 8–15+ fresh
DateFormatinstances depending on which picker is visible and whether asecondary calendar type is configured. With multiple calendars on the page this compounds quickly, causing visible lag when interacting
with the calendar.
Screen.Recording.2026-04-14.at.16.01.10.mov
Steps to Reproduce
Observe instance creation for a single calendar
packages/main/test/pages/Calendar.htmlto contain only one<ui5-calendar>:packages/localization/src/DateFormat.ts, add aconsole.loginsidegetDateInstance()to log each created instance:Open the test page in the browser and open DevTools Console.
Interact with the calendar (navigate between months, open year/month picker) and observe how many
DateFormat instance createdloglines appear.
Run the following in the console to check the total count:
Observe the impact with 20 calendars
Calendar.htmlto render 20 calendars:Reload the page and observe the console — the instance count grows proportionally.
Interact with any calendar and notice the lag — each interaction triggers a new batch of
DateFormatinstances across all visiblesub-components.
Expected Behavior
DateFormatinstances with identical configuration (same format pattern and calendar type) should be created once and reused acrossrenders — consistent with the existing caching pattern in
DateComponentBase.getISOFormat().Affected Component
ui5-calendar
Isolated Example
No response
Steps to Reproduce
...
Log Output, Stack Trace or Screenshots
No response
Priority
None
UI5 Web Components Version
nightly
Browser
Chrome
Operating System
No response
Additional Context
No response
Organization
No response
Declaration