diff --git a/package-lock.json b/package-lock.json
index 9ed28e671a..1b8ed2ddc2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -47,6 +47,7 @@
         "sortablejs": "1.15.2",
         "swagger-ui-dist": "5.12.0",
         "tailwindcss": "3.4.1",
+        "temporal-polyfill": "0.2.3",
         "throttle-debounce": "5.0.0",
         "tinycolor2": "1.6.0",
         "tippy.js": "6.3.7",
@@ -11524,6 +11525,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/temporal-polyfill": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/temporal-polyfill/-/temporal-polyfill-0.2.3.tgz",
+      "integrity": "sha512-7ZJRc7wq/1XjrOQYkkNpgo2qfE9XLrUU8D/DS+LAC/T0bYqZ46rW6dow0sOTXTPZS4bwer8bD/0OyuKQBfA3yw==",
+      "dependencies": {
+        "temporal-spec": "^0.2.0"
+      }
+    },
+    "node_modules/temporal-spec": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/temporal-spec/-/temporal-spec-0.2.0.tgz",
+      "integrity": "sha512-r1AT0XdEp8TMQ13FLvOt8mOtAxDQsRt2QU5rSWCA7YfshddU651Y1NHVrceLANvixKdf9fYO8B/S9fXHodB7HQ=="
+    },
     "node_modules/terser": {
       "version": "5.29.2",
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.29.2.tgz",
diff --git a/package.json b/package.json
index efa71a7747..80a577ba20 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "sortablejs": "1.15.2",
     "swagger-ui-dist": "5.12.0",
     "tailwindcss": "3.4.1",
+    "temporal-polyfill": "0.2.3",
     "throttle-debounce": "5.0.0",
     "tinycolor2": "1.6.0",
     "tippy.js": "6.3.7",
diff --git a/web_src/js/webcomponents/absolute-date.js b/web_src/js/webcomponents/absolute-date.js
index d12ea0a437..d2be455302 100644
--- a/web_src/js/webcomponents/absolute-date.js
+++ b/web_src/js/webcomponents/absolute-date.js
@@ -1,3 +1,9 @@
+import {Temporal} from 'temporal-polyfill';
+
+export function toAbsoluteLocaleDate(dateStr, lang, opts) {
+  return Temporal.PlainDate.from(dateStr).toLocaleString(lang ?? [], opts);
+}
+
 window.customElements.define('absolute-date', class extends HTMLElement {
   static observedAttributes = ['date', 'year', 'month', 'weekday', 'day'];
 
@@ -7,19 +13,13 @@ window.customElements.define('absolute-date', class extends HTMLElement {
     const weekday = this.getAttribute('weekday') ?? '';
     const day = this.getAttribute('day') ?? '';
     const lang = this.closest('[lang]')?.getAttribute('lang') ||
-      this.ownerDocument.documentElement.getAttribute('lang') ||
-      '';
+      this.ownerDocument.documentElement.getAttribute('lang') || '';
 
-    // only extract the `yyyy-mm-dd` part. When converting to Date, it will become midnight UTC and when rendered
-    // as localized date, will have a offset towards UTC, which we remove to shift the timestamp to midnight in the
-    // localized date. We should eventually use `Temporal.PlainDate` which will make the correction unnecessary.
-    // - https://stackoverflow.com/a/14569783/808699
-    // - https://tc39.es/proposal-temporal/docs/plaindate.html
-    const date = new Date(this.getAttribute('date').substring(0, 10));
-    const correctedDate = new Date(date.getTime() - date.getTimezoneOffset() * -60000);
+    // only use the first 10 characters, e.g. the `yyyy-mm-dd` part
+    const dateStr = this.getAttribute('date').substring(0, 10);
 
     if (!this.shadowRoot) this.attachShadow({mode: 'open'});
-    this.shadowRoot.textContent = correctedDate.toLocaleString(lang ?? [], {
+    this.shadowRoot.textContent = toAbsoluteLocaleDate(dateStr, 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 0000000000..ba04451b65
--- /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');
+});