12h/24h clockface with seconds

[MichaelGaming02]

Hello,

I'm a beginner and would like to create a watchface with 12h/24h with seconds.

The problem I have is that the time without seconds changes between 12h and 24h, but time with seconds is only 24h.

Can someone help me?

import document from "document";
import { preferences } from "user-settings";
import * as util from "../common/utils";


// Update the clock every minute
clock.granularity = "minutes";

// Get a handle on the <text> element
const myLabel = document.getElementById("myLabel");

// Update the <text> element every tick with the current time
clock.ontick = (evt) => {
let today = evt.date;
let hours = today.getHours();
if (preferences.clockDisplay === "12h") {
// 12h format
hours = hours % 12 || 12;
} else {
// 24h format
hours = util.zeroPad(hours);
}
let mins = util.zeroPad(today.getMinutes());
myLabel.text = `${hours}:${mins}`;
}
import document from "document";
import clock from "clock";

let myClock = document.getElementById("myClock");

clock.granularity = 'seconds'; // seconds, minutes, hours

clock.ontick = function(evt) {
myClock.text = ("0" + evt.date.getHours()).slice(-2) + ":" +
("0" + evt.date.getMinutes()).slice(-2) + ":" +
("0" + evt.date.getSeconds()).slice(-2);

};

[JonFitbit · Accepted solution]

You don't need to import twice. Try something like this:

import document from "document";
import { preferences } from "user-settings";
import * as util from "../common/utils";

clock.granularity = "seconds";

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

clock.ontick = (evt) => {
  let today = evt.date;
  let hours = today.getHours();
  let mins = util.zeroPad(today.getMinutes());
  let secs = util.zeroPad(today.getSeconds());

  if (preferences.clockDisplay === "12h") {
    // 12h format
    hours = hours % 12 || 12;
  } else {
    // 24h format
    hours = util.zeroPad(hours);
  }
  myClock.text = `${hours}:${mins}:${secs}`;
}

[MichaelGaming02]

Thank you! That works 🙂