feat: render 12/24 hour format according to user's preference and add `hourCycle` option by silverwind · Pull Request #329 · github/relative-time-element

silverwind · 2025-10-28T00:00:04Z

Fixes: #276

In my testing on MacOS, neither Chrome, Safari or Firefox did follow the OS's "24-hour time" setting, so from what I gather, browsers seem to try to determine this based on locale only currently.

Before (with 24h preference):

After (with 24h preference):

With user config override:

siddharthkp · 2025-11-10T15:08:01Z

@silverwind I'm not entirely sure, but would it be possible to add some tests as well?

silverwind · 2025-11-10T15:20:00Z

Yes, some tests should be possible and given that they run in Chromium they might actually return some useful results.

silverwind · 2025-11-10T15:21:21Z

Maybe @keithamus also has some feedback.

silverwind · 2025-11-10T15:36:00Z

Also, I'm certain now that Intl.Locale.prototype.getHourCycles is a flawed approach that will not work reliably because it obtains the hourCycle preference for a given locale which not necessarily matches what the user has configured. It fails in my case where I have en-US configured as OS locale but have 24h cycle set in the OS. In https://stackoverflow.com/questions/27647918, there are various workarounds being discussed and all of them basically rely on checking how dates as being formatted as string.

siddharthkp · 2025-11-11T05:44:46Z

Yes, some tests should be possible and given that they run in Chromium they might actually return some useful results.

Sounds good! Assigning it back to you then :)

No obligation, of course! Let me know if you'd like one of us to pick up the tests instead

Peronia · 2026-01-30T13:21:08Z

Hi, I came here via the bug with the time display in Gitea. What is the current status? Will this feature still be merged?

francinelucca · 2026-01-30T23:46:05Z

👋🏽 @Peronia we're still happy to get this in, looks like there's some conflict resolution that needs to happen and also we're waiting on some tests for final approval

silverwind · 2026-01-31T09:04:11Z

Besides the conflict, more testing in different OSs and locales would be great. I can only test MacOS, would be interested in knowing whether this works in Windows/Linux as well.

Fixes: github#276 This has no direct opt-out but I think it may not need one because user preferences should always be respected imho.

Add hour-cycle to observedAttributes so dynamic attribute changes trigger re-renders. Add test suite covering all four hour cycle values, title formatting, ancestor inheritance, attribute override precedence, and dynamic re-rendering. Fix existing locale test to use explicit hour-cycle attribute. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Copilot

Pull request overview

This PR adds an hour-cycle configuration path to <relative-time> so rendered times can use a 12/24-hour clock based on user/browser preference, with an explicit override via attribute (and inheritance from ancestors / documentElement).

Changes:

Introduces an hourCycle getter + hour-cycle observed attribute and uses it to influence time formatting.
Adds a new [hourCycle] test suite covering explicit values, inheritance, and re-render on attribute change.
Updates README and examples to document/show the new hour-cycle usage.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 7 comments.

File	Description
`src/relative-time-element.ts`	Adds hour-cycle detection + wiring into `Intl.DateTimeFormat` options.
`test/relative-time.js`	Adds coverage for `hour-cycle` values, inheritance, and attribute-change re-rendering.
`README.md`	Documents `hourCycle` / `hour-cycle` in the attribute table.
`examples/index.html`	Demonstrates `hour-cycle="h12"` and `hour-cycle="h23"`.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/relative-time-element.ts

test/relative-time.js

README.md

silverwind · 2026-02-14T10:41:54Z

Tests are added and minor issues identified by Claude are resolved. I also let Claude do a self-review and it thinks the approach is solid.

- Use resolvedOptions().hour12 instead of whitespace heuristic for browser hour cycle detection - Pass hourCycle directly to Intl.DateTimeFormat instead of converting to hour12, preserving h11/h12/h23/h24 distinctions - Remove isHour12() helper, no longer needed - Validate hourCycle getter against allowed values - Add positive assertion to h24 test - Fix README formatting for hourCycle default value Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

silverwind · 2026-02-14T10:48:37Z

Manually tested latest changes, works fine in Firefox on MacOS with 24h OS preference:

silverwind · 2026-02-14T10:52:13Z

I also validated the minimum browser versions for these new APIs (Chrome 73, Firefox 58, Safari 13, Edge 18) and they align with the browser compatibilty in the README.

keithamus · 2026-02-14T21:27:25Z

src/relative-time-element.ts

+// browser's resolved DateTimeFormat options.
+function isBrowser12hCycle(): boolean {
+  try {
+    return new Intl.DateTimeFormat([], {hour: 'numeric'}).resolvedOptions().hour12 === true


I no longer work at GitHub, nor do I maintain this repository any more, but I was curious about this change.

I think this sould probably use the defined locale (this.#lang) so that if a page allows customisation of the rendered locale, this will take precedent over the browser.

I think hour cycle is a personal user preference and the document language (which #lang derives from) should not overrule that preference. I prefer 24h and don't want to see 12h just because I happen to browse a en-US document.

The current implementation here uses DateTimeFormat([]) which makes the browser use its "default locale". How a browser determines it is not specced, but here is what Chrome on MacOS does as of today (written by Claude):

[] → empty locale list — V8's CanonicalizeLocaleList returns an empty vector.

Fallback to ICU default locale — V8 calls icu::Locale::getDefault().getName() and converts it to a BCP 47 tag.

ICU default was set at renderer startup — In content/renderer/renderer_main.cc, Chromium calls
base::i18n::SetICUDefaultLocale() with the value from Chrome's GetApplicationLocale(). On macOS, this reads
NSBundle.preferredLocalizations[0] — the first OS language Chrome has a .pak translation for.

Hour cycle from CLDR data — V8 creates an ICU DateTimePatternGenerator for the resolved locale and calls
udatpg_getDefaultHourCycle(), which looks up the locale's region in CLDR's timeData (e.g., US → h12, GB/DE → h23).

No OS override — Chrome ships its own bundled ICU (not Apple's system ICU), so macOS settings like
AppleICUForce24HourTime or the "24-hour time" toggle have zero effect. The hour cycle comes entirely from CLDR data for
the resolved locale's region.

In my case 24h is determined from my locale's region (EU), and the OS setting has no effect because Google decided to not use Apple's ICU.

silverwind requested a review from a team as a code owner October 28, 2025 00:00

silverwind marked this pull request as draft October 28, 2025 00:31

silverwind marked this pull request as ready for review October 28, 2025 00:41

siddharthkp assigned silverwind Nov 11, 2025

silverwind marked this pull request as draft February 13, 2026 16:46

silverwind added 9 commits February 14, 2026 11:13

Render 12/24 hour format according to user's preference

e3a6c33

Fixes: github#276 This has no direct opt-out but I think it may not need one because user preferences should always be respected imho.

format

2942825

prefer RegExp.prototype.exec

85a9943

update comment

96cb9c5

add override option

b2e15aa

use correct h23

e52f34b

add isHour12 function to support h11

343328c

revert script

2db2686

use documented argument for format

a2d1259

silverwind force-pushed the 24h branch 2 times, most recently from bea0768 to a2d1259 Compare February 14, 2026 10:15

silverwind changed the title ~~Render 12/24 hour format according to user's preference~~ Render 12/24 hour format according to user's preference and add hourCycle option Feb 14, 2026

silverwind marked this pull request as ready for review February 14, 2026 10:37

Copilot AI review requested due to automatic review settings February 14, 2026 10:37

Copilot started reviewing on behalf of silverwind February 14, 2026 10:37 View session

Copilot AI reviewed Feb 14, 2026

View reviewed changes

silverwind changed the title ~~Render 12/24 hour format according to user's preference and add hourCycle option~~ feat: render 12/24 hour format according to user's preference and add hourCycle option Feb 14, 2026

keithamus reviewed Feb 14, 2026

View reviewed changes

silverwind mentioned this pull request Feb 15, 2026

Set user's 24h preference from their current OS locale go-gitea/gitea#29651

Merged

Conversation

silverwind commented Oct 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

siddharthkp commented Nov 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

silverwind commented Nov 10, 2025

Uh oh!

silverwind commented Nov 10, 2025

Uh oh!

silverwind commented Nov 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

siddharthkp commented Nov 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Peronia commented Jan 30, 2026

Uh oh!

francinelucca commented Jan 30, 2026

Uh oh!

silverwind commented Jan 31, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

silverwind commented Feb 14, 2026

Uh oh!

silverwind commented Feb 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

silverwind commented Feb 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

keithamus Feb 14, 2026

Choose a reason for hiding this comment

Uh oh!

silverwind Feb 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

silverwind commented Oct 28, 2025 •

edited

Loading

siddharthkp commented Nov 10, 2025 •

edited

Loading

silverwind commented Nov 10, 2025 •

edited

Loading

siddharthkp commented Nov 11, 2025 •

edited

Loading

silverwind commented Feb 14, 2026 •

edited

Loading

silverwind commented Feb 14, 2026 •

edited

Loading

silverwind Feb 14, 2026 •

edited

Loading