Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What are the differences between the hourCycle options in Date.prototype.toLocaleTimeString()

MDN documentation for toLocaleTimeString() indicates that the hourCycle and hc options have four possible values: "h11", "h12", "h23", & "h24".

Two of the possible values strike me as super obvious (i.e. "h12" and "h24"), but the other two, I have no idea what they do and my duckduckfoo/googlefoo is failing me!

What are the "h11" and "h23" values representing?

My best guess is that they are some type of 0 vs 1 derivations of "h12" and "h24", but the underlying date stamp is still the same, and the value logged is the same, so if this is it, where is the difference?

This should be documented, or at least linked to, on MDN's toLocalTimeString page or ECMAScript's toLocalTimeString page, but it's not. It also really strikes me as something that should be simple to figure out, and yet I’m not seeing the difference, and it’s now crawling under my skin!

const now = new Date();
console.log('hourCycle: h11', now.toLocaleTimeString('en-US', { hourCycle: 'h11' }))
console.log('hourCycle: h12', now.toLocaleTimeString('en-US', { hourCycle: 'h12' }))
console.log('hourCycle: h23', now.toLocaleTimeString('en-US', { hourCycle: 'h23' }))
console.log('hourCycle: h24', now.toLocaleTimeString('en-US', { hourCycle: 'h24' }))
like image 976
MetaSean Avatar asked Jan 18 '19 16:01

MetaSean


People also ask

What is toLocaleTimeString () in JavaScript?

The toLocaleTimeString() method returns a string with a language-sensitive representation of the time portion of the date. In implementations with Intl. DateTimeFormat API support, this method simply calls Intl. DateTimeFormat .

How do you get toLocaleString time?

To get the current date and time in JavaScript, you can use the toLocaleString() method, which returns a string representing the given date according to language-specific conventions. To display only the time, you can use the toLocaleTimeString() method.


1 Answers

I found that the proposal of dateStyle and timeStyle options for Intl.DateTimeFormat says:

[[HourCycle]] is a String value indicating whether the 12-hour format ("h11", "h12") or the 24-hour format ("h23", "h24") should be used. "h11" and "h23" start with hour 0 and go up to 11 and 23 respectively. "h12" and "h24" start with hour 1 and go up to 12 and 24. [[HourCycle]] is only used when [[Hour]] is not undefined.

English or US style may prefer h12:

› new Date(2019,4,1,12,0,0).toLocaleString('en-US', { hourCycle: 'h12' })
‹ "5/1/2019, 12:00:00 PM"
› new Date(2019,4,1,12,0,0).toLocaleString('en-US', { hourCycle: 'h11' })
‹ "5/1/2019, 0:00:00 PM"

h24 must be used with caution. It would have been nice if the date part was the value one day before.

› new Date(2019,4,1,0,59,59).toLocaleString('ja-JP', { hourCycle: 'h23' })
‹ "2019/5/1 0:59:59"
› new Date(2019,4,1,0,59,59).toLocaleString('ja-JP', { hourCycle: 'h24' })
‹ "2019/5/1 24:59:59"

Compatibility table in MDN says Firefox 58 and Edge supports this.

like image 81
criticabug Avatar answered Sep 21 '22 15:09

criticabug