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

[silverwind]

The element currently render the hour format according to the local of the provided lang attribute, which when en or en-US will uses 12h clock format which is unexpected for users who are living in a region where the 24h format is the predominant format. See Wikipedia on which regions use which hour format.

I therefor propose to render the hour format in the user's preferred format that they have set in their OS, as determinable by Intl APIs. Specifically DateTimeFormat() accepts a hour12 option and the option for this value is determinable via various means. There is also a newer hourCycle option which also supports the 11-hour format, but this API is not yet widely supported in browsers.

[keithamus]

All sounds very reasonable. PRs welcome!

[silverwind]

I'll try. I think we could make it the default behaviour with an HTML attribute to opt-out, maybe call it strictLangFormatting which means it would strictly format with the detected lang attribute, like it currently does.

[keithamus]

It could be opt-out by explicitly setting hour12 (or hourcycle) - where the default is automatically computed based on the locale.

Looks like it can also be overridden via hc extension key so e.g. en-gb-u-hc-h12 would force 12 hour formatting regardless of the hourcycle/hour12 options.

[silverwind]

Interesting find with hc. It seems to work in the three major engines, so the opt-out could be with it.

$ eshost -e "new Intl.DateTimeFormat('en-gb-u-hc-h12', {hour: 'numeric'}).format()"
#### JavaScriptCore
1 PM

#### spidermonkey
1 pm

#### v8
1 pm
$ eshost -e "new Intl.DateTimeFormat('en-gb-u-hc-h23', {hour: 'numeric'}).format()"
#### JavaScriptCore
13

#### spidermonkey
13

#### v8
13