How to update current day at midnight or basically on new day in Javascript

Question

So I have web watch what should work 24/7. It displaying digital time and current day. Nothing else.

My problem is that when time past midnight, current day won't update and I need to restart whole application.

I tried to add setTimeout for showDate() function, but it didn't help me. I was thinking about moving +1 on array of days. Is there anything more effective?

function showdate(){

    var date = new Date();
    var day = date.getDay();

    var name = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][day];

    document.getElementById("date").textContent = name;

}

showdate();

function showTime(){
    var date = new Date();
    var h = date.getHours(); // 0 - 23
    var m = date.getMinutes(); // 0 - 59
    var s = date.getSeconds(); // 0 - 59
    var session = "AM";

    if(h === 0){
        h = 24;
    }

    /*if(h > 12){
        h = h - 12;
        session = "PM";
    }*/

    h = (h < 10) ? "0" + h : h;
    m = (m < 10) ? "0" + m : m;
    s = (s < 10) ? "0" + s : s;

    var time = h + ":" + m + ":" + s;
    /*var sess = session;*/
    document.getElementById("MyClockDisplay").innerText = time;
    document.getElementById("MyClockDisplay").textContent = time;
   /* document.getElementById("PM").textContent = sess;*/

    setTimeout(showTime, 1000);     

   }

showTime();

Thank you for any idea.

@VLAZ Shouldn't it make setInterval / setTimetout? What do you mean by re-run? — Cabry, Jun 12 '19 at 08:28
@Cabry You would use setInterval rather than setTimeout, with an interval of 1000ms — Gaurav Punjabi, Jun 12 '19 at 08:29
How you are showing current time? is time update function in setInterval? — Arshpreet Wadehra, Jun 12 '19 at 08:29
You need to check this answer https://stackoverflow.com/a/32428268/5146848 — Sifat Haque, Jun 12 '19 at 08:32
why not update day inside your showTime function or you can use setInterval(()=>{showTime(); showDate();}) instead of recursion — Arshpreet Wadehra, Jun 12 '19 at 08:32

score 1 · Answer 1 · answered Jun 12 '19 at 08:30

Your code doesn't execute itself automatically. You shall call it periodically like this :

function showdate(){

    var date = new Date();

    var day = date.getDay();

    var name = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][day];

    document.getElementById("date").textContent = name;

        console.log('show date');
}

setInterval(showdate, 1000)

This way, the client will get the new date every second (where 1000 is in milliseconds). But you can change the time to any value (keep in mind it's in ms) that fit your needs.

You also can take a look at this example.

score 1 · Answer 2 · answered Jun 12 '19 at 08:36

function showdate(){
    var date = new Date();
    var day = date.getDay();
    var name = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][day];
    document.getElementById("date").textContent = name;

  console.log('show date');
}
setInterval(showdate, 1000)

function checkTime(i) {
    if (i < 10) {
      i = "0" + i;
    }
    return i;
}

function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    // add a zero in front of numbers<10
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById('time').innerHTML = h + ":" + m + ":" + s;
    t = setTimeout(function() {
      startTime()
    }, 500);
}
startTime();

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<div id="date"></div>
<div id="time"></div>

</body>
</html>

score 1 · Answer 3 · answered Jun 12 '19 at 08:41

1

You can do:

// Show date every day at 12
function showdateEveryDayAt12() {
  setInterval(function() {
    showdate();
  }, 86400000);
}

// Show date at next 12, and call showdateEveryDayAt12()
function showdateAtNext12() {
  var now = new Date();
  var millisecondsTo12 = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 12, 0, 0, 0) - now;

  setTimeout(function() {
    showdate();
    showdateEveryDayAt12();
  }, millisecondsTo12);
}

// Show date
function showdate() {
  var date = new Date();
  var day = date.getDay();
  var name = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"][day];

  document.getElementById("date").textContent = name;
}


// Show date now, at next 12 and every day at 12
showdate();
showdateAtNext12();

<p id="date"></p>

answered Jun 12 '19 at 08:41

Yosvel Quintero

18,669
5
37
46

Imma try that later. 86400000 is 24 hours right? What if I start application at 18:00 it will get update in 18:00 next day right? – Cabry Jun 12 '19 at 08:47
1

The function `showdateAtNext12()` will be executed at the next `12`.. and this will call the function `showdateEveryDayAt12()` – Yosvel Quintero Jun 12 '19 at 08:50
1

Sorry for my confusion but when I change 12 values to 24 to use 24H format it will be executed at next 24 hours right? – Cabry Jun 12 '19 at 08:59
1

Yes, that is the idea – Yosvel Quintero Jun 12 '19 at 09:17
Thank you for that. I ll let know if that works for me. – Cabry Jun 12 '19 at 09:18
1

Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/194808/discussion-between-yosvel-quintero-and-cabry). – Yosvel Quintero Jun 12 '19 at 09:24
1

@Cabry Good to help – Yosvel Quintero Jun 12 '19 at 09:24

How to update current day at midnight or basically on new day in Javascript

3 Answers3