diff --git a/package-lock.json b/package-lock.json index a2bde7e083..4added7ec5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -47,7 +47,6 @@ "sortablejs": "1.15.2", "swagger-ui-dist": "5.17.14", "tailwindcss": "3.4.10", - "temporal-polyfill": "0.2.5", "throttle-debounce": "5.0.2", "tinycolor2": "1.6.0", "tippy.js": "6.3.7", @@ -14748,21 +14747,6 @@ "node": ">=6" } }, - "node_modules/temporal-polyfill": { - "version": "0.2.5", - "resolved": "https://registry.npmjs.org/temporal-polyfill/-/temporal-polyfill-0.2.5.tgz", - "integrity": "sha512-ye47xp8Cb0nDguAhrrDS1JT1SzwEV9e26sSsrWzVu+yPZ7LzceEcH0i2gci9jWfOfSCCgM3Qv5nOYShVUUFUXA==", - "license": "MIT", - "dependencies": { - "temporal-spec": "^0.2.4" - } - }, - "node_modules/temporal-spec": { - "version": "0.2.4", - "resolved": "https://registry.npmjs.org/temporal-spec/-/temporal-spec-0.2.4.tgz", - "integrity": "sha512-lDMFv4nKQrSjlkHKAlHVqKrBG4DyFfa9F74cmBZ3Iy3ed8yvWnlWSIdi4IKfSqwmazAohBNwiN64qGx4y5Q3IQ==", - "license": "ISC" - }, "node_modules/terser": { "version": "5.31.6", "resolved": "https://registry.npmjs.org/terser/-/terser-5.31.6.tgz", diff --git a/package.json b/package.json index 73cb9d3fa5..d33becb230 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,6 @@ "sortablejs": "1.15.2", "swagger-ui-dist": "5.17.14", "tailwindcss": "3.4.10", - "temporal-polyfill": "0.2.5", "throttle-debounce": "5.0.2", "tinycolor2": "1.6.0", "tippy.js": "6.3.7", diff --git a/web_src/js/webcomponents/absolute-date.test.ts b/web_src/js/webcomponents/absolute-date.test.ts index a591df7c10..b7a2354e0d 100644 --- a/web_src/js/webcomponents/absolute-date.test.ts +++ b/web_src/js/webcomponents/absolute-date.test.ts @@ -7,9 +7,15 @@ test('toAbsoluteLocaleDate', () => { day: 'numeric', })).toEqual('March 15, 2024'); - expect(toAbsoluteLocaleDate('2024-03-15', 'de-DE', { + expect(toAbsoluteLocaleDate('2024-03-15T01:02:03', 'de-DE', { year: 'numeric', month: 'long', day: 'numeric', })).toEqual('15. März 2024'); + + expect(toAbsoluteLocaleDate('12345-03-15 01:02:03', '', { + year: 'numeric', + month: 'short', + day: 'numeric', + })).toEqual('Mar 15, 12345'); }); diff --git a/web_src/js/webcomponents/absolute-date.ts b/web_src/js/webcomponents/absolute-date.ts index d2be455302..a215722511 100644 --- a/web_src/js/webcomponents/absolute-date.ts +++ b/web_src/js/webcomponents/absolute-date.ts @@ -1,30 +1,28 @@ -import {Temporal} from 'temporal-polyfill'; - -export function toAbsoluteLocaleDate(dateStr, lang, opts) { - return Temporal.PlainDate.from(dateStr).toLocaleString(lang ?? [], opts); +export function toAbsoluteLocaleDate(date: string, lang: string, opts: Intl.DateTimeFormatOptions) { + return new Date(date).toLocaleString(lang || [], opts); } window.customElements.define('absolute-date', class extends HTMLElement { static observedAttributes = ['date', 'year', 'month', 'weekday', 'day']; + initialized = false; + update = () => { - const year = this.getAttribute('year') ?? ''; - const month = this.getAttribute('month') ?? ''; - const weekday = this.getAttribute('weekday') ?? ''; - const day = this.getAttribute('day') ?? ''; + const opt: Intl.DateTimeFormatOptions = {}; + for (const attr of ['year', 'month', 'weekday', 'day']) { + if (this.getAttribute(attr)) opt[attr] = this.getAttribute(attr); + } const lang = this.closest('[lang]')?.getAttribute('lang') || this.ownerDocument.documentElement.getAttribute('lang') || ''; - // only use the first 10 characters, e.g. the `yyyy-mm-dd` part - const dateStr = this.getAttribute('date').substring(0, 10); + // only use the date part, it is guaranteed to be in ISO format (YYYY-MM-DDTHH:mm:ss.sssZ) + let date = this.getAttribute('date'); + let dateSep = date.indexOf('T'); + dateSep = dateSep === -1 ? date.indexOf(' ') : dateSep; + date = dateSep === -1 ? date : date.substring(0, dateSep); if (!this.shadowRoot) this.attachShadow({mode: 'open'}); - this.shadowRoot.textContent = toAbsoluteLocaleDate(dateStr, lang, { - ...(year && {year}), - ...(month && {month}), - ...(weekday && {weekday}), - ...(day && {day}), - }); + this.shadowRoot.textContent = toAbsoluteLocaleDate(date, lang, opt); }; attributeChangedCallback(_name, oldValue, newValue) {