Skip to content

Commit aee5891

Browse files
committed
fix date
1 parent feca880 commit aee5891

File tree

4 files changed

+21
-34
lines changed

4 files changed

+21
-34
lines changed

package-lock.json

-16
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,6 @@
4646
"sortablejs": "1.15.2",
4747
"swagger-ui-dist": "5.17.14",
4848
"tailwindcss": "3.4.10",
49-
"temporal-polyfill": "0.2.5",
5049
"throttle-debounce": "5.0.2",
5150
"tinycolor2": "1.6.0",
5251
"tippy.js": "6.3.7",

web_src/js/webcomponents/absolute-date.test.ts

+7-1
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,15 @@ test('toAbsoluteLocaleDate', () => {
77
day: 'numeric',
88
})).toEqual('March 15, 2024');
99

10-
expect(toAbsoluteLocaleDate('2024-03-15', 'de-DE', {
10+
expect(toAbsoluteLocaleDate('2024-03-15T01:02:03', 'de-DE', {
1111
year: 'numeric',
1212
month: 'long',
1313
day: 'numeric',
1414
})).toEqual('15. März 2024');
15+
16+
expect(toAbsoluteLocaleDate('12345-03-15 01:02:03', '', {
17+
year: 'numeric',
18+
month: 'short',
19+
day: 'numeric',
20+
})).toEqual('Mar 15, 12345');
1521
});

web_src/js/webcomponents/absolute-date.ts

+14-16
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,28 @@
1-
import {Temporal} from 'temporal-polyfill';
2-
3-
export function toAbsoluteLocaleDate(dateStr, lang, opts) {
4-
return Temporal.PlainDate.from(dateStr).toLocaleString(lang ?? [], opts);
1+
export function toAbsoluteLocaleDate(date: string, lang: string, opts: Intl.DateTimeFormatOptions) {
2+
return new Date(date).toLocaleString(lang || [], opts);
53
}
64

75
window.customElements.define('absolute-date', class extends HTMLElement {
86
static observedAttributes = ['date', 'year', 'month', 'weekday', 'day'];
97

8+
initialized = false;
9+
1010
update = () => {
11-
const year = this.getAttribute('year') ?? '';
12-
const month = this.getAttribute('month') ?? '';
13-
const weekday = this.getAttribute('weekday') ?? '';
14-
const day = this.getAttribute('day') ?? '';
11+
const opt: Intl.DateTimeFormatOptions = {};
12+
for (const attr of ['year', 'month', 'weekday', 'day']) {
13+
if (this.hasAttribute(attr)) opt[attr] = this.getAttribute(attr);
14+
}
1515
const lang = this.closest('[lang]')?.getAttribute('lang') ||
1616
this.ownerDocument.documentElement.getAttribute('lang') || '';
1717

18-
// only use the first 10 characters, e.g. the `yyyy-mm-dd` part
19-
const dateStr = this.getAttribute('date').substring(0, 10);
18+
// only use the date part, it is guaranteed to be in ISO format (YYYY-MM-DDTHH:mm:ss.sssZ)
19+
let date = this.getAttribute('date');
20+
let dateSep = date.indexOf('T');
21+
dateSep = dateSep === -1 ? date.indexOf(' ') : dateSep;
22+
date = dateSep === -1 ? date : date.substring(0, dateSep);
2023

2124
if (!this.shadowRoot) this.attachShadow({mode: 'open'});
22-
this.shadowRoot.textContent = toAbsoluteLocaleDate(dateStr, lang, {
23-
...(year && {year}),
24-
...(month && {month}),
25-
...(weekday && {weekday}),
26-
...(day && {day}),
27-
});
25+
this.shadowRoot.textContent = toAbsoluteLocaleDate(date, lang, opt);
2826
};
2927

3028
attributeChangedCallback(_name, oldValue, newValue) {

0 commit comments

Comments
 (0)