Timer shows military time only on cell phone

JavaScript
21

You lost me on that one. Don’t understand what you are trying to convey.

Thanks

22

He means that you should create an asp server page that outputs those comma-separated values for the date and time. That way, the html page can request that asp page for server-date information and do stuff with it.

23

Paul, So are you saying that if I can get a date/time to look like this:

2020,6,7,9,20,2

then it can be inserted and used in the code in post #14 and I can use the server time in the digital clock?

24

It can be in almost any format you like. I’d go with James’ recommendation though as it is fairly easy for JavaScript to convert it into meaningful information.

For example, with something like this untested piece of code:

function updateTime(response) {
    const [year, month, day, hour, min, sec] = response.split(",");
    doSomethingWith(year, month, day, hour, min, sec);
    ...
}
fetch("/datetime.asp").then(updateTime);
1 Like
25

Yup.

In your original code you have:

var d = new Date();

When creating a new Date object without arguments, this is relying on whatever time the user has set on their system. As you have seen yourself, this can lead to discrepancies.

To remedy this you would fetch the initial value from the server and use that to create the Date object.

var d = new Date(values,fetched,from,server);

^ This is just pseudocode.

26

Why do you need it parsed? If I use <%Response.write FormatDateTime(Now(), 3)%> it will display 4:09:22 AM

27

Yeah, but how do you want to increment that?
You need to pass JavaScript something it can work with.

28

Do mean that the clock would tick each second?

“You need to pass JavaScript something it can work with.” So you need it to me parsed?

Tell me exacly how you what it parsed and I will figure the asp of it.

29

You could go with JavaScript parsing it like this, for simplicity.

// response is "2020,6,7,9,20,2"
var parts = response.split(",");
var year = parts[0]; // "2020"
var month = parts[1]; // "6"
var day = parts[2]; // "7"
var hour = parts[3]; // "9"
var min = parts[4]; // "20"
var sec = parts[5]; // "2"
30

You should make an endpoint (an asp server page) that outputs the current date in the following format:

year, month, day, hours, minutes, seconds

So for 8th June 10:56:11, that would be:

2020,6,11,10,56,11
1 Like
31

Here is asp code:

response.write year(date) & "," & month(date) & "," & day(date) & "," & hour(time) & "," & Minute(time) & "," & second(time)

Will give you this for this time: 1:57:10 PM

2020,6,8,13,57,10
32

Thanks. You need to make this a live URL somewhere.
Are you able to post that here?

33

I don’t have one to post - any alternatives?

34

Could you DM me the link?

35

So, @javascript7 DM’d me the link to the endpoint and this is the solution we came up with.

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

    <script>
      function myTimer(d) {
        d.setSeconds(d.getSeconds() + 1);
        demo.innerHTML = d.toLocaleTimeString([], { hour12: true });
      }

      const demo = document.getElementById("demo");

      fetch('./DigitalTimerTest.asp')
        .then(res => res.text())
        .then((res) => {
          const [year, month, day, hour, min, sec] = res.split(',');
          const d = new Date(year, month, day, hour, min, sec);
          setInterval(() => { myTimer(d) }, 1000);
        });
    </script>
  </body>
</html>

This works, but unfortunately it needs to work on IE11, too.

@Paul_Wilkins: any chance you could lend a hand to convert it to ES5? I’ve gotta shoot off now and won’t be back on until tomorrow sometime.

1 Like
36

Polyfills are the answer, where support is provided for features that don’t exist in the browser, such as with Internet Explorer. There are a number of fetch polyfills as evinced in this article:

I’d start with the most basic one, that being the whatwg fetch polyfill. Go to their releases page and obtain the fetch.umd.js file.

Then include that script in your HTML page which polyfills (only if needed) fetch, providing support for it when browsers don’t know how to do fetch.

<script src="js/fetch.umd.js"></script>
2 Likes
37

Thank you Paul, I will check that out. I appreciate it.

1 Like
38

Paul, I have never heard of a Polyfills but did look at your post and went to that webiste. Unfortunately, I really can’t figuring it out. The code per below is the code from James and works just fine, except of IE 11. Any help would be appreciated getting IE 11 on board.

  <p id="demo"></p>

    <script>
      function myTimer(d) {
        d.setSeconds(d.getSeconds() + 1);
        demo.innerHTML = d.toLocaleTimeString([], { hour12: true });
      }

      const demo = document.getElementById("demo");

      fetch('../DigitalTimerTest.asp')
        .then(res => res.text())
        .then((res) => {
          const [year, month, day, hour, min, sec] = res.split(',');
          const d = new Date(year, month, day, hour, min, sec);
          setInterval(() => { myTimer(d) }, 1000);
        });
    </script>
39

Can you give more details about what you’re having trouble with? Is it obtaining the fetch.umd.js file? using it? The results afterwards? Something else?

1 Like
40

Yes, getting the file and then wear to place it on the page, end of body tag or?

Again to clarify, just wanting this code to work in IE 11. Works fine in FF and chrome.

Thank You