Skip to content

[ui5-calendar]: excessive DateFormat instance creation causes memory and performance issues #13414

@nnaydenow

Description

@nnaydenow

Bug Description

Description

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

  1. Edit packages/main/test/pages/Calendar.html to contain only one <ui5-calendar>:
<body>
   <ui5-calendar></ui5-calendar>
</body>
  1. In packages/localization/src/DateFormat.ts, add a console.log inside getDateInstance() to log each created instance:
static getDateInstance(oFormatOptionsOrLocale?: DateFormatOptions | LocaleWrapped, oLocale?: LocaleWrapped): DateFormat {
      if (oFormatOptionsOrLocale instanceof LocaleWrapped) {
         return DateFormatWrapped.getDateInstance(undefined, oFormatOptionsOrLocale);
      }
      const nativeLocale = oLocale ?? new LocaleWrapped(getLocale().toString());
      const date = DateFormatWrapped.getDateInstance(oFormatOptionsOrLocale, nativeLocale);
      console.log("DateFormat instance created", date);
      if (!window.dateformatinstances) {
         window.dateformatinstances = new Set();
      }
      window.dateformatinstances.add(date);
      return date;
}
  1. Open the test page in the browser and open DevTools Console.

  2. Interact with the calendar (navigate between months, open year/month picker) and observe how many DateFormat instance created log
    lines appear.

  3. Run the following in the console to check the total count:

console.log("Total DateFormat instances:", window.dateformatinstances.size);

Observe the impact with 20 calendars

  1. Revert Calendar.html to render 20 calendars:
<body>
   <ui5-calendar></ui5-calendar>
   <ui5-calendar></ui5-calendar>
   <!-- repeat until 20 -->
</body>
  1. Reload the page and observe the console — the instance count grows proportionally.

  2. 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.

Metadata

Metadata

Assignees

Labels

TOPIC BbugThis issue is a bug in the code

Type

Projects

Status

New Issues

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions