6

I would like to display this as something like: 4:26 PM.

But what I keep getting is: 04:26 PM.

If I remove the hour and minute options from toLocaleTimeString(), it works, but it also displays seconds, which I don't want.

myClock();
function myClock() { 
    var d = new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});   
    document.getElementById("clock").innerHTML = d; 
}
setInterval(myClock, 1000);
<div id="clock"></div>
scott.schaffer
  • 645
  • 7
  • 22

1 Answers1

11

You're setting the 2-digit format for hours; sounds like you want numeric instead:

myClock();
function myClock() { 
    var d = new Date().toLocaleTimeString([], {hour: 'numeric', minute:'2-digit'});   
    document.getElementById("clock").innerHTML = d; 
}
setInterval(myClock, 1000);
<div id="clock"></div>

(Note that this may depend on the specific locale; the above is true for en-US. The rules for determining the locale when not explicitly specified are in part based on individual user settings; if you need everyone to see the exact same formatting, you may want to substitute en-US in place of the first argument to toLocaleTimeString. (Though of course that defeats the purpose of having locales in the first place!)

Daniel Beck
  • 20,653
  • 5
  • 38
  • 53
  • I'm seeing `09:02` (good morning!) on both Firefox and Chrome. Did something change in browsers implementations of this? (also hardcoding the `en-US` locale, just in case) – Robin Métral Mar 18 '23 at 08:02
  • 1
    @RobinMétral am not seeing the leading zero on Chrome/Edge on Windows10 or on IOS Safari but am seeing it on Firefox Windows10. – A Haworth Mar 18 '23 at 09:28
  • Thanks @AHaworth. Probably variation in implementations, then. Which is strange, because I couldn't find anything about it (in docs, web platform tests, browser support data, etc) – Robin Métral Mar 19 '23 at 16:39
  • For what it's worth, on OSX I'm seeing correct behavior in Chrome, Safari, and Firefox: `hour: '2-digit'` includes the leading 0, `hour: 'numeric'` omits it (though this may vary by locale of course.) @RobinMétral and @AHaworth are you seeing the leading 0 when `hour: 'numeric'` is set in `en-US`? – Daniel Beck Mar 19 '23 at 17:12
  • No, not in en-US on my side. I think it's locale. Working on a small repro CodeSandbox right now to share results here afterwards :) – Robin Métral Mar 19 '23 at 17:14
  • This whole thing made me realize that although my browser locale (`navigator.locale`) is "en", my Intl locale (`(new Intl.NumberFormat()).resolvedOptions().locale`) is "en-DE" (and I don't know why) – Robin Métral Mar 19 '23 at 17:16
  • 1
    Ah, yeah then. I'll admit I don't know the nuances of how each locale handles these options, but then again the whole point of having locales is so we don't need to :) I'll update the answer to make that clearer, thanks! – Daniel Beck Mar 19 '23 at 17:26
  • 1
    Yup, this is exactly my learning here: don't expect to know exactly what'll come out of `toLocaleTimeString()` (unless hardcoding a locale) and trust `Intl.DateTimeFormat`. An illustrative example: https://codesandbox.io/s/datetimeformat-locale-fun-fx4hf3?file=/src/index.js – Robin Métral Mar 19 '23 at 18:02