Skip to content

Commit b2e15aa

Browse files
silverwindsilverwind
committed
add override option
1 parent 96cb9c5 commit b2e15aa

3 files changed

Lines changed: 46 additions & 23 deletions

File tree

‎README.md‎

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -56,26 +56,27 @@ So, a relative date phrase is used for up to a month and then the actual date is
5656

5757
#### Attributes
5858

59-
| Property Name | Attribute Name | Possible Values | Default Value |
60-
| :------------- | :--------------- | :------------------------------------------------------------------------------------------ | :------------------------ |
61-
| `datetime` | `datetime` | `string` | - |
62-
| `format` | `format` | `'datetime'\|'relative'\|'duration'` | `'auto'` |
63-
| `date` | - | `Date \| null` | - |
64-
| `tense` | `tense` | `'auto'\|'past'\|'future'` | `'auto'` |
65-
| `precision` | `precision` | `'year'\|'month'\|'day'\|'hour'\|'minute'\|'second'` | `'second'` |
66-
| `threshold` | `threshold` | `string` | `'P30D'` |
67-
| `prefix` | `prefix` | `string` | `'on'` |
68-
| `formatStyle` | `format-style` | `'long'\|'short'\|'narrow'` | <sup>\*</sup> |
69-
| `second` | `second` | `'numeric'\|'2-digit'\|undefined` | `undefined` |
70-
| `minute` | `minute` | `'numeric'\|'2-digit'\|undefined` | `undefined` |
71-
| `hour` | `hour` | `'numeric'\|'2-digit'\|undefined` | `undefined` |
72-
| `weekday` | `weekday` | `'short'\|'long'\|'narrow'\|undefined` | <sup>\*\*</sup> |
73-
| `day` | `day` | `'numeric'\|'2-digit'\|undefined` | `'numeric'` |
74-
| `month` | `month` | `'numeric'\|'2-digit'\|'short'\|'long'\|'narrow'\|undefined` | <sup>\*\*\*</sup> |
75-
| `year` | `year` | `'numeric'\|'2-digit'\|undefined` | <sup>\*\*\*\*</sup> |
76-
| `timeZoneName` | `time-zone-name` | `'long'\|'short'\|'shortOffset'\|'longOffset'` `\|'shortGeneric'\|'longGeneric'\|undefined` | `undefined` |
77-
| `timeZone` | `time-zone` | `string\|undefined` | Browser default time zone |
78-
| `noTitle` | `no-title` | `-` | `-` |
59+
| Property Name | Attribute Name | Possible Values | Default Value |
60+
| :------------- | :--------------- | :------------------------------------------------------------------------------------------ | :------------------------------- |
61+
| `datetime` | `datetime` | `string` | - |
62+
| `format` | `format` | `'datetime'\|'relative'\|'duration'` | `'auto'` |
63+
| `date` | - | `Date \| null` | - |
64+
| `tense` | `tense` | `'auto'\|'past'\|'future'` | `'auto'` |
65+
| `precision` | `precision` | `'year'\|'month'\|'day'\|'hour'\|'minute'\|'second'` | `'second'` |
66+
| `threshold` | `threshold` | `string` | `'P30D'` |
67+
| `prefix` | `prefix` | `string` | `'on'` |
68+
| `formatStyle` | `format-style` | `'long'\|'short'\|'narrow'` | <sup>\*</sup> |
69+
| `second` | `second` | `'numeric'\|'2-digit'\|undefined` | `undefined` |
70+
| `minute` | `minute` | `'numeric'\|'2-digit'\|undefined` | `undefined` |
71+
| `hour` | `hour` | `'numeric'\|'2-digit'\|undefined` | `undefined` |
72+
| `weekday` | `weekday` | `'short'\|'long'\|'narrow'\|undefined` | <sup>\*\*</sup> |
73+
| `day` | `day` | `'numeric'\|'2-digit'\|undefined` | `'numeric'` |
74+
| `month` | `month` | `'numeric'\|'2-digit'\|'short'\|'long'\|'narrow'\|undefined` | <sup>\*\*\*</sup> |
75+
| `year` | `year` | `'numeric'\|'2-digit'\|undefined` | <sup>\*\*\*\*</sup> |
76+
| `timeZoneName` | `time-zone-name` | `'long'\|'short'\|'shortOffset'\|'longOffset'` `\|'shortGeneric'\|'longGeneric'\|undefined` | `undefined` |
77+
| `timeZone` | `time-zone` | `string\|undefined` | Browser default time zone |
78+
| `hourCycle` | `hour-cycle` | `'h11'\|'h12'\|'h23'\|'h24'\|undefined` | 'h12' or 'h24' based on browser |
79+
| `noTitle` | `no-title` | `-` | `-` |
7980

8081
<sup>\*</sup>: If unspecified, `formatStyle` will return `'narrow'` if `format` is `'elapsed'` or `'micro'`, `'short'` if the format is `'relative'` or `'datetime'`, otherwise it will be `'long'`.
8182

‎examples/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,20 @@ <h3>Format DateTime</h3>
2929
</relative-time>
3030
</p>
3131

32+
<p>
33+
h12 cycle:
34+
<relative-time datetime="1970-01-01T00:00:00.000Z" format="datetime" hour="numeric" minute="2-digit" second="2-digit" hour-cycle="h12">
35+
Jan 1 1970
36+
</relative-time>
37+
</p>
38+
39+
<p>
40+
h24 cycle:
41+
<relative-time datetime="1970-01-01T00:00:00.000Z" format="datetime" hour="numeric" minute="2-digit" second="2-digit" hour-cycle="h24">
42+
Jan 1 1970
43+
</relative-time>
44+
</p>
45+
3246
<p>
3347
Customised options:
3448
<relative-time datetime="1970-01-01T00:00:00.000Z" format="datetime" weekday="narrow" year="2-digit" month="narrow" day="numeric" hour="numeric" minute="2-digit" second="2-digit">

‎src/relative-time-element.ts‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,14 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
106106
return tz || undefined
107107
}
108108

109+
get hourCycle() {
110+
// Prefer attribute, then closest, then document
111+
const hc =
112+
this.closest('[hour-cycle]')?.getAttribute('hour-cycle') ||
113+
this.ownerDocument.documentElement.getAttribute('hour-cycle')
114+
return (hc || (isBrowser12hCycle() ? 'h12' : 'h24')) as Intl.DateTimeFormatOptions['hourCycle']
115+
}
116+
109117
#renderRoot: Node = this.shadowRoot ? this.shadowRoot : this.attachShadow ? this.attachShadow({mode: 'open'}) : this
110118

111119
static get observedAttributes() {
@@ -147,7 +155,7 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
147155
minute: '2-digit',
148156
timeZoneName: 'short',
149157
timeZone: this.timeZone,
150-
hour12: isBrowser12hCycle(),
158+
hour12: this.hourCycle === 'h12',
151159
}).format(date)
152160
}
153161

@@ -222,7 +230,7 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
222230
year: this.year,
223231
timeZoneName: this.timeZoneName,
224232
timeZone: this.timeZone,
225-
hour12: isBrowser12hCycle(),
233+
hour12: this.hourCycle === 'h12',
226234
})
227235
return `${this.prefix} ${formatter.format(date)}`.trim()
228236
}
@@ -256,7 +264,7 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
256264
minute: '2-digit',
257265
timeZoneName: 'short',
258266
timeZone: this.timeZone,
259-
hour12: isBrowser12hCycle(),
267+
hour12: this.hourCycle === 'h12',
260268
}
261269

262270
if (this.#isToday(date)) {

0 commit comments

Comments
 (0)