Date does not update

[fibby]

I have created a very simple clockface but the date does not update to the next day at 12 midnight. It sometimes update itself several hours after midnight and sometimes it does not update at all. What have I done wrong ?

import clock from "clock";
import document from "document";
import { preferences } from "user-settings";
import * as util from "../common/utils";
import { charger, battery } from "power";
import userActivity from "user-activity";
import { display } from "display";

// Update the clock every second
clock.granularity = "seconds";

// time display
let myLabel = document.getElementById("myLabel");
let myLabels = document.getElementById("myLabels");
let myLabelsec = document.getElementById("myLabelsec");
let myLabelssec = document.getElementById("myLabelssec");

// date dispaly
let curMonth = document.getElementById("month");
let dayDate = document.getElementById("date");
let weekDay= document.getElementById("week");
const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
const month = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]

//get date
var d = new Date();
dayDate.text = d.getDate();
weekDay.text = days[d.getDay()];
curMonth.text = month[d.getMonth()];

// Update the <text> element every tick with the current time
clock.ontick = () => {

let today = new Date();
let hours = today.getHours();
if (preferences.clockDisplay === "12h") {
// 12h format
hours = hours % 12 || 12;
} else {
// 24h format
hours = (hours);
}
let mins = util.zeroPad(today.getMinutes());
let secs = util.zeroPad(today.getSeconds());
myLabel.text = myLabels.text=`${hours}:${mins}:`;
myLabelsec.text = myLabelssec.text=`${secs}`;

updateSteps();
}
function updateSteps() {
let stepValue = document.getElementById("stepslabel");
stepValue.text = userActivity.today.adjusted.steps;
}

[Drifty26]

Your code to update the date:

//get date
var d = new Date();
dayDate.text = d.getDate();
weekDay.text = days[d.getDay()];
curMonth.text = month[d.getMonth()];

Is not in your ontick event, so it will only fire when the app is restarted.

You need to move code something like this into your ontick event handler.  Make sure to make it efficient - you don't need to reformat these text values every second.

John

[fibby]

Thanks John.

Its a bit puzzling, I have another clock face with the code outside of the ontick event but the dates does update. The only difference is that that is an analog clock which I don't think matters.

Instead of putting it in the ontick event, is there an event like " on change of date" ? Or do I have to write the code to check hour = 0:00 to trigger an update of the date ?

[fibby]

one more question, if I do an update on the date every second would this run only when the screen is on ? If that is the case I guess the drain on battery will be limited.

[Gondwana · Accepted solution]

Checking whether the time is 0:00 is risky, because your clockface may not be displaying at exactly midnight. In that case, the date will be wrong for the whole day.

Checking for date change in ontick() is fine, but as @Drifty26 says, don't redo the date every second. I keep track of the last known date and see whether the current date is different. Only if it is do I change it.

[fibby]

Thanks. You are right, if the checking will be fired only when the screen is on, then checking for hour=0 will not work. Keeping track of the date and comparing it with the current date is a much better way to go.

Thanks guys