3

I am writing a simple JS app which requires time to be displayed in 12-hour format. For this, I'm using the toLocaleString of the Date class. But unfortunately, it returns the time at 12:05 to be 00:05 pm and 00:05 to be 00:05 am where I want it to show 12:05 pm and 12:05 am respectively.

Here is the way I use the function:

console.log(new Date("2020-08-15 12:15").toLocaleString("en-GB", { dateStyle: "medium", timeStyle: "short", hour12: true}));

console.log(new Date("2020-08-15 00:15").toLocaleString("en-GB", { dateStyle: "medium", timeStyle: "short", hour12: true}))

Is there a workaround or any other function to properly display the time at 12 o'clock?

Problem occurs only at 12 o'clock and something past 12

humble_barnacle
  • 460
  • 1
  • 4
  • 19
  • The `toLocaleString` method is likely doing the right thing, I expect `Date` is not interpreting your date format correctly. Encoding dates in UTC/Zulu timezone is pretty standard, explicitly declaring a timezone in the serialized date string gets rid of the ambiguity. – Jake Holzinger Aug 15 '20 at 07:26
  • @JakeHolzinger The problem is, since the API I'm using returns the date in that format I would have to use it in that way :( – humble_barnacle Aug 15 '20 at 20:53
  • 2
    Guys, using `hourCycle: "h12"` instead of `hour12: true` works like a charm. Another way suggested is to use `en-AU` locale instead of `en-GB` – humble_barnacle Aug 15 '20 at 20:53
  • This is the issue with using *toLocaleString*, the format is not specified so different implementations will give different results and also you may not get the expected format using the language code you think should work. So the answer is trial and error to find a language code that "works". Far better to use a formatter to something you **know** is unambiguous and what you want. Note that *hour12* overrides *hc* (hour cycle), and in many cases *hc* setting is ignored. – RobG Aug 15 '20 at 23:12
  • @robg that means you suggest me to use an explicit function rather than using toLocaleString? – humble_barnacle Aug 16 '20 at 15:14
  • @humble_barnacle—yes. – RobG Aug 16 '20 at 21:53

1 Answers1

1

There are more options when defining details of the format. ie:

hourCycle:'h11'
hourCycle:'h12'
hourCycle:'h23'
hourCycle:'h24'

Heaps more options here...

https://www.w3schools.com/jsref/jsref_tolocalestring.asp

Alternatively, consider using the Australian format which does what you're looking for without any extra coding... :)

en-AU: 15/08/2020, 10:43:45 am
user4723924
  • 26
  • 2
  • Could you please direct me to a place which details how `hourCycle` and other things work. W3Schools doesn't seem to give a detailed explanation. – humble_barnacle Aug 15 '20 at 20:43
  • @humble_barnacle— en-AU is a language code. Options for the [*Intl.DateTImeformat* constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) are documented at MDN, w3schools is not highly regarded. The spec is [*ECMA-402*](http://ecma-international.org/publications/standards/Ecma-402.htm), I think you'll find MDN more helpful. Also see [*Javascript Intl.DateTimeFormat hours12 gives odd output on Chrome*](https://stackoverflow.com/questions/63273543/javascript-intl-datetimeformat-hours12-gives-odd-output-on-chrome). – RobG Aug 15 '20 at 23:07
  • @RobG I get your point. Explicit should be the choice. Right? – humble_barnacle Aug 16 '20 at 15:18