| 
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);  | 
5 | 3 | }  | 
6 | 4 | 
 
  | 
7 | 5 | window.customElements.define('absolute-date', class extends HTMLElement {  | 
8 | 6 |   static observedAttributes = ['date', 'year', 'month', 'weekday', 'day'];  | 
9 | 7 | 
 
  | 
 | 8 | +  initialized = false;  | 
 | 9 | + | 
10 | 10 |   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.getAttribute(attr)) opt[attr] = this.getAttribute(attr);  | 
 | 14 | +    }  | 
15 | 15 |     const lang = this.closest('[lang]')?.getAttribute('lang') ||  | 
16 | 16 |       this.ownerDocument.documentElement.getAttribute('lang') || '';  | 
17 | 17 | 
 
  | 
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);  | 
20 | 23 | 
 
  | 
21 | 24 |     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);  | 
28 | 26 |   };  | 
29 | 27 | 
 
  | 
30 | 28 |   attributeChangedCallback(_name, oldValue, newValue) {  | 
 | 
0 commit comments