diff --git a/web_src/js/webcomponents/absolute-date.js b/web_src/js/webcomponents/absolute-date.js
index cea9f6da6572..88fe410b7763 100644
--- a/web_src/js/webcomponents/absolute-date.js
+++ b/web_src/js/webcomponents/absolute-date.js
@@ -1,5 +1,10 @@
 import {Temporal} from 'temporal-polyfill';
 
+export function toAbsoluteLocaleDate(str, lang, opts) {
+  const plainDate = Temporal.PlainDate.from(str);
+  return plainDate.toLocaleString(lang ?? [], opts);
+}
+
 window.customElements.define('absolute-date', class extends HTMLElement {
   static observedAttributes = ['date', 'year', 'month', 'weekday', 'day'];
 
@@ -13,9 +18,8 @@ window.customElements.define('absolute-date', class extends HTMLElement {
       '';
 
     // only use the first 10 characters, e.g. the `yyyy-mm-dd` part
-    const plainDate = Temporal.PlainDate.from(this.getAttribute('date').substring(0, 10));
     if (!this.shadowRoot) this.attachShadow({mode: 'open'});
-    this.shadowRoot.textContent = plainDate.toLocaleString(lang ?? [], {
+    this.shadowRoot.textContent = toAbsoluteLocaleDate(this.getAttribute('date').substring(0, 10), lang, {
       ...(year && {year}),
       ...(month && {month}),
       ...(weekday && {weekday}),
diff --git a/web_src/js/webcomponents/absolute-date.test.js b/web_src/js/webcomponents/absolute-date.test.js
new file mode 100644
index 000000000000..ba04451b6566
--- /dev/null
+++ b/web_src/js/webcomponents/absolute-date.test.js
@@ -0,0 +1,15 @@
+import {toAbsoluteLocaleDate} from './absolute-date.js';
+
+test('toAbsoluteLocaleDate', () => {
+  expect(toAbsoluteLocaleDate('2024-03-15', 'en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  })).toEqual('March 15, 2024');
+
+  expect(toAbsoluteLocaleDate('2024-03-15', 'de-DE', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  })).toEqual('15. März 2024');
+});