Timer shows military time only on cell phone

JavaScript
1

This code works great in all browsers on my computer. However, when viewed on my cell phone, it shows in military time. Any fix for this?

<script>
    var myVar = setInterval(myTimer, 1000);

    function myTimer() {
        var d = new Date();
        document.getElementById("demo").innerHTML = d.toLocaleTimeString();
    }
</script>
<p id="demo"></p>

I appreciate your help!

2

Hi,

What is the output you are getting on your desktop browser and what is the output you are getting on your mobile?

3

Hi there javascript7,

it appears that the contents of the toLocaleTimeString()
are implementation-dependent…

https://www.ecma-international.org/ecma-262/10.0/index.html#sec-date.prototype.tolocaletimestring

…which means that if you want to guarantee a certain format
on all devices then you must apply it yourself. :biggrin:

coothead

1 Like
4

Coothead is right, although you can pass an options object to the toLocaleTimeString method, to customize the output somewhat.

For example, to force the 12 hour clock with the default locale:

d.toLocaleTimeString([], { hour12: true });

Also, as an aside, there is no need to keep querying the DOM within the myTimer function.

function myTimer() {
  var d = new Date();
  demo.innerHTML = d.toLocaleTimeString([], { hour12: true });
}

var demo = document.getElementById("demo");
var myVar = setInterval(myTimer, 1000);

HTH

1 Like
5

Desktop would be 11:35:56 PM and the cell phone would be 23:35:56 and of course no mention of am or pm.

6

When I use this:

<script>

    function myTimer() {
        var d = new Date();
        demo.innerHTML = d.toLocaleTimeString([], { hour12: true });
    }

    var demo = document.getElementById("demo");
    var myVar = setInterval(myTimer, 1000);
    
</script>

Nothing writes to the page.

7

Strange. Should work as expected.

Just to make sure nothing else is interferring, try this minimal example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <p id="demo"></p>

    <script>
      function myTimer() {
        var d = new Date();
        demo.innerHTML = d.toLocaleTimeString([], { hour12: true });
      }

      var demo = document.getElementById("demo");
      setInterval(myTimer, 1000);
    </script>
  </body>
</html>

You still seeing a blank page?

Or do you mean on the mobile version?

1 Like
8

I meant both… put I discovered the problem. In my original post, the JS was at the top of the page in an include file. Your code only work if it’s under the <p id="demo"></p>. So now several pages have to be changed versus just one page. But no problem, I can do that.

However, the difference now is that on the desktop it’s all caps for AM/PM versus lower caps on cell phone; am/pm. I would prefer all caps because it looks nicer, but I can live with that if can’t be fixed. The other issue is that there is a 7 second difference in time between desktop and cell. I want the time to be server time (same on both platforms), does that make a difference in the code?

Thank you.

9

You could try…

demo.innerHTML = d.toLocaleTimeString([], { hour12: true }).toUpperCase();

…or better still just use CSS…

#demo {
    text-transform: uppercase;
 }

coothead

1 Like
10

The toLocaleTimeString method is purely client-side. It has no concept of what is going on on the server, I’m afraid.

The discrepancy could be down to the fact that the system clocks on both devices are slightly different.

Also, server time could be problematic. What about if I visit your page from Europe. It’s currently early evening here, yet if your server is based in the states, where it’s late afternoon. What time do you want to show in this case?

If you’re set on displaying a clock on your page, and you don’t want to trust the visitor’s system time, you would need to grab the visitor’s location (a task in itself), then get the time from some API (like this one) based on where the visitor is coming from. This still doesn’t account for things like VPNs.

2 Likes
11

That works for the UpperCases. Great!

However, I just noticed the at 12:25:21 PM on the cell phone is shows 0:25:21 PM and shows correctly on desktop. Need to show 12:25:21 PM on both.

Any fixes for that?

Thanks!

12

James,

Everything you say is spot on, but I need to timestamp database entry for the server time. In my case, other time zones are not relevant and the user knows that.

13

James, this is what I use to database time stamps that adjusts for server time. Now I would like to incorporate that concept to showing the time in the JS:

This is asp code for that:

localtime = dateadd("h",-3,now())
14

James,

What do you think of this instead of my example? Seems to work. It uses UTC time. Is there anyway to get rid of the leading “0” in the time? For example: 4:38:55 PM rather than 04:38:55 PM.

<body>

<div id="clock"></div>

<script>
    function addLeadingZero(n) {
        return n < 10 ? '0' + n : n;
    }

    function windTheClock(timeZoneOffset) {
        var d = new Date();
        d.setHours(d.getUTCHours() + -7); // set time zone offset
        var h = d.getHours();
        var m = d.getMinutes();
        var s = d.getSeconds();
        var ampm = h >= 12 ? 'PM' : 'AM';
        h = h % 12;
        h = h ? h : 12; // replace '0' w/ '12'
        h = addLeadingZero(h);
        m = addLeadingZero(m);
        s = addLeadingZero(s);

        document.all["clock"].innerHTML = h + ':' + m + ':' + s
        + ' ' + ampm;
        setTimeout(function () { windTheClock(timeZoneOffset) }, 1000);
    }

    window.onload = function () {
        windTheClock(2);
    }
    
    </script>
</body>

Thanks

15

Got it! Removed h = addLeadingZero(h);

But still a 7 second difference in time with cell phone. So is this code dependent on the device? And is this code actually using UTC where it will be the same regardless of time zone?

Thanks

16

Check each device with https://time.is/GMT and you’ll figure out which one is out of sync. Each device has different ways to bring them back into sync.

2 Likes
17

Yes, thank you for that Paul, I appreciate it.

I still wish I could find a way to make or modify that code to read the server time. I have yet to find any examples of that.

dateadd("h",-3,now()) is the way to read/use the server time and the -3 bring it to local time. Do you know of a way to bring that into the code?

Thanks

18

You could use fetch to request that information from the server.

1 Like
19

Shouldn’t be too difficult.

Can you make an endpoint that returns the following:

year, month, day, hours, minutes, seconds

So for 7th June 09:20:02, that would be:

2020,6,7,9,20,2
20

Thank you for the suggestion.