test/gitea-mirror
1
0
Fork 0
mirror of https://gitea.com/gitea/gitea-mirror.git synced 2026-03-20 03:40:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use relative-time to render absolute dates (#36238)

Browse Source 
`<relative-time>` can render absolute dates when passed
[`threshold="P0Y"`](https://github.com/github/relative-time-element#threshold-string-default-p30d)
and `prefix=""`, so remove the previously used `<absolute-date>` element
in its favor.

Devtest before:

<img width="324" height="210" alt="Screenshot 2025-12-23 at 20 22 44"
src="https://github.com/user-attachments/assets/cf78e0e7-f480-415f-98d5-09b25f9d5a8b"
/>

Devtest after:

<img width="274" height="184" alt="Screenshot 2025-12-23 at 20 22 49"
src="https://github.com/user-attachments/assets/5e7d25f6-eea1-4a8c-ba71-02b570804b95"
/>

Repo activity (rendering unchanged):

<img width="1023" height="67" alt="image"
src="https://github.com/user-attachments/assets/2c4fd6cb-14ab-43c6-ae4b-f86946b28288"
/>

---------

Signed-off-by: silverwind <me@silverwind.io>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
silverwind
2026-02-16 11:58:04 +01:00
committed by GitHub
parent 0e99932530
commit cfc60b2142
7 changed files with 11 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
web_src/js/webcomponents/absolute-date.test.ts
View File

@@ -1,26 +0,0 @@
import {toAbsoluteLocaleDate} from './absolute-date.ts';
test('toAbsoluteLocaleDate', () => {
expect(toAbsoluteLocaleDate('2024-03-15', 'en-US', {
year: 'numeric',
month: 'long',
day: 'numeric',
})).toEqual('March 15, 2024');
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 = import.meta.env.TZ;
import.meta.env.TZ = 'America/New_York';
expect(new Date('2024-03-15').toLocaleString('en-US')).toEqual('3/14/2024, 8:00:00 PM');
expect(toAbsoluteLocaleDate('2024-03-15', 'en-US')).toEqual('3/15/2024, 12:00:00 AM');
import.meta.env.TZ = oldTZ;
});

41
web_src/js/webcomponents/absolute-date.ts
View File

@@ -1,41 +0,0 @@
export function toAbsoluteLocaleDate(date: string, lang?: string, opts?: Intl.DateTimeFormatOptions) {
// 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 opts: Record<string, string> = {};
for (const attr of ['year', 'month', 'weekday', 'day']) {
if (this.getAttribute(attr)) {
opts[attr] = this.getAttribute(attr)!;
}
}
const lang = this.closest('[lang]')?.getAttribute('lang') ||
this.ownerDocument.documentElement.getAttribute('lang') || '';
if (!this.shadowRoot) this.attachShadow({mode: 'open'});
this.shadowRoot!.textContent = toAbsoluteLocaleDate(this.getAttribute('date')!, lang, opts);
};
attributeChangedCallback(_name: string, oldValue: string | null, newValue: string | null) {
if (!this.initialized || oldValue === newValue) return;
this.update();
}
connectedCallback() {
this.initialized = false;
this.update();
this.initialized = true;
}
});

1
web_src/js/webcomponents/index.ts
View File

@@ -2,4 +2,3 @@ import './polyfills.ts';
import '@github/relative-time-element';
import './origin-url.ts';
import './overflow-menu.ts';
import './absolute-date.ts';