diff --git a/package-lock.json b/package-lock.json index 061b48eca0..028e67c56b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -43,7 +43,6 @@ "sortablejs": "1.15.3", "swagger-ui-dist": "5.17.14", "tailwindcss": "3.4.13", - "temporal-polyfill": "0.2.4", "throttle-debounce": "5.0.0", "tinycolor2": "1.6.0", "tippy.js": "6.3.7", @@ -15417,21 +15416,6 @@ "node": ">=6" } }, - "node_modules/temporal-polyfill": { - "version": "0.2.4", - "resolved": "https://registry.npmjs.org/temporal-polyfill/-/temporal-polyfill-0.2.4.tgz", - "integrity": "sha512-WA5p0CjQTkMjF9m8sP4wSYgpqI8m2d4q7wPUyaJOWhy4bI9mReLb2yGvTV4qf/DPMTe6H6M/Dig5KmTMB7ev6Q==", - "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.36.0", "resolved": "https://registry.npmjs.org/terser/-/terser-5.36.0.tgz", diff --git a/package.json b/package.json index 42c0b29cc4..3c23d8dfbe 100644 --- a/package.json +++ b/package.json @@ -42,7 +42,6 @@ "sortablejs": "1.15.3", "swagger-ui-dist": "5.17.14", "tailwindcss": "3.4.13", - "temporal-polyfill": "0.2.4", "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 d2be455302..32f0ad7d13 100644 --- a/web_src/js/webcomponents/absolute-date.js +++ b/web_src/js/webcomponents/absolute-date.js @@ -1,30 +1,29 @@ -import {Temporal} from 'temporal-polyfill'; - -export function toAbsoluteLocaleDate(dateStr, lang, opts) { - return Temporal.PlainDate.from(dateStr).toLocaleString(lang ?? [], opts); +export function toAbsoluteLocaleDate(date, lang, opts) { + // only use the date part, it is guaranteed to be in ISO format (YYYY-MM-DDTHH:mm:ss.sssZ) or (YYYY-MM-DD) + // if there is an "Invalid Date" error, there must be something wrong in code and should be fixed. + // TODO: there is a root problem in backend code: the date "YYYY-MM-DD" is passed to backend without timezone (eg: deadline), + // then backend parses it in server's timezone and stores the parsed timestamp into database. + // If the user's timezone is different from the server's, the date might be displayed in the wrong day. + const dateSep = date.indexOf('T'); + date = dateSep === -1 ? date : date.substring(0, dateSep); + return new Date(`${date}T00:00:00`).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 = {}; + 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); - 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(this.getAttribute('date'), lang, opt); }; attributeChangedCallback(_name, oldValue, newValue) { diff --git a/web_src/js/webcomponents/absolute-date.test.js b/web_src/js/webcomponents/absolute-date.test.js index ba04451b65..dfd82e3cf1 100644 --- a/web_src/js/webcomponents/absolute-date.test.js +++ b/web_src/js/webcomponents/absolute-date.test.js @@ -7,9 +7,20 @@ 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'); + + // these cases shouldn't happen + expect(toAbsoluteLocaleDate('2024-03-15 01:02:03', '', {})).toEqual('Invalid Date'); + expect(toAbsoluteLocaleDate('10000-01-01', '', {})).toEqual('Invalid Date'); + + // test different timezone + const oldTZ = process.env.TZ; + process.env.TZ = 'America/New_York'; + expect(new Date('2024-03-15').toLocaleString()).toEqual('3/14/2024, 8:00:00 PM'); + expect(toAbsoluteLocaleDate('2024-03-15')).toEqual('3/15/2024, 12:00:00 AM'); + process.env.TZ = oldTZ; });