diff --git a/package-lock.json b/package-lock.json index cad2c43151..1b45f1be9f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -39,6 +39,7 @@ "pretty-ms": "8.0.0", "sortablejs": "1.15.0", "swagger-ui-dist": "5.9.0", + "temporal-polyfill": "0.2.3", "throttle-debounce": "5.0.0", "tinycolor2": "1.6.0", "tippy.js": "6.3.7", @@ -10310,6 +10311,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.21.0", "resolved": "https://registry.npmjs.org/terser/-/terser-5.21.0.tgz", diff --git a/package.json b/package.json index ad09cb9648..8e4afba9a3 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "pretty-ms": "8.0.0", "sortablejs": "1.15.0", "swagger-ui-dist": "5.9.0", + "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/GiteaAbsoluteDate.js b/web_src/js/webcomponents/GiteaAbsoluteDate.js index 660aa99d07..69423a665d 100644 --- a/web_src/js/webcomponents/GiteaAbsoluteDate.js +++ b/web_src/js/webcomponents/GiteaAbsoluteDate.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('gitea-absolute-date', class extends HTMLElement { static observedAttributes = ['date', 'year', 'month', 'weekday', 'day']; @@ -7,19 +13,13 @@ window.customElements.define('gitea-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/GiteaAbsoluteDate.test.js b/web_src/js/webcomponents/GiteaAbsoluteDate.test.js new file mode 100644 index 0000000000..24b5b521f8 --- /dev/null +++ b/web_src/js/webcomponents/GiteaAbsoluteDate.test.js @@ -0,0 +1,15 @@ +import {toAbsoluteLocaleDate} from './GiteaAbsoluteDate.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'); +});